Managing Layout and UI Components

1
Managing Layout and UI Components

• Web 2.0 and Rich Internet Applications
• Prof. Suthikshn Kumar

2
Managing Layout and UI Components

• Flex layout overview
• Container types
• Layout rules
• Nesting Containers
• Scrolling, clipping and Spacer
• Fluid Interfaces
• UI Components
• Handling events
• Buttons, Value Selectors, Text Components, List
  based controls
• Data models
• Pop-up controls,
• Navigators Accordion controls
• Control Bars

3
Flex Layout Overview

• Container components are the basis of how flex
  provides layout logic
• AT the basic level, Application class is a
  container
• Subitems within Application class are called
  Children

4
Example MXML

• lt?xml version1.0 encodingutf-8?gt
• ltmxApplication xmlnsmxhttp//www.adobe.com/2006
  /mxmlgt
• ltmxTextInput/gt
• ltmxButton labelSubmit/gt
• lt/mxApplicationgt

5
Working with children

• In addition to adding children, you also have the
  ability to remove, reorder and retrieve the
  children of a container.
• Setting up the initial state of the container via
  MXML is simple
• Managing changes afterwords requires ActionScript
  display list APIs addChild(), addChildAt(),
  getChildAt(), getChildIndex(), getChildren(),
  getChildByName(), removeAllChildren(),
  contains(), setChildIndex()

6
Reordering children using the display list API

• lt?xml version1.0 encodingutf-8?gt
• ltmxApplication xmlnsmxhttp//www.adobe.com/2006
  /mxmlgt
• ltmxScriptgt
• lt!CDATA
• private function moveToTheBeginning()void
• var lastChildIndexint tileOfLabels.numChildren
  -1
• var childDisplayObject tileOfLabels.getChildAt
  (lastChildIndex)
• tileOfLabels.setChildIndex(child, 0)
• gt
• ltmxScriptgt
• ltmxTile id tileOfLabelsgt
• ltmxLabel text1/gt
• ltmxLabel text2/gt
• ltmxLabel text3/gt
• lt/mxTilegt
• ltmxButton Labelmove to the beginning
  clickmoveToTheBeginning()/gt
• lt/mxApplicationgt

7
Container Types

• Every container provided by the flex framework
  has a set of rules by which it lays out its
  children
• Flex uses these rules to measure the available
  space for children and to decide where children
  are positioned.
• Application
• Box
• Canvas
• ControlBar
• DividedBox
• Form
• Grid
• HBox
• HDividedBox
• Panel
• Tile
• TitleWindow
• VBox
• VDividedBox

8
Layout Rules

• Two main rules box and canvas
• Layout rules are executed when children
  containers are initially instantiated, any time
  children are added or removed and whenever a
  container is resized.
• Two steps in layout rule execution
• Container measures the space needed for the child
• Container decides how much space to allocate for
  each child to best fit all of its children

9
Box based containers

• HBox, VBox, HDividedBox, VDividedBox,
  ApplicationCOntrolBar, ControlBaer
• Box layout rule dictates that each child occupies
  its own row or column depending on the direction
  under which rule is operating.
• The two directions supported are vertical and
  horizontal. Direction property.
• Default is vertical
• If the width of the container is not specified,
  the container determines it by identifying the
  child with the largest width and adjusting its
  own width so that it can display the child with
  little or no clipping.

10
Size of the container

• If the container has a target width and height,
  those values are used to set the size
• If the size that is set is smaller than the area
  needed for the children to be displayed, a
  scrollbar is automatically displayed unless
  scrollPolicy is set to scrollPolicy.OFF
• If no size is explicitly set, the container
  attempts to expand as needed within the available
  space. If enough space is not available, a
  scrollbar is used to allow the user to access
  the content.

11
Canvas-based Layout

• Canvas-based layout allows you to position
  children using explicit x and y co-ordinates.
• This allows you to accurately control the
  position of each child.
• Canvas container is most suitable for reproducing
  a pixel-perfect layout.
• Children can overlap.

12
Constraint based layout

• Constraint based layout lets you lay out children
  at predefined positions relative to their parent.
• This tends to be more practical method of
  accurately positioning children than simply
  supplying a specific location, because it allows
  the container to resize according to the maximum
  available real estate.
• You set properties such as
• Top, bottom, left, right, horizontalCenter,
  verticalCenter

13
Additional Layout rule

• Tile-Layout rule
• Grid Layout rule
• Form Layout rule
• Padding, Borders, Gaps
• Nesting Containers
• Handling Scrolling and Clipping
• Spacer component

14
Making Fluid Interfaces

• Interfaces that expand or contract when available
  real estate changes
• For applications deployed to the web, this
  usually occurs when the browser window is
  resized.
• Without Flex, you would need to handle the resize
  event of the Flash player manually and adjust all
  the containers and their children sizes to handle
  the change in available space.
• In Flex, all layout containers and controls
  support the ability to set some values as
  percentages, the most basic of which are width
  and height properties that set the available real
  estate for the container.

15
Making Fluid Interfaces example

• lt?xml version1.0 encodingutf-8?gt
• ltmxApplication xmlnsmxhttp//www.adobe.com/2006
  /mxmlgt
• ltmxPanel width70 height40gt
• ltmxPanel/gt
• lt/mxApplicationgt

16
Working with UI Components
17
Creating Component instances

• MXML ltmxButton /gt
• ActionScript
• Var buttonButton new Button()
• addChild(button)

18
Common UI Component Properties

• X, y coordinates
• Width
• Height
• scaleX
• scaleY
• Rotation
• Alpha
• Visible
• Enabled
• Parent
• Example MXML
• ltmxButton idbutton labelExample Button
  width200 height50 enabledfalse /gt

19
Handling EVents

• Events are the way in which objects can
  communicate with the rest of the application
• Two event types are user events and system
  events.
• When an event occurs, event is dispatched.
• The object that dispatches an event is called
  target.
• When a component dispatches an event, nothing
  occurs in response unless something called
  listener is configured to receive notifications.
• Two ways to handle events
• MXML attributes
• ActionScript

20
Handling Events with MXML

• When a component is created using MXML, an event
  handler can added using attruvute that has the
  same name as the event you want to handle.
• Example buttons dispatch click events when the
  user clicks on them. Hence click attribute to the
  Button tag to handle the click event.
• For example the following code lowers
  alpha(opaqueness) by .1 of the button each time
  the user clicks on it
• ltmxButton idbutton labelAlpha Button
  clickbutton.alpha - .1 /gt
• A function call can be assigned to event handler
  attribute. This allows you to define more complex
  functionality in response to the event.

21
Function call

• ltmxButton idbutton labelAlpha Button
  clickclickHandler(event) /gt
• Private function clickHandler(eventEvent)void
• var targetButton Button(event.target)
• target.alpha - .1
• if(target.alpha lt0)
• target.alpha 1

22
Common UI component events

• Add
• Remove
• Show
• Hide
• Resize
• Preinitialize
• Initialize
• creationComplete

23
Lab Excercises

• Use Flex SDK to study
• Buttons
• Value selectors
• Text Components
• List Based controls
• Data Grids
• Tree Controls
• Pop-Up Controls
• Navigators
• Option Bars
• View Stacks
• Control Bars