Lesson 4. Using Simple Controls

What You Will Learn

In this lesson, you will: Define the user interface (UI) for the e-commerce application of FlexGrocer Use simple controls such as the Image control, text controls, and CheckBox control Define the UI for the administrative tool that allows users to update the data Use the Form container to lay out the simple controls Use data binding to connect the controls to a data model

Approximate Time

This lesson takes approximately 45 minutes to complete.

Lesson Files

Media Files: Lesson04/start/assets/dairy_milk.jpg Starting Files: Lesson04/start/EComm.mxml Lesson04/start/DataEntry.mxml Lesson04/start/Dashboard.mxml Completed Files: Lesson04/complete/EComm.mxml Lesson04/complete/DataEntry.mxml Lesson04/complete/Dashboard.mxml

In this lesson, you will add user interface elements to enable the end user to work with grocery items. An important part of any application is the user interface, and Adobe Flex contains elements such as buttons, text fields, and radio buttons that make building interfaces easier. Simple controls can display text and images and also gather information from users. You can tie simple controls to underlying data structures, and they will reflect changes in that data structure in real time using data binding. You are ready to start learning about the APIs of specific controls, which are available in both MXML and ActionScript. The APIs are fully documented in the ASDOC, which is available at www.adobe.com/go/flex2_livedocs.

There are many tools within Flex framework that make laying out simple controls easier. All controls are placed within containers (refer to Lesson 3, “Laying Out the Interface”). In this lesson, you will become familiar with simple controls by building the basic user interface of the application you will develop throughout this book. You will also learn about time-saving functionality built into the framework such as data binding, using the Form layout container, and using focus management to optimize the user experience.

This is what FlexGrocer will look like at the end of this lesson when an Image and Text control bound to a data structure have been added to the e-commerce application.