1. Flex 3: Developing Rich Internet
Applications

2. Adobe Flex Workshop
Topics
• Understanding course format
• Reviewing course outline

3. Understanding course format
This course is divided many units, most of which presents new information and
contain demonstration, walkthrough and a lab. At the end of each unit you will
find a summary and a short review to test your knowledge of the units
content. The following icons are used throughout the guide
Concepts introduce new information
Labs let you practice new skills on your own
Walkthroughs guide you, through procedures

4. Reviewing course outline
This course is separated into following modules:
• Understanding RIA
• Introduction to Flex 3
• Understanding Flex builder
• Learning Flex fundamentals
– Lay it out with containers
– Binding Data
– User interface
• Using View States for application design
• Application Navigation
• Customizing your application (CSS)
• Creating Data entry forms
• Working with data (DataGrid)
• Retrieving XML data with HTTPService

5. Rich Internet Application
In this unit, you will understand what a Rich Internet application (RIA)
is. You will understand the Anatomy of RIA.

6. Rich Internet Application
Objectives
After completing this unit, you shall be able to:
• Rich Internet Application
• RIA technologies

7. Rich Internet Application
Topics
In this unit, you will learn the following:
• Understanding RIA
• Understanding the foundation of RIA

8. Understanding RIA
• In 2002, Macromedia coined the term rich Internet application (RIA)
• Rich Internet Applications (RIA) combine the flexibility, responsiveness,
and ease of use of desktop applications with the broad reach of the web.
• RIA provide a dynamic web experience that is rich and engaging, as well as
interactive

10. Concept of Richness
Richness in Data model
• Support of sophisticated data models: eg, XMLList, ArrayList
• Ability to send and receive data in/out of these data structures
asynchronously
• Ability for a user interface control to manipulate the data through powerful
Data binding
• Data can be obtained from server without redrawing the entire page
• Efficiently utilize network bandwidth transmitting only portion of data that
changed.

11. Concept of Richness
Richness in User Interface
• RIA offers a very rich set of user interface controls which can intelligently
interact with data model
– For example: controls like charts, graphs, calendar control, DataGrid, rich text
editors etc
• The User interface can incorporate rich multimedia content.

14. Summary

15. Adobe Flex 3
In this unit, you will understand what Adobe Flex is and how Adobe Flex and
Adobe flash player help in constructing Rich Internet Application. You
Will also understand the process of how MXML code you write is transformed
into a SWF file delivered to the client.

16. Adobe Flex 3
Objectives
After completing this unit, you shall be able to:
• Explain the different technologies in Adobe Flex product line
• Understand the application flow of a Flex application
• Know where and how to get help

17. Adobe Flex 3
Topics
In this unit, you will learn the following:
• Understanding Adobe Flex
• Adobe Flex product line
• Flex Architecture
• Flex resources

18. Understanding Adobe Flex
• Adobe Flex is a RIA tool that enables us to develop RIA in a quick delivery
model resulting in high productivity and customer satisfaction.
• A highly productive, free open source framework for building expressive
web applications that deploy consistently on:
– All major browser leveraging the Flash Player
– And on desktop with Adobe AIR

19. Where is Flex used

20. How Flex works

21. How flex works in the browser

22. Flex is…

23. Adobe Flex SDK
• Adobe Flex SDK included Flex framework and Flex compiler, enabling you
to Freely develop and deploy Flex application using any IDE of your choice.
• Flex SDK includes all components needed to create flex applications that
run in any browser

24. Flex Architecture

25. Flex enables…

26. Flex makes you

27. Flex Resources
Flex tutorials
http://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-
programming-tutorials.htm
Documentations
http://flex.org/
http://www.adobe.com/support/documentation/en/flex/
Flex component explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html

28. Summary

29. Flex Builder
In this unit, you will understand the Flex builder and its workbenches. You will
learn how Flex builder is used for code hinting, debugging

30. Flex Builder
Objectives
After completing this unit, you shall be able to:
• Understand the Flex builder and its workbenches
• Use Flex builder effectively for design, development and debugging
• Create a Flex Project
• Create, compile and run a Flex application

31. Flex Builder
Topics
In this unit, you will learn the following:
• Understanding Adobe flex builder
• Flex builder workbenches
• Creating a project and your first application

32. Understanding Adobe Flex Builder
• Adobe Flex Builder is eclipse based development tool enabling
– Intelligent coding that included editors like MXML, ActionScript, CSS,
XML.
– Interactive step-through debugging and code hinting
– Rich Visual layout
– Visual UI and behaviors
– Interactive data visualization
– Skinning and styling

