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.
Lesson Files
Media Files:
Lesson04/start/assets/dairy_milk.jpg
Starting Files:
Lesson04/start/FlexGrocer.mxml
Completed Files:
Lesson04/complete/FlexGrocer.mxml
Lesson04/complete/Checkout.mxml
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 are 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/AS3LCR/Flex_4.0/.
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 will become familiar with simple controls by building the basic user interface of the application that you will develop throughout this book. You will also learn about timesaving functionality built into the framework, such as data binding and capabilities of the Form layout container.
)
Figure 1 FlexGrocer with Image and Text controls bound to a data structure
Introducing Simple Controls
Simple controls are provided as part of the Flex framework and help make rich Internet application development easy. Using controls, you can easily define the look and feel of your buttons, text, combo boxes, and much more. Later in this book, you’ll learn how to customize controls to create your own unique look and feel. Controls provide a standards-based methodology that makes learning how to use them easy. Controls are the foundation of any RIA.
The Flex SDK includes an extensive class library for both simple and complex controls. All these classes can be instantiated via an MXML tag or as a standard ActionScript class, and their APIs are accessible in both MXML and ActionScript. The class hierarchy comprises nonvisual classes as well, such as those that define the new event model, and it includes the display attributes that all simple controls share.
You place the visual components of your Flex application inside containers, which establish the size and positioning of text, controls, images, and other media elements (you learned about containers in the previous lesson). All simple controls have events that can be used to respond to user actions, such as clicking a button, or system events, such as another component being drawn (events will be covered in detail in the next lesson). You will also learn in later lessons how to build your own events. Fundamentally, events are used to build easily maintainable applications that reduce the risk that a change to one portion of the application will force a change in another. This is often referred to as building a “loosely coupled” application.
Most applications need to display some sort of text, whether it be static or dynamically driven from an outside source like an XML file or a database. Flex has a number of text controls that can be used to display editable or noneditable text:
- Label: You have already used the Label control to display single lines of text. The Label control cannot be edited by an end user; if you need that functionality, you can use a TextInput control.
- TextInput: The TextInput control, like the Label control, is limited to a single line of text.
- RichText: The RichText control is used to display multiple lines of text, but it is not editable and does not display scroll bars if the usable space is exceeded.
- TextArea: The TextArea component is useful for displaying multiple lines of text, either editable or noneditable, with scroll bars if the available text exceeds the screen space available.
All text controls support HTML 1.0 and a variety of text and font styles.
To populate text fields at runtime, you must assign an ID to the control. Once you have done that, you can access the control’s properties; for example, all the text controls previously mentioned have a text property. This property enables you to populate the control with plain text using either an ActionScript function or inline data binding. The following code demonstrates assigning an ID to the label, which enables you to reference the Label control in ActionScript:
<s:Label id=”myLabel”/>
You can populate any text control at runtime using data binding, which is denoted by curly bracket syntax in MXML. The following code will cause your Label control to display the same text as the myLabel control in the previous example:
<s:Label id = “yourLabel” text = “{myLabel.text}”/>
Also, you can use data binding to bind a simple control to underlying data structures. For example, if you have XML data, which might come from a server-side dataset, you can use data binding to connect a simple control to the data structure. When the underlying data changes, the controls are automatically updated to reflect the new data. This provides a powerful tool for the application developer.
The Flex framework also provides a powerful container for building the forms that we will cover in this lesson. The Form container allows developers to create efficient, good-looking forms with minimal effort. Flex handles the heading, spacing, and arrangement of form items automatically.