flex 3 - developing rich internet application
TRANSCRIPT
-
8/8/2019 Flex 3 - Developing Rich Internet Application
1/170
Flex 3: Developing Rich InternetApplications
-
8/8/2019 Flex 3 - Developing Rich Internet Application
2/170
Adobe Flex Workshop
Topics
Understanding course format
Reviewing course outline
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
4/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
5/170
Rich Internet ApplicationIn this unit, you will understand what a Rich Internet application (RIA)
is. You will understand the Anatomy of RIA.
-
8/8/2019 Flex 3 - Developing Rich Internet Application
6/170
Rich Internet Application
Objectives
After completing this unit, you shall be able to:
Rich Internet Application
RIA technologies
-
8/8/2019 Flex 3 - Developing Rich Internet Application
7/170
Rich Internet ApplicationTopics
In this unit, you will learn the following:
Understanding RIA
Understanding the foundation of RIA
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
9/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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.
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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.
-
8/8/2019 Flex 3 - Developing Rich Internet Application
12/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
13/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
14/170
Summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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.
-
8/8/2019 Flex 3 - Developing Rich Internet Application
16/170
Adobe Flex 3Objectives
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
17/170
Adobe Flex 3Topics
In this unit, you will learn the following:
Understanding Adobe Flex
Adobe Flex product line
Flex Architecture Flex resources
-
8/8/2019 Flex 3 - Developing Rich Internet Application
18/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
19/170
Where is Flex used
-
8/8/2019 Flex 3 - Developing Rich Internet Application
20/170
How Flex works
-
8/8/2019 Flex 3 - Developing Rich Internet Application
21/170
How flex works in the browser
-
8/8/2019 Flex 3 - Developing Rich Internet Application
22/170
Flex is
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
24/170
Flex Architecture
-
8/8/2019 Flex 3 - Developing Rich Internet Application
25/170
Flex enables
-
8/8/2019 Flex 3 - Developing Rich Internet Application
26/170
Flex makes you
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
28/170
Summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
30/170
Flex BuilderObjectives
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
31/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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.
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
37/170
perspectivesSource and design mode selectors
views editor
-
8/8/2019 Flex 3 - Developing Rich Internet Application
38/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet 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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
41/170
Select File > new > Flex project
Choose a project name and location
-
8/8/2019 Flex 3 - Developing Rich Internet Application
42/170
Specify output folder. The default is bin-debug folder
-
8/8/2019 Flex 3 - Developing Rich Internet Application
43/170
Choose project build paths
-
8/8/2019 Flex 3 - Developing Rich Internet Application
44/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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?
-
8/8/2019 Flex 3 - Developing Rich Internet Application
47/170
Client with
Flash player
MXML
ActionScript
SWFMain.swf
Main.mxml
W lkth h 1 ti i
-
8/8/2019 Flex 3 - Developing Rich Internet Application
48/170
Walkthrough 1: creating a main
application and running it
-
8/8/2019 Flex 3 - Developing Rich Internet Application
49/170
Summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
52/170
Learning Flex fundamentalTopics
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
59/170
Walkthrough 2: creating your first
Flex application
-
8/8/2019 Flex 3 - Developing Rich Internet 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)
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet 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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
63/170
Displaying images Using the load() method
Dynamically switch out the image using the load() method of the Image
class
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
66/170
g g g
an application
Laying out Flex application with
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Laying out Flex application with
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Laying out Flex application with
-
8/8/2019 Flex 3 - Developing Rich Internet Application
70/170
containersBox Containers
There are two types of Box containers available to layout your pages Vertical box (VBox)
Horizontal box (HBox)
Laying out Flex application with
-
8/8/2019 Flex 3 - Developing Rich Internet Application
71/170
containersVBox
The VBox layout allows you to display controls vertically, as in the image below
Laying out Flex application with
-
8/8/2019 Flex 3 - Developing Rich Internet Application
72/170
containersHBox
The HBox layout enables you to lay out your controls horizontally, as in thefollowing image
Laying out Flex application with
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Laying out Flex application with
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
75/170
Walkthrough 4: Using basic layouts
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
77/170
Using Panel container
titlestatus
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Using Panel container
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
81/170
application modules into Panels
Using ControlBar container
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Using ControlBar container
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Using ControlBar container
-
8/8/2019 Flex 3 - Developing Rich Internet Application
84/170
g
ControlBar
Walkthrough 6: using ControlBar
-
8/8/2019 Flex 3 - Developing Rich Internet Application
85/170
container
Adding user interface controls
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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:
-
8/8/2019 Flex 3 - Developing Rich Internet Application
87/170
A. Form containerB. TextInput controls C. ComboBox control D. Button control
Adding user interface controls
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Creating data binding between
components
-
8/8/2019 Flex 3 - Developing Rich Internet Application
93/170
componentsCreating Data binding
Using curly braces syntax Assigns a property a dynamic literal value
Uses a broadcast/listener method
Creating data binding between
components
-
8/8/2019 Flex 3 - Developing Rich Internet Application
94/170
components Using tag
Walkthrough 7: creating data
binding
-
8/8/2019 Flex 3 - Developing Rich Internet Application
95/170
binding
Summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
96/170
View States
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
99/170
TopicsIn this unit, you will learn the following:
Understanding view states
Controlling view states
Reviewing the generated MXML code
Understanding view states
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Understanding view states
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Understanding view states
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Understanding view states
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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.
-
8/8/2019 Flex 3 - Developing Rich Internet Application
104/170
In Design mode, click the New State button in the States view (Window > States).
-
8/8/2019 Flex 3 - Developing Rich Internet Application
105/170
The New State dialog box appears
-
8/8/2019 Flex 3 - Developing Rich Internet Application
106/170
Walkthrough 8: Creating states
-
8/8/2019 Flex 3 - Developing Rich Internet Application
107/170
Understanding view states
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Understanding view states
-
8/8/2019 Flex 3 - Developing Rich Internet Application
109/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
110/170
On click event the changeState will
trigger the new forms state view
-
8/8/2019 Flex 3 - Developing Rich Internet Application
111/170
On click event the changeState will
trigger the base state view
Understanding view states
Th f ll i bl h h l h
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
113/170
Reviewing the generated MXML
codeThe MXML tag sed to manage the ie states are
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
115/170
Walkthrough 10: implementing view
states using MXML
-
8/8/2019 Flex 3 - Developing Rich Internet Application
116/170
Summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
117/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
118/170
Application navigation
Objectives
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
124/170
Using the TabBar control
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Using the TabBar control
-
8/8/2019 Flex 3 - Developing Rich Internet Application
126/170
Using the ViewStack control
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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.
Is represented in MXML with the tag
-
8/8/2019 Flex 3 - Developing Rich Internet Application
128/170
A. Child container 1 active B. Child container 0 active
-
8/8/2019 Flex 3 - Developing Rich Internet Application
129/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
130/170
Walkthrough 11:Create navigation
with TabBar and ViewStack control
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
132/170
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
Using TabNavigator container
-
8/8/2019 Flex 3 - Developing Rich Internet Application
133/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
134/170
Using Accordion container
The Accordion works the same way as ViewStack.
Has its own child so no need to provide ViewStack or dataProvider
-
8/8/2019 Flex 3 - Developing Rich Internet Application
135/170
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 tag
Using Accordion container
-
8/8/2019 Flex 3 - Developing Rich Internet Application
136/170
-
8/8/2019 Flex 3 - Developing Rich Internet Application
137/170
Walkthrough 12:creating navigation
using Accordion and TabNavigator
-
8/8/2019 Flex 3 - Developing Rich Internet Application
138/170
Summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
140/170
of themes.
Styling your Application with CSS
ObjectivesAfter completing this unit you shall be able to:
-
8/8/2019 Flex 3 - Developing Rich Internet Application
141/170
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
Styling your Application with CSS
TopicsIn this unit you will learn the following:
-
8/8/2019 Flex 3 - Developing Rich Internet Application
142/170
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
Customizing Flex application look
and feel
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Customizing Flex application look
and feelAbout CSS styles in Flex
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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.
Customizing Flex application look
and feelExternal Styles
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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:
Customizing Flex application look
and feelEmbedded Styles
Embedded styles are defined in an MXML file and can only be used in that
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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:
Customizing Flex application look
and feelInline Styles
I li t l d fi d i MXML t d l b d i th t t
-
8/8/2019 Flex 3 - Developing Rich Internet Application
147/170
Inline styles are defined in an MXML tag and can only be used in that tag.
Inline styles are defined as follows:
Customizing Flex application look
and feelChanging flex control style defaults skins
Ski hi di l d t
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
149/170
Calling the setStyle() method in ActionScript
Using Cascading style sheets (CSS) Setting global styles
Implementing built in theme styles
Modifying styles to change the look
and feelSetting styles inline using MXML component attributes
You have already set some styles for components by specifying values for
-
8/8/2019 Flex 3 - Developing Rich Internet Application
150/170
You have already set some styles for components by specifying values for
attributes in MXML components
Modifying styles to change the look
and feelSetting style in ActionScript for individual components using the setStyle()method
-
8/8/2019 Flex 3 - Developing Rich Internet Application
151/170
emailButton.setStyle(ontSize, 15);
Modifying styles to change the look
and feelSetting style using Cascading style sheets (CSS)
Creating CSS type selectors
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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)
-
8/8/2019 Flex 3 - Developing Rich Internet Application
153/170
( g )
Walkthrough 13:Styling your
Application
-
8/8/2019 Flex 3 - Developing Rich Internet Application
154/170
Applying behaviors to components
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Applying behaviors to components
Understanding behaviors basics
Behavior has two parts
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
Applying behaviors to components
About applying behaviors
Apply simple behavior by setting the trigger name property of the
-
8/8/2019 Flex 3 - Developing Rich Internet Application
157/170
component to the name of the effect class
Applying behaviors to components
Apply a simple behavior by setting the trigger name property of the
component to the name of the effect class
-
8/8/2019 Flex 3 - Developing Rich Internet Application
158/170
Applying behaviors to components
Define a reusable effect instance
First use the MXML component for the effect
F d id f d Eff t /
-
8/8/2019 Flex 3 - Developing Rich Internet Application
159/170
Then apply the effect to the targets using data binding
Walkthrough 14:Applying
Behaviors
-
8/8/2019 Flex 3 - Developing Rich Internet Application
160/170
summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
161/170
Working with Datagrid
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
165/170
Pavement11.99
Slanted and Enchanted
Pavement
Brighten the Corners
11.99
Walkthrough 15: Working with
Datagrid
-
8/8/2019 Flex 3 - Developing Rich Internet Application
166/170
Specifying columns
Specifying columns
Each column in a DataGrid control is represented by a DataGridColumn
-
8/8/2019 Flex 3 - Developing Rich Internet Application
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
-
8/8/2019 Flex 3 - Developing Rich Internet Application
168/170
Walkthrough 16: Adding Columns
-
8/8/2019 Flex 3 - Developing Rich Internet Application
169/170
Summary
-
8/8/2019 Flex 3 - Developing Rich Internet Application
170/170