33. Flex builder workbenches
• The term workbench refers to the flex builder development environment.
• The Flex builder workbench contains three primary elements
– Perspectives
– Editors
– Views

34. Flex builder workbenches
Understanding Perspectives
• Perspectives includes combination of views and editors that are suited to
perform certain set of task
• Flex builder has two default perspectives
– Development
– Debugging
• May have other perspectives if using plug-in configuration, like java.

35. Flex builder workbenches
Understanding Editors
• An editor is the visual component in the workbench that is typically used to
edit or browse the resource
• An Editor is where files of various types are edited in either
– Design mode
– Source mode

36. Flex builder workbenches
Understanding Views
• A view supplies support tool when modifying a file in editor
• Navigator view allows you to manage files, folders and projects
• Problems view show errors in your code
• Outline view hierarchically present and allows you to navigate to, all of the
code elements and user interface in a file

37. Source and design mode selectors perspectives
views editor

39. Creating a project and your first
application
To begin development, you need to learn the following
• Create a Flex project
• Create a main application page
• Compile the application
• Run the application

40. Creating a project
• A project is a grouping of resources that make up a flex application
• When a project is created a number of files and folders are automatically
created
– bin-debug folder: where your compiled applications resides
– html-template folder: where the html wrapper page resides
– .settings folder: where some configuration file resides
– .actionScriptProperties, .flexProperties and .project files: project
configuration files
– src folder:
– libs folder: where custom class files reside
– A main application file, if you do not select an existing file for that role
Supply the following information to create a project

41. Select File > new > Flex project
Choose a project name and location

42. Specify output folder. The default is bin-debug folder

43. Choose project build paths

45. Using the main application file
• The main application file contains the <mx:Application> container set tag
– Each application can have only one associated application file
• The layout property is given the value absolute the first time you create an
application
– Flex builder will retain your last layout selection for future applications
• If you do not specify the layout property, the layout will be vertical

46. Running the application file
• Run the application by clicking the Run button. Run button is the green button on the
top panel
What exactly happens when you push the run button?

47. Main.mxml MXML
ActionScript
Client with
Flash player
Main.swf SWF

48. Walkthrough 1: creating a main
application and running it

49. Summary

50. Learning Flex fundamental
In this section, you will develop your first flex application and understand the
basic infrastructure that a flex application must have

51. Learning Flex fundamental
Objectives
After completing this unit, you shall be able to:
• Create a flex application (MXML file)
• Layout an application with container
• Add a simple user interface control
• Create data binding between controls

52. Learning Flex fundamental
Topics
In this unit, you will learn the following:
• Creating a simple Flex application
• Displaying images
• Laying out Flex application with containers
• Using Panel container
• Using controlBar container
• adding user interface controls
• Create data binding between components

53. Creating a simple Flex application
• Application is the default container tag.
• Skeleton of an MXML application file contains
– XML document type definition
– Opening and closing <mx:Application> component tag set

54. Creating a simple Flex application
Specifying namespace
• use xmlns:mx attribute for the namespace, which defines the collection of
legal MXML tags
• http://www.adobe.com/2006/mxml is the uniform resource identifier which
associates a prefix (in this case mx) with a manifest file as follows
<namespace>
<url>http://www.adobe.com/2006/mxml</url>
<manifest>mxml-manifest.xml</manifest>
</namespace>
• Flex-config.mxml is located in installdirectoryAdobeFlex Builder
3sdks3.0.0frameworksflex-config.xml

55. Creating a simple Flex application
Setting the layout property
• The layout property defaults to your last selection when building an
application or component from the appropriate dialog box
– absolute: Visual elements must have specific x, y values or constraints
for positioning
– horizontal: Visual elements presented horizontally
– vertical: Visual elements presented vertically
• If the layout property is not used in the Application tag, the default layout is
vertical

56. Creating a simple Flex application
Adding UI Controls
• Used to display user interface type components in an application
– Text, text input, buttons, images, combo boxes etc
– Add between the application tag set or another container component
• Example of the Label control to display a single line of text
<mx:Label text=:Hello Flexers!” />

57. Creating a simple Flex application
Specifying components properties
Component properties can be specified in two ways
• As an attribute of the XML tag
<mx:Label text=“Hello” />
• As nested tags or nodes
<mx:Label>
<mx:text> Hello</mx:text>
</mx:Label>

58. Creating a simple Flex application
Commenting you MXML code
Use XML style comments which is similar to HTML comments
<! - - this is my comment - - >

