This chapter is from the book

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.

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 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 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 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 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 is used for data input. It is limited to a single line of text.

RichText: The RichText control is used to display multiple lines of text, but is not editable and does not display scroll
bars if the text exceeds the available screen space.

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 available screen space.

All text controls support HTML 1.0 and a variety of text and font styles.

NOTE

All four text controls mentioned here support Adobe’s Flash Text Engine and some of the controls (RichText and RichEditableText)
support even more advanced layout using the Text Layout Framework (TLF). While you will not be using TLF as part of the application
in this book, many new and interesting features are available with TLF. You can learn about TLF on Adobe’s open source site:
http://opensource.adobe.com/wiki/display/tlf/Text+Layout+Framework.

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 the yourLabel 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.