Download pdf - Flex 3 - Developing Rich Internet Application

8/8/2019 Flex 3 - Developing Rich Internet Application

1/170

Flex 3: Developing Rich InternetApplications


2/170

Adobe Flex Workshop

Topics

Understanding course format

Reviewing course outline


3/170

Understanding course formatThis 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/170


5/170

Rich Internet ApplicationIn this unit, you will understand what a Rich Internet application (RIA)

is. You will understand the Anatomy of RIA.


6/170

Rich Internet Application

Objectives

After completing this unit, you shall be able to:

Rich Internet Application

RIA technologies


7/170

Rich Internet ApplicationTopics

In this unit, you will learn the following:

Understanding RIA

Understanding the foundation of RIA


8/170

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


9/170


10/170

Concept of RichnessRichness 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/170

Concept of RichnessRichness 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.


12/170


13/170


14/170

Summary


15/170

Adobe Flex 3In 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/170

Adobe Flex 3Objectives


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/170

Adobe Flex 3Topics


Understanding Adobe Flex

Adobe Flex product line

Flex Architecture Flex resources


18/170


19/170

Where is Flex used


20/170

How Flex works


21/170

How flex works in the browser


22/170

Flex is


23/170

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 thatrun in any browser


24/170

Flex Architecture


25/170

Flex enables


26/170

Flex makes you


27/170

Flex ResourcesFlex 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/170

Summary


29/170

Flex BuilderIn this unit, you will understand the Flex builder and its workbenches. You will

learn how Flex builder is used for code hinting, debugging


30/170

Flex BuilderObjectives


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/170


32/170

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/170

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/170

Flex builder workbenchesUnderstanding 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/170

Flex builder workbenchesUnderstanding 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/170

Flex builder workbenchesUnderstanding 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

perspectivesSource and design mode selectors


37/170

perspectivesSource and design mode selectors

views editor


38/170


39/170

Creating a project and your first

applicationTo begin development, you need to learn the following

Create a Flex project

Create a main application page

Compile the application

Run the application


40/170

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 automaticallycreated

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

Select File > new > Flex project


41/170

Select File > new > Flex project

Choose a project name and location


42/170

Specify output folder. The default is bin-debug folder


43/170

Choose project build paths


44/170


45/170

Using the main application file The main application file contains the 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/170

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/170

Client with

Flash player

MXML

ActionScript

SWFMain.swf

Main.mxml

W lkth h 1 ti i


48/170

Walkthrough 1: creating a main

application and running it


49/170

Summary


50/170

Learning Flex fundamentalIn this section, you will develop your first flex application and understand the

basic infrastructure that a flex application must have


51/170

Learning Flex fundamentalObjectivesAfter 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/170

Learning Flex fundamentalTopics


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/170

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 component tag set


54/170

Creating a simple Flex applicationSpecifying namespace

use xmlns:mx attribute for the namespace, which defines the collection oflegal 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

http://www.adobe.com/2006/mxml

mxml-manifest.xml

Flex-config.mxml is located in installdirectory\Adobe\Flex Builder

3\sdks\3.0.0\frameworks\flex-config.xml


55/170

Creating a simple Flex applicationSetting the layout property

The layout property defaults to your last selection when building anapplication 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/170

Creating a simple Flex applicationAdding 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


57/170

Creating a simple Flex applicationSpecifying components properties

Component properties can be specified in two ways

As an attribute of the XML tag

As nested tags or nodes

Hello


58/170

Creating a simple Flex applicationCommenting you MXML code

Use XML style comments which is similar to HTML comments

Walkthrough 2: creating your first


59/170

Walkthrough 2: creating your first

Flex application


60/170

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/170

Displaying imagesMethods 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 atruntime

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/170

Displaying imagesLoading dynamically at runtime

Specify the image using the source attribute of the control Image is loaded at runtime

Assign an id to the image to reference in ActionScript


63/170

Displaying images Using the load() method

Dynamically switch out the image using the load() method of the Image

class


64/170

Displaying imagesEmbedding 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


65/170

Displaying imagesPros 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

Walkthrough 3: Adding an image to


66/170

g g g

an application

Laying out Flex application with


67/170

y g pp

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/170

containersHow 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

Application layout=vertical


69/170

Image: Cafe Townsend banner

HBox

VBox

VBox

Tile: Appetizers

VBox VBox

Tile: Entrees

Tile: Desserts

Container layout of the application

VBox

VBox VBox VBox

VBox VBox VBox

Panel: Contact

Panel: About

Panel: Events



70/170

containersBox Containers

There are two types of Box containers available to layout your pages Vertical box (VBox)