59. Walkthrough 2: creating your first
Flex application

60. Displaying images
• Use the Image control to incorporate
• JPEG (non progressive)
• GIF (can be transparent)
• PNG (can be transparent)
• SWF
• SVG (can only be embedded at compile time)

61. Displaying images
Methods for displaying images
• Two ways to display images
– Load them dynamically at runtime
– Embed them in SWF file
• Specify image source in three ways
– Via source property of an Image control ; will load image dynamically at
runtime
– Use Image load() method to add the images dynamically at runtime
– Embed them in the SWF at compile time using the @Embed directive;
useful when you need instantaneous loading and offline application

62. Displaying images
Loading dynamically at runtime
• Specify the image using the source attribute of the <mx:Image> control
• Image is loaded at runtime
<mx:Image source=“myimage.jpg” />
• Assign an id to the image to reference in ActionScript
<mx:Image source=“myimage.jpg” id=“imageID” />

63. Displaying images
• Using the load() method
• Dynamically switch out the image using the load() method of the Image
class
<mx:Image source=“addis.jpg” id=“imageID” width=“250” height=“250” />
<mx:Button label=“Change pic” click=“imageID.load(‘flower.jpg’)” />

64. Displaying images
Embedding images at compile time
• You can embed images at compile time for instantaneous loading
• To embed, use the @Embed directive when specifying the image source
<mx:Image source=@Embed(‘../images/myImage.jpg’)” />

65. Displaying images
Pros of embedding image
• Image is available immediately, it is part of the SWF
• Very useful for creating application that are able to work offline
Cons of embedding images
• Adds to applications SWF size
• Slows down application initialization process
• Must recompile application every time image changes
• Cannot use in data binding calls

66. Walkthrough 3: Adding an image to
an application

67. Laying out Flex application with
containers
• A Container defines the rectangular region of the drawing surface of adobe
flash player
• Within a container, you define the components, both controls and
containers, that you want to appear within the container
• Components defined within a container are called children of the container
• At the root of a Flex application is a single container, called the Application
container, that represents the entire Flash Player drawing surface.
• This Application container holds all other containers and components.
• A container has predefined rules to control the layout of its children,
including sizing and positioning

68. Laying out Flex application with
containers
How containers work
• Containers use a set of layout rules to position components
– Keeps you from having to worry about positions
– Allows resizing/re-positioning with browser window size

69. Application layout=“vertical”
Image: Cafe Townsend banner
HBox
VBox
Tile: Appetizers Panel: Contact
VBox VBox VBox
Panel: About
Tile: Entrees
VBox VBox
VBox VBox
Tile: Desserts Panel: Events
VBox VBox VBox
Container layout of the application

70. Laying out Flex application with
containers
Box Containers
There are two types of Box containers available to layout your pages
• Vertical box (VBox)
• Horizontal box (HBox)

71. Laying out Flex application with
containers
VBox
The VBox layout allows you to display controls vertically, as in the image below
<mx:VBox>
<mx:Label text="label in a VBox" />
<mx:Button label="Click me" />
<mx:Label text="another label" />
</mx:VBox>

72. Laying out Flex application with
containers
HBox
The HBox layout enables you to lay out your controls horizontally, as in the
following image
<mx:HBox>
<mx:Label text="label in a HBox" />
<mx:Button label="Click me" />
<mx:Label text="another label" />
</mx:HBox>

73. Laying out Flex application with
containers
Canvas container
• The Canvas container is a basic component that enables you to specify absolute
positions
• You can use absolute positioning by specifying x and y properties of the components
inside the container
<mx:Canvas>
<mx:Label x=“20” y=“10” />
<mx:Label x=“100” y=“10” />
</mx:Canvas>
• Canvas containers can offer better performance, because client processing power
does not have to be used in order to determine object placement

74. Laying out Flex application with
containers
Specifying positions in a Canvas container
• As stated, you must specify the x and y properties of all the child
components inside the container; the origin is the top-left corner of the
canvas.
• This a/y positioning is only valid for components on the canvas, not for
components inside child containers
0,0 point
Value, 0
0, Value

75. Walkthrough 4: Using basic layouts

76. Using Panel container
• The Panel container
• Wraps self-container application modules
• includes a panel title, a title bar, a status message and a content area for its
children
• It is represented in MXML with the Panel tag
Application layout=“horizontal”
Panel Panel Panel

77. Using Panel container
status
title

