Exploring Layouts and Providers


Published on

Exploring Layouts and Providers

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Exploring Layouts and Providers

  1. 1. Day 3 Exploring Layouts and Providers Senthil Kumar Srinivasan
  2. 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. 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. 4. Flex layout and Containers
  5. 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. 6. Horizontal layout Padding Top Padding Right Gap Gap Padding Left Padding Bottom Vertical Align Top Middle Bottom Horizontal Align Left Center Right
  7. 7. Vertical Layout Horizontal Align Padding Top Padding Left Padding Right Gap Left Center Right Vertical Align Gap Padding Bottom Top Middle Bottom
  8. 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. 9. Absolute Layout – canvas
  10. 10. 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
  11. 11. 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.
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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.
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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.