Pages

October 23, 2008

Flex UI Controls

Posted by Jeremy Mitchell
A Flex application's user-interface (UI) is composed of two component types — containers and controls. Containers define application layout and navigation; controls represent a broad category of UI objects required of a fully functional and interactive application.

Flex user interface controls are found in the mx.controls package of the Flex Class library.

Similar to the controls found on a traditional "Control Panel" (gauges, buttons, dials, indicators, etc), most Flex UI controls provide users control of your application.

However, despite the term, some Flex controls are not interactive and provide no control whatsoever. Examples of noninteractive controls include Label and ProgressBar.

The remainder are interactive controls and as such "can participate in tabbing and other kinds of keyboard focus manipulation, accept low-level events like keyboard and mouse input, and be disabled so that it does not receive keyboard and mouse input." Interactive controls provide the level of interaction required for users to perform desired tasks or business functions.

Common control types include text-based controls, button-based controls, and data provider controls (which include both list-based controls and menu-based controls).

Text-based controls are designed to display text and/or receive text input. Examples include Label, Text, TextArea, TextInput, and RichTextEditor.

Button-based controls receive user input in the form of keyboard or mouse events. Examples include Button, LinkButton, CheckBox, RadioButton and PopUpButton.

Data provider controls display data from a variety of sources, both internal and external to your application. All data provider controls require designation of a "data provider".

List-based controls (a subset of data provider controls) visually represent hierarchical or non-hierarchical (flat) data structures. Examples include ComboBox, List, HorizontalList, DataGrid, TileList and Tree.

Menu-based controls (another subset of data provider controls) enable user-initiated navigation through use of a static menu (always visible) or a popup menu (visibility is initiated by a user or system event). Examples include Menu, MenuBar and PopUpMenuButton.

All Flex controls subclass (or extend) the UIComponent class, and therefore, inherit the following key behaviors:

- resizing capabilities
- positioning capabilities
- ability to dispatch events
- ability to accept keyboard focus and mouse input
- ability to control visibility

Like all Flex UI components, controls can be sized, positioned and styled according to your needs.

Sizing requires the use of height and width properties - either explicitly (by setting the height and width properties to numeric pixel values) or relatively (using percentage values in relation to the parent container).

In many instances the positioning of a control is determined by the layout property (horizontal or vertical) of the parent container in conjunction with the hierarchical sequence of the control. For example, if a control represents the 3rd child element of a parent container with the layout property set to horizontal, the control will be positioned 3rd from the left.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Panel title="Panel Container with Horizontal Layout"
        layout="horizontal" 
        paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
       
        <mx:Button label="One"/>
        <mx:Button label="Two"/>
        <mx:Button label="Three"/>
       
    </mx:Panel>
   
</mx:Application>



However, when the parent container uses absolute positioning, the X and Y properties of the control specify the horizontal and vertical pixel coordinates within the parent container. Absolute positioning enables overlap of controls if necessary.

Also, the appearance of a control can be customized through the use of styles and skins utilizing the CSS Explorer.

Fortunately, Flex ships with a number of pre-built controls ready for inclusion in your application. Most controls are accessible via MXML (or ActionScript) during the development phase of your Flex application. MXML provides a mechanism for creating (instantiating) control components (objects) and setting control properties (including registration of event handlers with control events).

At runtime, the same control properties (including event handlers) are accessible via ActionScript only. ActionScript also provides access to the methods (or functions) of a Flex control. Runtime access to Flex controls provides the dynamic capabilities required of highly interactive and responsive application.