78. Using Panel container
Using the Panel tag
<mx:Panel title=“Panel title” status=“Panel status”>
…………
</mx:Panel>
Characteristics:
• Defaults its width and height properties to value that accommodate all
children, but will not be larger than allowed by its parent container
• Truncates content that is too large and implements scroll bar as appropriate
• Has layout property, like the Application container which can take values
absolute, vertical (default) and horizontal
• Has default padding values of 0 pixels

79. Using Panel container
Sizing container content
• The size of any content placed within a container is relative to that
container, not the main Application area.
• If the child is sized larger than the parent container, then it will be resized
down to fit into the parent container

80. Panel width set to 600
Text width set to 100%
relative to Panel
Panel width set to 500
Text width set to 600 and
will automatically be resized
to fit the panel

81. Walkthrough 5: separating
application modules into Panels

82. Using ControlBar container
The ControlBar container
• Holds components that can be shared by the other children in the Panel and
TitleWindow container
• Must be the last child of the Panel or TitleWindow container
• Is a subclass of the Box class and therefore inherits the layout
characteristics of the Box container
• Has a direction property to determine either vertical or horizontal layout of
the child components
• Defaults it width and height properties to values that accommodate all
children, but will not be larger than allowed by its parent container

83. Using ControlBar container
• Has default padding value of 10 pixels
• Had horizontalAlign and VerticalAlign properties to control the positioning of
the child components
• Had verticalGap and horizontalGap properties to set the spacing between
children
<mx:ControlBar width=“100”>
<mx:Label text=“Quantity” />
<mx:NumericStepper id=“myNS” />
<mx:Spacer width=“100%”/>
<mx:Button label=“Add to Cart” click=“addToCart();” />
</mx:ControlBar>

84. Using ControlBar container
ControlBar

85. Walkthrough 6: using ControlBar
container

86. Adding user interface controls
• Controls are user interface components such as Button, TextArea,
ComboBox, TextInput
• Controls are placed inside the containers
• typically you define container and then insert controls or other containers
inside it.

87. The following image shows several controls used in a Form container:
A. Form container B. TextInput controls C. ComboBox control D. Button control

88. Adding user interface controls
• Text controls
• Menu based controls
• Data Driven controls

89. Alert Displays a pop-up alert
Button Displays a variable-size button that can include a label, an
icon image, or both.
ButtonBar Displays a row of related buttons with a common
appearance.
CheckBox Shows whether a particular Boolean value is true
(checked) or false (unchecked).
ComboBox Displays a drop-down list attached to a text field that
contains a set of values.
ColorPicker Displays a selectable drop-down color swatch panel
(palette).
DataGrid Displays data in a tabular format.
DateChooser Displays a full month of days to let you select a date.
DateField Displays the date with a calendar icon on its right side.
HorizontalList Displays a horizontal list of items.
HRule/VRule Displays a single horizontal rule (HRule) or vertical rule
(VRule).

90. HSlider/VSlider Lets users select a value by moving a slider thumb
between the end points of the slider track.
Image Imports GIF, JPEG, PNG, SVG, and SWF files.
Label Displays a noneditable single-line field label.
LinkBar Displays a horizontal row of LinkButton controls that
designate a series of link destinations.
LinkButton Displays a simple hypertext link.
List Displays a scrollable array of choices.
Menu Displays a pop-up menu of individually selectable choices,
much like the File or Edit menu of most software
applications.
MenuBar Displays a horizontal menu bar that contains one or more
submenus of Menu controls
NumericStepper Displays a dual button control that you can use to increase
or decrease the value of the underlying variable.
ProgressBar Provides visual feedback of how much time remains in the
current operation.
RadioButton Displays a set of buttons of which exactly one is selected
at any time.

91. RadioButton Displays a group of RadioButton controls with a single click
Group event listener.
RichTextEditor Includes a multiline editable text field and controls for
specifying text formatting.
ScrollBar Displays horizontal and vertical scroll bars.
(HScrollBar and
VScrollBar)
SWFLoader Displays the contents of a specified SWF file or JPEG file
TabBar Displays a horizontal row of tabs.
Text Displays a noneditable multiline text field.
TextArea Displays an editable text field for user input that can accept
more than a single line of input.
TextInput Displays an editable text field for a single line of user input.
Can contain alphanumeric data, but input is interpreted as
a String data type.
TileList Displays a tiled list of items. The items are tiled in vertical
columns or horizontal rows.
ToggleButtonBar Displays a row of related buttons with a common
appearance.
Tree Displays hierarchical data arranged as an expandable tree.

