Introducing Simple Controls

Simple controls are provided as part of the framework and help make rich Internet application (RIA) development easy. Using controls, you can easily define the look and feel of your buttons, text, combo boxes, and much more. You can customize controls to provide your own unique look and feel, and you will learn more about how to do this later in the book. Controls provide a standards-based methodology that makes learning how to use them easy. Controls are the foundation of any RIA.

Flex 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 (application programming interface) are accessible in both MXML and ActionScript. The class hierarchy also includes other classes that define the new event model, as well as the display attributes that all simple controls share.

You place the visual components of your Flex application inside containers, which provide bounding boxes for text, controls, images, and other media elements (You learned about containers in the last 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 drawing another component (Events will be covered in detail in the next lesson.). You will also learn in later lessons how to build your own custom events. Custom events are a fundamental concept used while building easily maintainable applications that reduce the risk of a change to one portion of the application forcing a change in another. This concept 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 a database. Flex has a number of text controls that can be used to display editable or non-editable text. You have already used the Label control to display single lines of text. The Label control cannot be edited by an end user, so if you need that functionality you can use a TextInput control. The TextInput control, like the Label control, is limited to a single line of text. The Text control is used to display multiple lines of text, but is not editable and does not display scroll bars if the real estate is exceeded. The TextArea component is useful for displaying multiple lines of text, either editable or non-editable, with scroll bars if the available text exceeds the screen real estate available. All text controls support HTML 1.0 and a variety of text and font styles.

To populate text fields at run time, you must assign an id to the control. Once you have done that, you can access the control's properties; for example all of the text controls previously mentioned have a text property. This property can be used to populate the control with plain text using either an ActionScript function or inline using data binding. The following code demonstrates assigning an id to the label, which enables you to reference the Label control in ActionScript:

<mx:Label /> 

You can populate any text control at run time 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:

<mx:Label id = "yourLabel" text = "{myLabel.text}"/> 

Data binding can also be used to bind a simple control to underlying data structures. For example, if you have XML data, which might have come from a server-side dataset, you can use the functionality of data binding to connect a simple control to the data structure. When the underlying data changes, the controls will automatically update to reflect the new data. This provides a powerful tool for the application developer.

Flex framework also provides a powerful container for building forms that will be covered in this lesson. The Form container allows developers to create efficient, good-looking forms with a minimal effort. The heading, spacing, and arrangement of form items are handled automatically by Flex.