by Adobe



23 March 2010

User level
Required products
All Flex (Download trial)
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.
Although there are many types of Flex controls, this QuickStart describes the three most common ones:

Using text-based controls

Text-based controls are for displaying text and/or receiving text input from users.
The text-based controls available in the Spark namespace are the Label, TextArea, TextInput, RichText, and RichEditableText controls. The TextArea, TextInput, and RichEditableText components can both display text and accept user input. The Label and RichText controls can only display text. The TextArea control can display text that spans multiple lines.
All text-based components have a text property that you can use to set the text to be displayed.
Note: For more information on working with text-based controls, see Text controls in the Adobe Flex 4 Help.
<?xml version="1.0" encoding="utf-8"?> <!-- ControlsTextBased.mxml --> <s:Application xmlns:fx="" xmlns:s="library://" xmlns:mx="library://" width="380" height="320"> <s:layout> <s:HorizontalLayout paddingTop="10" horizontalAlign="center" /> </s:layout> <s:Panel title="Leave a comment" width="60%"> <s:layout> <s:VerticalLayout paddingTop="10" paddingLeft="20" paddingRight="20" paddingBottom="10"/> </s:layout> <s:Label text="Fill out this form to leave us a comment:" width="100%"/> <s:Label text="Name:"/> <s:TextInput id="userName"/> <s:Label text="Email:"/> <s:TextInput id="userEmail"/> <s:Label text="Comment:"/> <s:TextArea id="userComment" width="100%" heightInLines="4" editable="true"/> </s:Panel> </s:Application>

Using button-based controls

The Button family of components available from the Spark namespace includes the Button, ToggleButton, CheckBox, and RadioButton controls. The MX namespace provides additional button-based components that are not available from the Spark namespace. These MX controls include the LinkButton 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. A Button control stays in its pressed state for as long as the mouse button is down after you select it. A ToggleButton 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 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 <s:RadioButtonGroup> 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 LinkButton control, available from the MX namespace, creates a single-line hypertext link that supports an optional icon. It is basically a Button control without a border. Use a LinkButton control to open a URL in a web browser.
The PopUpButton control, available from the MX namespace, 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 open a List control or a Menu control that changes the function and label of the main button.
<?xml version="1.0" encoding="utf-8"?> <!-- ControlsButtonBased.mxml --> <s:Application xmlns:fx="" xmlns:s="library://" xmlns:mx="library://" width="460" height="400"> <fx:Script> <![CDATA[ import; import mx.controls.Alert; private const NL:String = "\r"; private function submitButtonClickHandler (event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + userName.text + NL; userDetails += "Email: " + userEmail.text + NL; userDetails += "Hide email? " + (hideEmail.selected ? "Yes" : "No") + NL + NL; userDetails += "Comment:" + NL + NL + userComment.text; (userDetails); } private function emailButtonClickHandler (event:MouseEvent):void { var msg:String = "You can use the navigateToURL() method to open a URL" msg += " using a call similar to the following:\r\r"; msg += "navigateToURL (new URLRequest (''));"; (msg); } ]]> </fx:Script> <s:Panel title="Leave a comment" left="10" top="10" right="10" bottom="10"> <s:controlBarContent> <mx:Spacer width="100%"/> <s:Button id="submitButton" label="Submit" click="submitButtonClickHandler(event);"/> <mx:Spacer width="100%"/> </s:controlBarContent> <s:Label text="Fill out this form to leave us a comment:" width="250" x="10" y="10" fontWeight="bold"/> <s:Label text="Name:" x="10" y="38"/> <s:TextInput id="userName" y="36" right="10" left="90"/> <s:Label text="Email:" x="10" y="68"/> <s:TextInput id="userEmail" y="66" right="10" left="90"/> <s:Label text="Comment:" x="10" y="129"/> <s:TextArea id="userComment" editable="true" left="10" right="10" height="109" bottom="40"/> <s:CheckBox id="hideEmail" y="103" left="90" label="Hide my email address" selected="true"/> <mx:LinkButton id="emailButton" y="272" horizontalCenter="0" label="Having trouble? Email us!" fontWeight="bold" click="emailButtonClickHandler(event);"/> </s:Panel> </s:Application>