92. Creating data binding between
components
• Data binding is the process of tying or binding data of one object to another
• Data biding requires a source property, a destination property and a
triggering event that indicates when to copy data from source to destination
• There are two ways to perform a binding
– Curly braces syntax { }
– <mx:Binding> tag

93. Creating data binding between
components
Creating Data binding
• Using curly braces syntax
– Assigns a property a dynamic literal value
– Uses a broadcast/listener method
<mx:Label id=“labelOne” text=“Hello” />
<mx:Label id=“labelTwo” text=“{labelOne.text}” />

94. Creating data binding between
components
• Using <mx:Binding> tag
<mx:Label id=“labelOne” text=“Hello” />
<mx:Label id=“labelTwo” />
<mx:Binding source=“labelOne.text” destination=“labelTwo.text” />

95. Walkthrough 7: creating data
binding

96. Summary

97. View States
In this section, you will learn to customize the look and feel of flex applications
with styles, behaviors and transitions. You will also learn to use different types
of themes.

98. View States
Objectives
After completing this unit, you shall be able to:
• Create view states using flex builders design mode
• Create view state using MXML
• Trigger state changes based on use events

99. View States
Topics
In this unit, you will learn the following:
• Understanding view states
• Controlling view states
• Reviewing the generated MXML code

100. Understanding view states
• A view state defines a particular view of a component
• View state define distinct presentation layouts within the same application
• Each distinct layout is called a state
• User or system events are used to change states

101. Understanding view states
Creating view states
• Create a base state, which is default layout of the application
• Modify the base state or another state to create additional states
– Can modify, add or delete components in each state
– Can modify component property
– Can change styles
• Create events to trigger switching states

102. Understanding view states
Benefits of using view states
• Flex manages the switching of states
• Components can be shared across multiple view states
• Components can be added, removed or modified easily

103. Understanding view states
Creating a new state
• To manage and create state we need 2 states
– Base state
– New state
• Base state is the current view of state of any application
• On any event triggered, the state changes from base state to new state.

104. This is my base state
Change state on click of this linkButton

105. In Design mode, click the New State button in the States view (Window > States).

106. The New State dialog box appears

107. Walkthrough 8: Creating states

108. Understanding view states
• State implementation details
• To change state, set the currentState property value to the name of the
state to switch to
• Flex figures out everything that needs to change between any to states
• Setting currentState
– Setting currentState property of the Application tag sets the initial state
to one another.
– A components currentState property specifies its view state
– To specify the base state, set currentState equal to an empty string

109. Understanding view states
<mx:Button id=“b1” label=“Add a button” click=“currentState=‘forms’” />
<mx:Button id=“b2” label=“Remove button” click=“currentState=‘ ’” />

110. On click event the changeState will
trigger the new forms state view

111. On click event the changeState will
trigger the base state view

112. Understanding view states
The following table shows the classes that you use to create states
AddChild and Adds or removes a child component as part of a change
RemoveChild of view state.
SetEventHandler Adds an event handler as part of a change of view state.
SetProperty Sets a component property as part of a change of view
state.
SetStyle Sets a style property on a component as part of a
change of view state

113. Walkthrough 9: Switching states

114. Reviewing the generated MXML
code
The MXML tag used to manage the view states are
• The states tag – wraps all of the state in single block of code
• The State tag – wraps the details of one individual state
• The AddChild tag – nested within the State tag to instruct that a component
has to be added to the Base state when creating the current state
• The RemoveChild tag – nested within the state tag to instruct that a
component has to be removed from the Base state.
• The SetProperty tag – nested within the State tag. Use it to change a
property of a component in the current state that originally was created in
another state
• The SetEventHandler tag – nested within the State tag to set event
handlers which are only active during a particular view state

115. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:states>
<mx:State name="forms">
<mx:AddChild relativeTo="{form1}" position="lastChild">
<mx:FormItem label="Confirm Password">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{panel1}" name="title" value="Register"/>
<mx:SetProperty target="{linkbutton1}" name="label" value="Back to login"/>
<mx:RemoveChild target="{button1}"/>
<mx:SetEventHandler target="{linkbutton1}" name="click" handler="currentState=''"/>
<mx:SetProperty target="{spacer1}" name="width" value="287"/>
<mx:SetProperty target="{spacer1}" name="height" value="14"/>
</mx:State>
</mx:states>
<mx:Panel width="500" layout="vertical" title="Login" id="panel1">
<mx:Form width="100%" height="100%" id="form1">
<mx:FormItem label="UserName">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton label="Need to register?" id="linkbutton1" click="currentState='forms'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="Login" id="button1"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

