Exploring Layouts and
Work Smart Not hard …..
UI Development is not
about making the screens
look better also we need
to know about the
container and layout
other wise …
Containers can hold other containers( Nested Containers ) or
2 categories of containers
layout containers : control sizing / Positioning of their
Navigator containers : control user movement / navigation
among multiple child containers
Flex offers wide variety of container
canvas , Panel, Title, Title window , H box and Vbox
Vertical - lays out each child component vertically from
the top of the application to the bottom in the specified
Horizontal - lays out each child component horizontally
from the left of the application to the right in the specified
Absolute - Absolute positioning does no automatic
layout and requires you to explicitly define the location of
each child component.
Canvas container - absolute positioning
Canvas is the only container that lets you explicitly specify
the location of its children within the container.
Canvas has only one layout value – absolute.
Use the x and y properties of child components for pixelperfect layouts
If the display window is resized, the child components stay
fixed in place and may appear cut off.
Displaying the data using lists of items
Flex provides a number of sophisticated list controls that
simplify the display of list data (e.g. displays typically
found on store sites, photo browser sites, etc
Flex list-based controls function similarly to the select form
element in HTML.
Data Providers provide a useful interface for populating lists
Don't use Repeaters to generate components for large
amounts of data.
Customize the display of List data by using Item Renderers.
Customizable columns and row headers
Multiple modes of selection
Use of custom item renderer
Paging of data
Drag and drop capability
Each list-based control has a default item renderer. There are three
types of custom item renderers
Inline - For complete control over item rendering. Use
Component - Custom components written in MXML or
ActionScript used as Item renderer
The List control displays a vertical list of items. Features include:
Items displayed are contained within the dataProvider property
Custom item renderers can be specified
Custom item editors can also be used
Single or multiple items can be selected
The HorizontalList, TileList, DataGrid, Menu, and Tree controls all
inherit from the List control
The TileList control displays a number of items laid out in tiles.
1.The items are tiled in vertical columns or horizontal rows.
2.Specify the size of the tiles by using the rowHeight or
3.The default item renderer displays text and an icon
4.Custom item renderers can be used for more complex item
5.The user can interact with the items being displayed
TabBar and LinkBar
1.To show different "pages" or "screens", use a ViewStack-style
2.A ViewStack is similar to the common UI element Tab Panel
3.Each ViewStack page is loaded at start, so if you're loading a
lot of data, you'll need to implement Lazy loading.
An Accordion is a navigator container that displays its
children containers as a series of panels
Only one panel or pleat displays at a time
Users navigate by clicking a pleat
The selectedIndex property contains the current active
A TabBar defines a vertical or horizontal row of tabs
that control a ViewStack container
A LinkBar defines a vertical or horizontal row of links
that control a ViewStack container
Bind the ViewStack id to the dataProvider property of
the LinkBar or TabBar control
View Stack :
A ViewStack is a navigator container that contains other
child containers stacked on top of each other like a deck of
Only one child container can be visible or active at a time
There is no built-in mechanism to switch between child
You can create your own logic to manage active views or
use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control
The ViewStack's child containers are indexed from 0 to n-1
Creating view states
In general, a state is understood as a situation or a
condition of an object.
@ Which Place we need to Use : Consider for example an application which lets you
choose from many phones to select one for yourself. Such
an application can have two states for the phone display.
One state displays minimal details about the phone. If the
user is interested in the phone he can click on the display to
go another display state containing more details.