Using controls
Requirements
User level
All
Required products
- 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.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- ControlsTextBased.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
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>
Result
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.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- ControlsButtonBased.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="460" height="400">
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
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;
Alert.show (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 ('mailto:comments@somewhere.com'));";
Alert.show (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>
Result
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.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- ControlsListBased.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="460" height="360">
<s:layout>
<s:HorizontalLayout paddingTop="20"/>
</s:layout>
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
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);
Alert.show ( 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>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