116. Walkthrough 10: implementing view
states using MXML

117. Summary

118. Application navigation
In this section, you will learn how to implement and manipulate navigation
containers individually and relative to one another. You will also learn how
navigator and layout containers interact

119. Application navigation
Objectives
After completing this unit, you shall be able to:
• Understand what navigator container are and how to create them
• Navigate the ViewStack container with LinkBar, TabBar controls

120. Application navigation
Topics
In this unit, you will learn the following:
• Understanding navigator containers and controls
• Using the LinkBar control
• Using the TabBar control
• Using the ViewStack container
• Using the TabNavigator container
• Using the Accordion container

121. Understanding navigator containers
and controls
There are two types of containers
• Layout container - Control the sizing and positioning of the child element
within them
• Navigator container – Control user movement, or navigation among multiple
child containers

122. Understanding navigator containers
and controls
Navigator container basics
• The direct children of a navigator container must be containers, either layout
or navigator container
• Typical properties of a container tag include id, width and height.
• Navigator container and their children
• Only ViewStack, TabNavigator and Accordion containers have child
containers that you can layout.
• LinkBar, ButtonBar, TabBar navigator controls do not have child containers.
Instead they enable users and code to control the currently active child
container of ViewStack container.

123. Using the LinkBar control
• The LinkBar control
• Defines a horizontal row of linkButton controls
• Is a navigator container with built-in logic to switch between children of a
ViewStack container
• Has a width that is wide enough to contain all label text plus separators and
necessary padding
• Has a height that accommodate the tallest child element
• Has default padding value of 2 pixels on all sides
• Is represented in MXML with the <mx:LinkBar> tag

124. Using the LinkBar control
<mx:LinkBar>
<mx:dataProvider>
<mx:String>Home</mx:String>
<mx:String>Contact Us</mx:String>
<mx:String>Special Events</mx:String>
<mx:String>Restaurant Menu</mx:String>
</mx:dataProvider>
</mx:LinkBar>

125. Using the TabBar control
• The TabBar control
• Defines a horizontal (default) or vertical rows of tabs
• Has default padding value of 0 pixels on all sides
• Is represented in MXML using <mx:TabBar> tag

126. Using the TabBar control
<mx:TabBar labelField="menuName">
<mx:dataProvider>
<mx:Object menuName="Home" />
<mx:Object menuName="Contact Us" />
<mx:Object menuName="Special Events"/>
<mx:Object menuName="Resturant Menu" />
</mx:dataProvider>
</mx:TabBar>

127. Using the ViewStack control
The ViewStack container
• Is made up of a collection of child containers that are stacked on top of each
other, with one container visible or active at a time.
• The ViewStack container does not define a built-in mechanism for users to
switch the currently active container
• you must use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control or
build the logic yourself in ActionScript to let users change the currently
active child.
• Is represented in MXML with the <mx:ViewStack> tag

128. A. Child container 1 active B. Child container 0 active

129. Using the ViewStack control

130. <mx:VBox>
<!-- Create a LinkBar control to navigate the ViewStack container. -->
<mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid"/>
<!-- Define the ViewStack and the three child containers. -->
<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%">
<mx:Canvas id="search" label="Search">
<mx:Label text="Search Screen"/>
</mx:Canvas>
<mx:Canvas id="custInfo" label="Customer Info">
<mx:Label text="Customer Info"/>
</mx:Canvas>
<mx:Canvas id="accountInfo" label="Account Info">
<mx:Label text="Account Info"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>

131. Walkthrough 11:Create navigation
with TabBar and ViewStack control

132. Using TabNavigator container
• The TabNavigator works the same way as ViewStack.
• Has its own child so no need to provide ViewStack or dataProvider
• Defines a horizontal row of tabs
• Display one child at a time, in order they are defined
• Had default padding value of 2 pixels on all side
• Is represented in MXML with <mx:TabNavigator> tag

133. Using TabNavigator container

134. <mx:TabNavigator borderStyle="solid" >
<mx:VBox label="Accounts"
width="300"
height="150">
<!-- Accounts view goes here. -->
</mx:VBox>
<mx:VBox label="Stocks"
width="300"
height="150">
<!-- Stocks view goes here. -->
</mx:VBox>
<mx:VBox label="Futures"
width="300"
height="150">
<!-- Futures view goes here. -->
</mx:VBox>
</mx:TabNavigator>

