2. Reviewing course outline
• Application Navigation
• Styling your Application with CSS
• Working with data (DataGrid)
3. 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
4. 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
5. 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
6. 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
7. 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.
8. 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
9. 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>
10. 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
11. 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>
12. 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.
• Does not provide user interface for selecting which child container is
currently visible
• Typically used LinkBar or TabBar controls to switch between child
containers
• Is represented in MXML with the <mx:ViewStack> tag
16. 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
19. 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
24. 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.
25. 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
26. 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
27. 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
28. Customizing Flex application look
and feel
Changing flex control style defaults – skins and styles
• 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
29. Customizing Flex application look
and feel
• There are three ways to change the appearance of components
– Use the Styles API to the programmatically modify styles
– Physically modify or replace
– Apply a theme made up of styles
30. 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
31. 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” />
32. Modifying styles to change the look
and feel
Setting style in ActionScript for individual components using the setStyle()
method
emailButton.setStyle(“ontSize”, 15);
33. 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” />
34. 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” >
36. Applying behaviors to components
• Behaviors let you add animation and motion to your application components
in response to some user or programmatic action.
37. 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
– An effect – a visible or audible change to the component occurring over
a period of time such as fade effect
• Components have triggers, but they do not do anything until you associate
them with an event
38. 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” />
