Exploring Layouts and Providers

1. Day 3
Exploring Layouts and
Providers
Senthil Kumar
Srinivasan

2. 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 …

3. Containers
Containers can hold other containers( Nested Containers ) or
controls
 2 categories of containers
 layout containers : control sizing / Positioning of their
children
 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

4. Flex layout and Containers

5.  Vertical - lays out each child component vertically from
the top of the application to the bottom in the specified
order.
 Horizontal - lays out each child component horizontally
from the left of the application to the right in the specified
order.
 Absolute - Absolute positioning does no automatic
layout and requires you to explicitly define the location of
each child component.

6. Horizontal layout
Padding Top
Padding Right
Gap
Gap
Padding Left
Padding Bottom
Vertical Align
Top
Middle
Bottom
Horizontal Align
Left
Center
Right

7. Vertical Layout
Horizontal Align
Padding Top
Padding
Left
Padding
Right
Gap
Left
Center
Right
Vertical Align
Gap
Padding Bottom
Top
Middle
Bottom

8. 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.

9. Absolute Layout – canvas

12. 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
 DataGrid
 Item renderers
 Lists
 TileList

13. Flex list-based controls function similarly to the select form
element in HTML.
Data Providers provide a useful interface for populating lists
with data
Don't use Repeaters to generate components for large
amounts of data.
Customize the display of List data by using Item Renderers.

14. Features include:
Resizeable columns
Customizable columns and row headers
Editable
Multiple modes of selection
Use of custom item renderer
Paging of data
Drag and drop capability

16. Item Renderers
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
<mx:Component> tag
 Component - Custom components written in MXML or
ActionScript used as Item renderer

19. Lists
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

21. TileList
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
columnWidth properties
3.The default item renderer displays text and an icon
4.Custom item renderers can be used for more complex item
displays
5.The user can interact with the items being displayed

23. Multi-page applications
Subtopics:




Accordion
TabBar and LinkBar
TabNavigator
ViewStack
 1.To show different "pages" or "screens", use a ViewStack-style
control.
 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.

24. Accordion
 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
panel index

26. TabBar
 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

28. View Stack :
A ViewStack is a navigator container that contains other
child containers stacked on top of each other like a deck of
cards.
 Only one child container can be visible or active at a time
 There is no built-in mechanism to switch between child
containers
 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

30. 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.