135. Using Accordion container
• The Accordion works the same way as ViewStack.
• Has its own child so no need to provide ViewStack or dataProvider
• Defines vertically stacked panels that animate as they open and close
• has its own child content
• Has default padding value of 2 pixels on all side
• Is represented in MXML with the <mx:Accordion> tag

136. Using Accordion container

137. <mx:Accordion borderStyle="solid" >
<mx:VBox label="Accounts"
width="300"
height="150">
<!-- Accounts view goes here. -->
</mx:VBox>
<mx:VBox label="Stocks"
width="300"
height="150">
<!-- Stocks view goes here. -->
</mx:VBox>
<mx:VBox label="Futures"
width="300"
height="150">
<!-- Futures view goes here. -->
</mx:VBox>
</mx:Accordion>

138. Walkthrough 12:creating navigation
using Accordion and TabNavigator

139. Summary

140. Styling your Application with CSS
In this section, you will learn to customize the look and feel of flex applications
with styles, behaviors and transitions. You will also learn to use different types
of themes.

141. Styling your Application with CSS
Objectives
After completing this unit, you shall be able to:
• Modifying the default Flex application style
• Add animations to components using triggers and effects
• Add animation to view state transitions

142. Styling your Application with CSS
Topics
In this unit, you will learn the following:
• Customizing Flex application look and feel
• Modifying Flex styles to change the look and feel
• Using themes
• Applying behaviors to components
• Applying transitions to view state changes

143. Customizing Flex application look
and feel
• You can modify almost every aspect of the look and feel and user
interaction of your application by using these features of flex
– Component sizes- height and width.
– Graphical display – characteristic like color, font size, border, width, text
alignment, corner radius setting etc
– Dynamic effects – animations or sound
– Fonts – default embedded text character sets

144. Customizing Flex application look
and feel
About CSS styles in Flex
• You can use CSS styles to modify your Flex user interface more efficiently.
• CSS styles in Flex can be defined at the site level with external styles, at the
document level with embedded styles, or at the component level with inline
styles.
• Flex uses slightly different names for multi-word CSS property names such
as font-family or font-size.
• Hyphens are removed, the letter following each hyphen is capitalized, and
equal signs instead of colons are used for property values.

145. Customizing Flex application look
and feel
External Styles
• External styles are defined in a separate file and can be used in any
MXML file that references the CSS file.
• You reference a CSS file into an MXML file with the source property of the
<mx:Style> tag, as follows:
• <mx:Style source="../siteStyles.css"/>

146. Customizing Flex application look
and feel
Embedded Styles
• Embedded styles are defined in an MXML file and can only be used in that
file. Embedded styles are defined with the <mx:Style> tag, as follows:
<mx:Style>
.myclass { background-color: xFF0000 }
TextInput { font-family: Helvetica; font-size: 12pt }
</mx:Style>
• Once defined, you can apply the myclass style to any component using the
styleName property, as in the following example:
<mx:Button styleName="myclass">

147. Customizing Flex application look
and feel
Inline Styles
• Inline styles are defined in an MXML tag and can only be used in that tag.
Inline styles are defined as follows:
<mx:Button color="red"...>

148. Customizing Flex application look
and feel
Changing flex control style defaults – skins
• Skins are graphics displayed on components
– for example, the down arrow of the ScrollBar component is made up of
three skins – ScrollDownArrowDisabled, ScrollDownArrowUp,
ScrollDownArrowDown
– Some components share skins. For example components that use scroll
bars – including all containers share their skin with the ScrollBar
component
• Styles are defined on components. You can customize these styles

149. Modifying styles to change the look
and feel
• Flex provides several ways of setting component styles
• Using MXML component properties
• Calling the setStyle() method in ActionScript
• Using Cascading style sheets (CSS)
• Setting global styles
• Implementing built in theme styles

150. Modifying styles to change the look
and feel
Setting styles inline using MXML component attributes
• You have already set some styles for components by specifying values for
attributes in MXML components
• <mx:Text text=“Appetizers” color=“#dd7142” />

151. Modifying styles to change the look
and feel
Setting style in ActionScript for individual components using the setStyle()
method
emailButton.setStyle(“ontSize”, 15);

