ria_day_2

8/8/2019 ria_day_2

1/39

Flex 3:Developing Rich Internet

Applications - Day 2

Shyamala Prayaga

8/8/2019 ria_day_2

2/39

Reviewing course outline

Application Navigation

Styling your Application with CSS

Working with data (DataGrid)

8/8/2019 ria_day_2

3/39

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

8/8/2019 ria_day_2

4/39


ObjectivesAfter 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

8/8/2019 ria_day_2

5/39


TopicsIn 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

8/8/2019 ria_day_2

6/39

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

8/8/2019 ria_day_2

7/39

Understanding navigator containers

and controlsNavigator 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/8/2019 ria_day_2

8/39


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 tag

8/8/2019 ria_day_2

9/39


Home

Contact Us

Special Events

Restaurant Menu

8/8/2019 ria_day_2

10/39


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 tag

8/8/2019 ria_day_2

11/39


8/8/2019 ria_day_2

12/39

Using the ViewStack control

The ViewStack container

Is made up of a collection of child containers that are stacked on top of eachother, 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


8/8/2019 ria_day_2

13/39

Using the ViewStack control

8/8/2019 ria_day_2

14/39

View 1

View 2

View 3

8/8/2019 ria_day_2

15/39

Walkthrough 11:Create navigation

with TabBar and ViewStack control

8/8/2019 ria_day_2

16/39

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 tag

8/8/2019 ria_day_2

17/39

Using TabNavigator container

8/8/2019 ria_day_2

18/39

8/8/2019 ria_day_2

19/39

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


8/8/2019 ria_day_2

20/39

Using Accordion container

8/8/2019 ria_day_2

21/39

8/8/2019 ria_day_2

22/39

Walkthrough 12:creating navigation

using Accordion and TabNavigator

8/8/2019 ria_day_2

23/39

Summary

8/8/2019 ria_day_2

24/39


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.

8/8/2019 ria_day_2

25/39


ObjectivesAfter 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

8/8/2019 ria_day_2

26/39


TopicsIn 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

8/8/2019 ria_day_2

27/39

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

8/8/2019 ria_day_2

28/39


and feelChanging 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

8/8/2019 ria_day_2

29/39


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

8/8/2019 ria_day_2

30/39

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

8/8/2019 ria_day_2

31/39


and feelSetting styles inline using MXML component attributes

You have already set some styles for components by specifying values for

attributes in MXML components

8/8/2019 ria_day_2

32/39


and feelSetting style in ActionScript for individual components using the setStyle()

method

emailButton.setStyle(ontSize, 15);

8/8/2019 ria_day_2

33/39


and feelSetting 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 allspecified components types

TextArea { backgroundColor: #cccccc}

Button, TextInput, Label { font-style: Italic}

8/8/2019 ria_day_2

34/39

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)

8/8/2019 ria_day_2

35/39

Walkthrough 13:Styling your

Application

8/8/2019 ria_day_2

36/39


Behaviors let you add animation and motion to your application components

in response to some user or programmatic action.

8/8/2019 ria_day_2

37/39


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

8/8/2019 ria_day_2

38/39


Apply a simple behavior by setting the trigger name property of the

component to the name of the effect class

8/8/2019 ria_day_2

39/39

ria_day_2

Documents

Transcript of ria_day_2