September 19, 2008

Flex UI Containers

Posted by Jeremy Mitchell
Flex containers serve as a mechanism for defining application layout and navigation. Common layout containers include VBox, HBox, Canvas, Tile and Form. Navigation containers include Accordion, Tab Navigator and View Stack. Each container descends from the Container Class, serves a unique purpose and is available for use at the discretion of the application developer.

Layout Containers

Layout containers dictate the layout of child elements (containers or controls) through the use of absolute or relative positioning. Absolute positioning requires definition of X and Y coordinates and permits overlap of elements. Relative positioning lays child elements next to each other either horizontally or vertically. Layout containers include:

- Application: default container provided at the root of your Flex application. There is no need to explicitly define the Application container as it comes part of any Flex application courtesy of the <mx:Application> tag. Organizes child containers vertically, horizontally or absolutely depending on the value of the layout attribute (horizontal, vertical or absolute)

- HBox: organizes child containers or controls horizontally

- VBox: organizes child containers or controls vertically

- HDividedBox: similar to an HBox with the distinction of a draggable divider in between each child container

- VDividedBox: similar to an VBox with the distinction of a draggable divider in between each child container

- Canvas: lays out child containers or controls based on absolute positioning (X and Y coordinates)

- Tile: lays out child containers or controls in columns or rows depending on the value of the direction attribute (horizontal or vertical)

- Panel: Similar to an HBox, VBox or Canvas container depending on the value of the layout attribute (horizontal, vertical or absolute) with the added benefit of a title bar

- Grid: similar to an HTML table it allows organization of child containers as rows and columns of cells

Control Containers

Control containers are used to manage the layout of controls (buttons, combo boxes, etc) only. Control containers include:

- ControlBar: only for use within a Panel or TitleWindow container, the ControlBar manages the layout of controls only (not child containers)

- ApplicationControlBar: one or more ApplicationControlBars may exist in a Flex application, however each must be a direct child of the Application container. Child components are limited to controls.

Navigation Containers

Navigation containers manage the navigation between containers by controlling the visibility of child containers. This visibility control can either be implemented by a nav bar (LinkBar, TabBar, ToggleButtonBar, etc) or by custom event handlers. Navigation containers include:

- Accordion: contains a collection of child containers and manages the visibility of each through the use of accordion headers (similar to nav buttons)

- View Stack: contains a collection of child containers stacked on top of each other. A View Stack is not tied to a particular component responsible for managing visibility but many options exist (i.e LinkBar, TabBar, ToggleButtonBar) for the developer's use

- Tab Navigator: identical to a View Stack except for a built-in navigation feature, TabBar

Containers may serve as a parent container, a child container or both a parent and child container in relation to another container.

The following example demonstrates the simultaneous use of a Canvas container as both a a parent container and a child container.

<mx:VBox width="100%" height="54">
   <mx:Image source="assets/logo.png" />
   <mx:Canvas height="30">
      <mx:Label x="9" y="7" text="Manage Athletes" />
      <mx:Label y="6" text="[ Log Out ]" right="5" />
In most cases, a layout container is not limited to a certain context. Exceptions include the Application container, the ApplicationControlBar container and the ControlBar container.

- Application container: as the root of the Flex application, only one instance of the Application container may exist and can ONLY be a parent container.

- ApplicationControlBar container: as the name suggests, the ApplicationControlBar container defines an area intended to house a control bar for your Flex application. As such, this container can only be defined as a direct child to the Application container.

- ControlBar container: intended to dock a toolbar to a Panel or TitleWindow container, a ControlBar container must be defined as a direct child to a Panel or TitleWindow container

All other containers are available for use in any context. For example, a Canvas container may be defined as a child to a parent VBox, HBox, Tile or even another Canvas container.

Given the hierarchical (parent/child) nature of application layout (containers), best practices suggest the use of MXML (an XML derivative) instead of ActionScript.

Toggling between Design mode and Source mode of Flex Builder, the hierarchical nature of your Flex application will be clear. In Design mode, your Flex application is arranged as nested containers and controls. This arrangement represents a hierarchy (or parent / child structure) and can be verified using the Outline View (Window >> Show View >> Outline). In Source mode, your Flex application is represented in MXML which by nature is hierarchical.

When your Flex application is ultimately translated into ActionScript, another type of hierarchy will emerge - an Object hierarchy. Afterall, a Flex application is nothing more than one Application object composed of other objects composed of other objects...and so on...and MXML is a mapping of your Flex application's object hierarchy to XML.


Amolmini said...

very nice blog. All the component illustrated pretty well..

Air Jordan 4 said...

What a great post! Just one suggestion:If you add some pics, it would be easiler to follow!
By Air Jordan 4