152. Modifying styles to change the look
and feel
Setting style using Cascading style sheets (CSS)
• Creating CSS type selectors
– Type selectors assign styles to all instances of a particular type
– Within the Style container, name MXML component and define its styles
– Use a comma-separated list of components to set the same style to all
specified components types
<mx:Style>
TextArea { backgroundColor: “#cccccc”}
Button, TextInput, Label { font-style: Italic}
</mx:Style>
<mx:TextArea id=“message” />

153. Using themes
• Flex provides several themes that can be applied to the overall application
• Use the themeColor style to set the theme color to any color or to a halo
color (haloGreen, haloBlue, haloSilver, haloOrange)
<mx:Application themeColor=“haloBlue” >

154. Walkthrough 13:Styling your
Application

155. Applying behaviors to components
• A behavior is a combination of a trigger paired with an effect
• Behaviors let you add animation and motion to your application components
in response to some user or programmatic action.
• For example, you can use behaviors to cause a dialog box to bounce
slightly when it receives focus, or to play a sound when the user enters an
invalid value.
• You build behaviors into your applications by using MXML and ActionScript

156. Applying behaviors to components
Understanding behaviors basics
• Behavior has two parts
– A trigger – an action, such as user clicking on a button, a component
gaining focus or becoming invisible
• You can define multiple effects for a single trigger.
– An effect – a visible or audible change to the component occurring over
a period of time such as fade effect

157. Applying behaviors to components
About applying behaviors
• Apply simple behavior by setting the trigger name property of the
component to the name of the effect class
• <mx:Button id=“sendButton” label=“send message”
mouseDowneffect=“fade” />

158. Applying behaviors to components
• Apply a simple behavior by setting the trigger name property of the
component to the name of the effect class
<mx:Button id=“sendButton” label=“Send Message”
mouseDownEffect=“Fade” />

159. Applying behaviors to components
• Define a reusable effect instance
– First use the MXML component for the effect
<mx:Fade id=“fadeEffect” />
– Then apply the effect to the targets using data binding
<mx:Button id=“sendButton” label=“Send Message”
mouseDownEffect=“{fadeEffect}” />
<mx:Button id=“requestButton” label=“Request broucher”
mouseDownEffect=“{fadeEffect}” />

160. Walkthrough 14:Applying
Behaviors

161. summary

162. Working with Datagrid
• The DataGrid control is a list that can display more than one column of
data
• It is a formatted table of data that lets you set editable table cells, and is
the foundation of many data-driven applications.

163. Working with Datagrid
The DataGrid control provides the following features:
• Resizable, sortable, and customizable column layouts, including hidable
columns
• Optional customizable column and row headers, including optionally
wrapping header text
• Columns that the user can resize and reorder at run time
• Selection events
• Ability to use a custom item renderer for any column
• Support for paging through data
• Locked rows and columns that do not scroll

164. Working with DataGrid
Creating a DataGrid control
• You use the <mx:DataGrid> tag to define a DataGrid control in MXML
• Specify an id value if you intend to refer to a component elsewhere in your
MXML, either in another tag or in an ActionScript block
• The DataGrid control uses a list-based data provider
• You can specify data in several different ways.
• In the simplest case for creating a DataGrid control, you use the
<mx:dataProvider> property subtag with <mx:ArrayCollection>, and
<mx:Object> tags to define the entries as an ArrayCollection of Objects.

165. Working with DataGrid
<mx:DataGrid>
<mx:ArrayCollection>
<mx:Object>
<mx:Artist>Pavement</mx:Artist>
<mx:Price>11.99</mx:Price>
<mx:Album>Slanted and Enchanted</mx:Album>
</mx:Object>
<mx:Object>
<mx:Artist>Pavement</mx:Artist>
<mx:Album>Brighten the Corners</mx:Album>
<mx:Price>11.99</mx:Price>
</mx:Object>
</mx:ArrayCollection>
</mx:DataGrid>

166. Walkthrough 15: Working with
Datagrid

167. Specifying columns
Specifying columns
• Each column in a DataGrid control is represented by a DataGridColumn
object
• You use the columns property of the DataGrid control and the
<mx:DataGridColumn> tag to select the DataGrid columns, specify the
order in which to display them, and set additional properties.
• You can also use the DataGridColumn class visible property to hide and
redisplay columns

168. Specifying columns
<mx:DataGrid>
<mx:ArrayCollection>
<mx:Object Artist="Pavement" Price="11.99" Album="Slanted and Enchanted"
/>
<mx:Object Artist="Pavement" Album="Brighten the Corners" Price="11.99" />
</mx:ArrayCollection>
<mx:columns>
<mx:DataGridColumn dataField="Album" />
<mx:DataGridColumn dataField="Price" />
</mx:columns>
</mx:DataGrid>

169. Walkthrough 16: Adding Columns

170. Summary