Horizontal box (HBox)



71/170

containersVBox

The VBox layout allows you to display controls vertically, as in the image below



72/170

containersHBox

The HBox layout enables you to lay out your controls horizontally, as in thefollowing image



73/170

containersCanvas container

The Canvas container is a basic component that enables you to specify absolutepositions

You can use absolute positioning by specifying x and y properties of the components

inside the container

Canvas containers can offer better performance, because client processing powerdoes not have to be used in order to determine object placement



74/170

containersSpecifying positions in a Canvas container

As stated, you must specify the x and y properties of all the childcomponents 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 pointValue, 0

0, Value

Walkthrough 4: Using basic layouts


75/170

Walkthrough 4: Using basic layouts


76/170

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

Panel

Panel

Panel

Application layout=horizontal


77/170


titlestatus


78/170

Using Panel containerUsing the Panel tag

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/170

Us g a e co a e

Sizing container content

The size of any content placed within a container is relative to thatcontainer, 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

Panel width set to 600


80/170

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

Walkthrough 5: separating


81/170

application modules into Panels

Using ControlBar container


82/170

g

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/170

g

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



84/170

g

ControlBar

Walkthrough 6: using ControlBar


85/170

container

Adding user interface controls


86/170

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.

The following image shows several controls used in a Form container:


87/170

A. Form containerB. TextInput controls C. ComboBox control D. Button control

Adding user interface controls


88/170

Text controls

Menu based controls

Data Driven controls

Displa s a ariable si e b tton that can incl de a label anB tton

Displays a pop-up alertAlert


89/170

Displays a single horizontal rule (HRule) or vertical rule

(VRule).

HRule/VRule

Displays a horizontal list of items.HorizontalList

Displays the date with a calendar icon on its right side.DateField

Displays a full month of days to let you select a date.DateChooser

Displays data in a tabular format.DataGrid

Displays a selectable drop-down color swatch panel

(palette).

ColorPicker

Displays a drop-down list attached to a text field that

contains a set of values.

ComboBox

Shows whether a particular Boolean value is true

(checked) or false (unchecked).

CheckBox

Displays a row of related buttons with a common

appearance.

ButtonBar

Displays a variable-size button that can include a label, anicon image, or both.Button

Imports GIF JPEG PNG SVG and SWF filesImage

Lets users select a value by moving a slider thumb

between the end points of the slider track.

HSlider/VSlider


90/170

Displays a set of buttons of which exactly one is selected

at any time.

RadioButton

Provides visual feedback of how much time remains in the

current operation.

ProgressBar

Displays a dual button control that you can use to increase

or decrease the value of the underlying variable.

NumericStepper

Displays a horizontal menu bar that contains one or more

submenus of Menu controls

MenuBar

Displays a pop-up menu of individually selectable choices,

much like the File or Edit menu of most software

applications.

Menu

Displays a scrollable array of choices.ListDisplays a simple hypertext link.LinkButton

Displays a horizontal row of LinkButton controls that

designate a series of link destinations.

LinkBar

Displays a noneditable single-line field label.LabelImports GIF, JPEG, PNG, SVG, and SWF files.Image

Includes a multiline editable text field and controls for

specifying text formatting

RichTextEditor

Displays a group of RadioButton controls with a single click

event listener.

RadioButton

Group


91/170

Displays hierarchical data arranged as an expandable tree.Tree

Displays a row of related buttons with a common

appearance.

ToggleButtonBar

Displays a tiled list of items. The items are tiled in verticalcolumns or horizontal rows.

TileList

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.

TextInput

Displays an editable text field for user input that can accept

more than a single line of input.

TextArea

Displays a noneditable multiline text field.Text

Displays a horizontal row of tabs.TabBar

Displays the contents of a specified SWF file or JPEG fileSWFLoader

Displays horizontal and vertical scroll bars.ScrollBar

(HScrollBar and

VScrollBar)

specifying text formatting.

Creating data binding between

t


92/170

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 { }

tag


components


93/170

componentsCreating Data binding

Using curly braces syntax Assigns a property a dynamic literal value

Uses a broadcast/listener method


components


94/170

components Using tag

Walkthrough 7: creating data

binding


95/170

binding

Summary


96/170

View States


97/170

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.

View States


98/170

ObjectivesAfter 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

View States


99/170

TopicsIn this unit, you will learn the following:

Understanding view states

Controlling view states

Reviewing the generated MXML code



100/170

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/170

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/170

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/170

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/170

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


105/170

The New State dialog box appears


106/170

Walkthrough 8: Creating states


107/170



108/170

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/170


110/170