Using list-based controls

List-based controls extend the ListBase class at some point in their inheritance hierarchy. List-based controls available from the Spark namespace include the List, ComboBox, DropDownList, ButtonBar, and TabBar. List-based controls available from the MX namespace include DataGrid, Tree, HorizontalList, and TileList controls.
Several Flex framework components, including all List-based controls, represent data from a data provider, an object that contains data required by the control. For example, a Tree control’s data provider determines the structure of the tree and any associated data assigned to each tree node, and a ComboBox control’s data provider determines the items in the control’s drop-down list.
Note: Many standard controls, including the ColorPicker and MenuBar controls also get data from a data provider. Controls that display application data are sometimes referred to as data provider controls. For more information on using data providers, see Data providers and collections. in the Adobe Flex 4 Help.
You can set a component's data provider in in two ways: The first way is to define the data provider inline in the MXML by defining an Array or Collection as a child tag of a control that takes a data provider. This approach has the benefit of being quick to implement and is suitable for use with static data and for prototyping. The second method is to use data binding to bind a control to an existing Array or Collection that is defined using ActionScript. This latter approach is used to display data resulting from server-side calls and to bind to data structures created in ActionScript. It is also the more scalable of the two.
The following example demonstrates both methods.
<?xml version="1.0" encoding="utf-8"?> <!-- ControlsListBased.mxml --> <s:Application xmlns:fx="" xmlns:s="library://" xmlns:mx="library://" width="460" height="360"> <s:layout> <s:HorizontalLayout paddingTop="20"/> </s:layout> <fx:Script> <![CDATA[ import; import mx.controls.Alert; import mx.collections.ArrayCollection; private const NL:String = "\r"; // A data provider created by using ActionScript [Bindable] private var subscriptions:ArrayCollection = new ArrayCollection ( [ {data:0, label:"Print"}, {data:1, label:"Website"}, {data:2, label:"RSS (text)"}, {data:3, label:"Podcast"} ] ); private function submitButtonClickHandler(event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + userName.text + NL; userDetails += "Email: " + userEmail.text + NL; userDetails += "Site rating: " + userRating.selectedItem.label + NL + NL; userDetails += "Subscriptions:"; var selectedSubscriptionItems:Array = userSubscriptions.selectedItems; for ( var i:String in selectedSubscriptionItems) { // Display the selected subscriptions, separated by commas userDetails += selectedSubscriptionItems[i].label + ", "; } // Remove the last comma and space from the string we're displaying userDetails = userDetails.substring(0, userDetails.length-2); ( userDetails ); } ]]> </fx:Script> <s:Panel title="Feedback form" width="99%"> <s:layout> <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> <s:controlBarContent> <mx:Spacer width="100%"/> <s:Button id="submitButton" label="Submit" click="submitButtonClickHandler(event);"/> <mx:Spacer width="100%"/> </s:controlBarContent> <s:Label text="Thank you for giving us feedback:" width="100%" fontWeight="bold"/> <mx:Form width="100%"> <mx:FormItem label="Name:" width="100%"> <s:TextInput id="userName" /> </mx:FormItem> <mx:FormItem label="Email:" width="100%"> <s:TextInput id="userEmail" /> </mx:FormItem> <mx:FormItem label="Site rating:" width="100%"> <s:ComboBox id="userRating" width="100%" selectedIndex="0"> <!-- An inline data provider --> <s:ArrayList id="ratingList"> <fx:Object data="0" label="Zero" /> <fx:Object data="1" label="One" /> <fx:Object data="2" label="Two" /> <fx:Object data="3" label="Three" /> <fx:Object data="4" label="Four" /> </s:ArrayList> </s:ComboBox> </mx:FormItem> <mx:FormItem label="Subscriptions:" width="100%"> <mx:List id="userSubscriptions" rowCount="3" allowMultipleSelection="true" width="100%" dataProvider="{subscriptions}"/> </mx:FormItem> </mx:Form> </s:Panel> </s:Application>

For more information