Building a simple user interface

Table of contents
Using controls
Using containers
Styling your components
Adding effects
Creating states
Defining state transitions
Using tooltips
Controlling the cursor

Using controls
In the Adobe® Flex™ model-view design pattern, user interface components represent the view. The MXML language supports two types of user interface components: controls and containers. Containers are rectangular regions of the screen that contain controls and other containers. Controls are form elements, such as buttons, text fields, and list boxes.
While there are many types of Flex controls, this QuickStart describes the three most common ones: Text-based controls, Button-based controls, and List-based controls.
Using text-based controls
Using button-based controls
Using list-based controls
Using text-based controls
Text-based controls are used for displaying text and/or receiving text input from users.
The text-based controls available in Flex are the Label, Text, TextArea, TextInput, and RichTextEditor controls. The TextInput and TextArea components can both display text and accept user input, while the Label and Text controls are used only for displaying text.
The Text and TextArea controls can display text that spans multiple lines whereas the Label and TextInput controls are used to display single-line text.
The RichTextEditor control lets users enter, edit, and format text. Users apply text formatting and URL links using subcontrols that are located at the bottom of the RichTextEditor control.
All text-based components have a text property that you can use to set the text to be displayed.

The Button family of components includes the Button, LinkButton, CheckBox, RadioButton and PopupButton controls.
The Button control is a commonly used rectangular button. Button controls look like they can be pressed, and have a text label, an icon, or both on their face. You can optionally specify graphic skins for each of several Button states. You can create a normal Button control or a toggle Button control. A normal Button control stays in its pressed state for as long as the mouse button is down after you select it. A toggle Button controls stays in the pressed state until you select it a second time.
Buttons typically use event listeners to perform an action when the user selects the control. When a user clicks the mouse on a Button control, and the Button control is enabled, it dispatches a click event and a buttonDown event.
The LinkButton control creates a single-line hypertext link that supports an optional icon. It is basically a Button control without a border. You can use a LinkButton control to open a URL in a web browser.
The CheckBox control is a commonly used graphical control that can contain a check mark or be unchecked (empty). You can use CheckBox controls wherever you need to gather a set of true or false values that aren’t mutually exclusive. You can add a text label to a CheckBox control and place it to the left, right, top, or bottom of the check box. Flex clips the label of a CheckBox control to fit the boundaries of the control.
The RadioButton control lets the user make a single choice within a set of mutually exclusive choices. A RadioButtonGroup control is composed of two or more RadioButton controls with the same groupName. The group can refer to a group created by the tag. The user selects only one member of the group at a time. Selecting an unselected group member deselects the currently selected RadioButton control within the group.
The PopUpButton control adds a flexible pop-up control interface to a Button control. It contains a main button and a secondary button, called the pop-up button, which pops up any UIComponent object when a user clicks the pop-up button. One common use for the PopUpButton control is to have the pop-up button open a List control or a Menu control that changes the function and label of the main button.