On click event the changeState will

trigger the new forms state view


111/170

On click event the changeState will

trigger the base state view


Th f ll i bl h h l h


112/170

The following table shows the classes that you use to create states

Sets a style property on a component as part of a

change of view state

SetStyle

Sets a component property as part of a change of view

state.

SetProperty

Adds an event handler as part of a change of view state.SetEventHandler

Adds or removes a child component as part of a changeof view state.

AddChild andRemoveChild

Walkthrough 9: Switching states


113/170

Reviewing the generated MXML

codeThe MXML tag sed to manage the ie states are


114/170

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 aproperty 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/170

Walkthrough 10: implementing view

states using MXML


116/170

Summary


117/170


118/170

Application navigation

Objectives


119/170

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

Application navigation

Topics


120/170

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

Understanding navigator containers

and controls


121/170

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

Understanding navigator containers

and controlsNavigator container basics


122/170

g

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.

Using the LinkBar control


123/170

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 andnecessary 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


124/170



125/170

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



126/170

Using the ViewStack control


127/170

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.



128/170

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


129/170


130/170

Walkthrough 11:Create navigation

with TabBar and ViewStack control


131/170

Using TabNavigator container

The TabNavigator works the same way as ViewStack.

Has its own child so no need to provide ViewStack or dataProvider


132/170


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

Using TabNavigator container


133/170


134/170

Using Accordion container

The Accordion works the same way as ViewStack.



135/170


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


Using Accordion container


136/170


137/170

Walkthrough 12:creating navigation

using Accordion and TabNavigator


138/170

Summary


139/170

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


140/170

of themes.


ObjectivesAfter completing this unit you shall be able to:


141/170


Modifying the default Flex application style

Add animations to components using triggers and effects

Add animation to view state transitions


TopicsIn this unit you will learn the following:


142/170


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

Customizing Flex application look

and feel


143/170

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


and feelAbout CSS styles in Flex


144/170

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 suchas 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.


and feelExternal Styles


145/170

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

tag, as follows:


and feelEmbedded Styles

Embedded styles are defined in an MXML file and can only be used in that


146/170

Embedded styles are defined in an MXML file and can only be used in thatfile. Embedded styles are defined with the tag, as follows:

.myclass { background-color: xFF0000 }

TextInput { font-family: Helvetica; font-size: 12pt }

Once defined, you can apply the myclass style to any component using the

styleName property, as in the following example:


and feelInline Styles

I li t l d fi d i MXML t d l b d i th t t


147/170

Inline styles are defined in an MXML tag and can only be used in that tag.

Inline styles are defined as follows:


and feelChanging flex control style defaults skins

Ski hi di l d t


148/170

Skins are graphics displayed on components

for example, the down arrow of the ScrollBar component is made up ofthree 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

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


149/170

Calling the setStyle() method in ActionScript

Using Cascading style sheets (CSS) Setting global styles

Implementing built in theme styles


and feelSetting styles inline using MXML component attributes

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


150/170

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

attributes in MXML components


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


151/170

emailButton.setStyle(ontSize, 15);


and feelSetting style using Cascading style sheets (CSS)

Creating CSS type selectors


152/170

g yp

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}

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)


153/170

( g )

Walkthrough 13:Styling your

Application


154/170



155/170

A behavioris 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 bounceslightly 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


Understanding behaviors basics

Behavior has two parts


156/170

p

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


About applying behaviors

Apply simple behavior by setting the trigger name property of the


157/170

component to the name of the effect class


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

component to the name of the effect class


158/170


Define a reusable effect instance

First use the MXML component for the effect

F d id f d Eff t /


159/170

Then apply the effect to the targets using data binding

Walkthrough 14:Applying

Behaviors


160/170

summary


161/170

Working with Datagrid


162/170

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.

Working with Datagrid

The DataGrid control provides the following features:

Resizable, sortable, and customizable column layouts, including hidable


163/170

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

Working with DataGrid

Creating a DataGrid control

You use the tag to define a DataGrid control in MXML


164/170

Specify an id value if you intend to refer to a component elsewhere in yourMXML, 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

property subtag with , and

tags to define the entries as an ArrayCollection of Objects.

Working with DataGrid


165/170

Pavement11.99

Slanted and Enchanted

Pavement

Brighten the Corners

11.99

Walkthrough 15: Working with

Datagrid


166/170

Specifying columns

Specifying columns

Each column in a DataGrid control is represented by a DataGridColumn


167/170

object You use the columns property of the DataGrid control and the

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

Specifying columns


168/170

Walkthrough 16: Adding Columns


169/170

Summary


170/170