Lesson 4. Using Simple Controls

What You Will Learn

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

Approximate Time

This lesson takes approximately 45 minutes to complete.

In this lesson, you will add user interface elements to enable the customer to find more details about the grocery items and begin the checkout process. 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 an underlying data structure, and they will reflect changes in that data structure in real time through data binding. You’re ready to start learning about the APIs (application programming interfaces) of specific controls, which are available in both MXML and ActionScript. The APIs are fully documented in the ActionScript Language Reference, often referred to as ASDoc, which is available at http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html.

The Flex framework has many tools that make laying out simple controls easier. All controls are placed within containers (see Lesson 3, “Laying Out the Interface”). In this lesson, you’ll become familiar with simple controls by building the basic user interface of the application that you will develop throughout this book. You’ll also learn about timesaving functionality built into the framework, such as data binding and capabilities of the Form layout container.

FlexGrocer with Image and text controls bound to a data structure