3. Understanding course format
This course is divided many units, most of which presents new information and
contain demonstration, walkthrough and a lab. At the end of each unit you will
find a summary and a short review to test your knowledge of the units
content. The following icons are used throughout the guide
Concepts introduce new information
Labs let you practice new skills on your own
Walkthroughs guide you, through procedures
4. Reviewing course outline
This course is separated into following modules:
• Understanding RIA
• Introduction to Flex 3
• Understanding Flex builder
• Learning Flex fundamentals
– Lay it out with containers
– Binding Data
– User interface
• Using View States for application design
• Application Navigation
• Customizing your application (CSS)
• Creating Data entry forms
• Working with data (DataGrid)
• Retrieving XML data with HTTPService
5. Rich Internet Application
In this unit, you will understand what a Rich Internet application (RIA)
is. You will understand the Anatomy of RIA.
8. Understanding RIA
• In 2002, Macromedia coined the term rich Internet application (RIA)
• Rich Internet Applications (RIA) combine the flexibility, responsiveness,
and ease of use of desktop applications with the broad reach of the web.
• RIA provide a dynamic web experience that is rich and engaging, as well as
interactive
9.
10. Concept of Richness
Richness in Data model
• Support of sophisticated data models: eg, XMLList, ArrayList
• Ability to send and receive data in/out of these data structures
asynchronously
• Ability for a user interface control to manipulate the data through powerful
Data binding
• Data can be obtained from server without redrawing the entire page
• Efficiently utilize network bandwidth transmitting only portion of data that
changed.
11. Concept of Richness
Richness in User Interface
• RIA offers a very rich set of user interface controls which can intelligently
interact with data model
– For example: controls like charts, graphs, calendar control, DataGrid, rich text
editors etc
• The User interface can incorporate rich multimedia content.
15. Adobe Flex 3
In this unit, you will understand what Adobe Flex is and how Adobe Flex and
Adobe flash player help in constructing Rich Internet Application. You
Will also understand the process of how MXML code you write is transformed
into a SWF file delivered to the client.
16. Adobe Flex 3
Objectives
After completing this unit, you shall be able to:
• Explain the different technologies in Adobe Flex product line
• Understand the application flow of a Flex application
• Know where and how to get help
17. Adobe Flex 3
Topics
In this unit, you will learn the following:
• Understanding Adobe Flex
• Adobe Flex product line
• Flex Architecture
• Flex resources
18. Understanding Adobe Flex
• Adobe Flex is a RIA tool that enables us to develop RIA in a quick delivery
model resulting in high productivity and customer satisfaction.
• A highly productive, free open source framework for building expressive
web applications that deploy consistently on:
– All major browser leveraging the Flash Player
– And on desktop with Adobe AIR
23. Adobe Flex SDK
• Adobe Flex SDK included Flex framework and Flex compiler, enabling you
to Freely develop and deploy Flex application using any IDE of your choice.
• Flex SDK includes all components needed to create flex applications that
run in any browser
29. Flex Builder
In this unit, you will understand the Flex builder and its workbenches. You will
learn how Flex builder is used for code hinting, debugging
30. Flex Builder
Objectives
After completing this unit, you shall be able to:
• Understand the Flex builder and its workbenches
• Use Flex builder effectively for design, development and debugging
• Create a Flex Project
• Create, compile and run a Flex application
31. Flex Builder
Topics
In this unit, you will learn the following:
• Understanding Adobe flex builder
• Flex builder workbenches
• Creating a project and your first application
32. Understanding Adobe Flex Builder
• Adobe Flex Builder is eclipse based development tool enabling
– Intelligent coding that included editors like MXML, ActionScript, CSS,
XML.
– Interactive step-through debugging and code hinting
– Rich Visual layout
– Visual UI and behaviors
– Interactive data visualization
– Skinning and styling
33. Flex builder workbenches
• The term workbench refers to the flex builder development environment.
• The Flex builder workbench contains three primary elements
– Perspectives
– Editors
– Views
34. Flex builder workbenches
Understanding Perspectives
• Perspectives includes combination of views and editors that are suited to
perform certain set of task
• Flex builder has two default perspectives
– Development
– Debugging
• May have other perspectives if using plug-in configuration, like java.
35. Flex builder workbenches
Understanding Editors
• An editor is the visual component in the workbench that is typically used to
edit or browse the resource
• An Editor is where files of various types are edited in either
– Design mode
– Source mode
36. Flex builder workbenches
Understanding Views
• A view supplies support tool when modifying a file in editor
• Navigator view allows you to manage files, folders and projects
• Problems view show errors in your code
• Outline view hierarchically present and allows you to navigate to, all of the
code elements and user interface in a file
39. Creating a project and your first
application
To begin development, you need to learn the following
• Create a Flex project
• Create a main application page
• Compile the application
• Run the application
40. Creating a project
• A project is a grouping of resources that make up a flex application
• When a project is created a number of files and folders are automatically
created
– bin-debug folder: where your compiled applications resides
– html-template folder: where the html wrapper page resides
– .settings folder: where some configuration file resides
– .actionScriptProperties, .flexProperties and .project files: project
configuration files
– src folder:
– libs folder: where custom class files reside
– A main application file, if you do not select an existing file for that role
Supply the following information to create a project
41. Select File > new > Flex project
Choose a project name and location
45. Using the main application file
• The main application file contains the <mx:Application> container set tag
– Each application can have only one associated application file
• The layout property is given the value absolute the first time you create an
application
– Flex builder will retain your last layout selection for future applications
• If you do not specify the layout property, the layout will be vertical
46. Running the application file
• Run the application by clicking the Run button. Run button is the green button on the
top panel
What exactly happens when you push the run button?
47. Main.mxml MXML
ActionScript
Client with
Flash player
Main.swf SWF
50. Learning Flex fundamental
In this section, you will develop your first flex application and understand the
basic infrastructure that a flex application must have
51. Learning Flex fundamental
Objectives
After completing this unit, you shall be able to:
• Create a flex application (MXML file)
• Layout an application with container
• Add a simple user interface control
• Create data binding between controls
52. Learning Flex fundamental
Topics
In this unit, you will learn the following:
• Creating a simple Flex application
• Displaying images
• Laying out Flex application with containers
• Using Panel container
• Using controlBar container
• adding user interface controls
• Create data binding between components
53. Creating a simple Flex application
• Application is the default container tag.
• Skeleton of an MXML application file contains
– XML document type definition
– Opening and closing <mx:Application> component tag set
54. Creating a simple Flex application
Specifying namespace
• use xmlns:mx attribute for the namespace, which defines the collection of
legal MXML tags
• http://www.adobe.com/2006/mxml is the uniform resource identifier which
associates a prefix (in this case mx) with a manifest file as follows
<namespace>
<url>http://www.adobe.com/2006/mxml</url>
<manifest>mxml-manifest.xml</manifest>
</namespace>
• Flex-config.mxml is located in installdirectoryAdobeFlex Builder
3sdks3.0.0frameworksflex-config.xml
55. Creating a simple Flex application
Setting the layout property
• The layout property defaults to your last selection when building an
application or component from the appropriate dialog box
– absolute: Visual elements must have specific x, y values or constraints
for positioning
– horizontal: Visual elements presented horizontally
– vertical: Visual elements presented vertically
• If the layout property is not used in the Application tag, the default layout is
vertical
56. Creating a simple Flex application
Adding UI Controls
• Used to display user interface type components in an application
– Text, text input, buttons, images, combo boxes etc
– Add between the application tag set or another container component
• Example of the Label control to display a single line of text
<mx:Label text=:Hello Flexers!” />
57. Creating a simple Flex application
Specifying components properties
Component properties can be specified in two ways
• As an attribute of the XML tag
<mx:Label text=“Hello” />
• As nested tags or nodes
<mx:Label>
<mx:text> Hello</mx:text>
</mx:Label>
58. Creating a simple Flex application
Commenting you MXML code
Use XML style comments which is similar to HTML comments
<! - - this is my comment - - >
60. Displaying images
• Use the Image control to incorporate
• JPEG (non progressive)
• GIF (can be transparent)
• PNG (can be transparent)
• SWF
• SVG (can only be embedded at compile time)
61. Displaying images
Methods for displaying images
• Two ways to display images
– Load them dynamically at runtime
– Embed them in SWF file
• Specify image source in three ways
– Via source property of an Image control ; will load image dynamically at
runtime
– Use Image load() method to add the images dynamically at runtime
– Embed them in the SWF at compile time using the @Embed directive;
useful when you need instantaneous loading and offline application
62. Displaying images
Loading dynamically at runtime
• Specify the image using the source attribute of the <mx:Image> control
• Image is loaded at runtime
<mx:Image source=“myimage.jpg” />
• Assign an id to the image to reference in ActionScript
<mx:Image source=“myimage.jpg” id=“imageID” />
63. Displaying images
• Using the load() method
• Dynamically switch out the image using the load() method of the Image
class
<mx:Image source=“addis.jpg” id=“imageID” width=“250” height=“250” />
<mx:Button label=“Change pic” click=“imageID.load(‘flower.jpg’)” />
64. Displaying images
Embedding images at compile time
• You can embed images at compile time for instantaneous loading
• To embed, use the @Embed directive when specifying the image source
<mx:Image source=@Embed(‘../images/myImage.jpg’)” />
65. Displaying images
Pros of embedding image
• Image is available immediately, it is part of the SWF
• Very useful for creating application that are able to work offline
Cons of embedding images
• Adds to applications SWF size
• Slows down application initialization process
• Must recompile application every time image changes
• Cannot use in data binding calls
67. Laying out Flex application with
containers
• A Container defines the rectangular region of the drawing surface of adobe
flash player
• Within a container, you define the components, both controls and
containers, that you want to appear within the container
• Components defined within a container are called children of the container
• At the root of a Flex application is a single container, called the Application
container, that represents the entire Flash Player drawing surface.
• This Application container holds all other containers and components.
• A container has predefined rules to control the layout of its children,
including sizing and positioning
68. Laying out Flex application with
containers
How containers work
• Containers use a set of layout rules to position components
– Keeps you from having to worry about positions
– Allows resizing/re-positioning with browser window size
70. Laying out Flex application with
containers
Box Containers
There are two types of Box containers available to layout your pages
• Vertical box (VBox)
• Horizontal box (HBox)
71. Laying out Flex application with
containers
VBox
The VBox layout allows you to display controls vertically, as in the image below
<mx:VBox>
<mx:Label text="label in a VBox" />
<mx:Button label="Click me" />
<mx:Label text="another label" />
</mx:VBox>
72. Laying out Flex application with
containers
HBox
The HBox layout enables you to lay out your controls horizontally, as in the
following image
<mx:HBox>
<mx:Label text="label in a HBox" />
<mx:Button label="Click me" />
<mx:Label text="another label" />
</mx:HBox>
73. Laying out Flex application with
containers
Canvas container
• The Canvas container is a basic component that enables you to specify absolute
positions
• You can use absolute positioning by specifying x and y properties of the components
inside the container
<mx:Canvas>
<mx:Label x=“20” y=“10” />
<mx:Label x=“100” y=“10” />
</mx:Canvas>
• Canvas containers can offer better performance, because client processing power
does not have to be used in order to determine object placement
74. Laying out Flex application with
containers
Specifying positions in a Canvas container
• As stated, you must specify the x and y properties of all the child
components inside the container; the origin is the top-left corner of the
canvas.
• This a/y positioning is only valid for components on the canvas, not for
components inside child containers
0,0 point
Value, 0
0, Value
76. Using Panel container
• The Panel container
• Wraps self-container application modules
• includes a panel title, a title bar, a status message and a content area for its
children
• It is represented in MXML with the Panel tag
Application layout=“horizontal”
Panel Panel Panel
78. Using Panel container
Using the Panel tag
<mx:Panel title=“Panel title” status=“Panel status”>
…………
</mx:Panel>
Characteristics:
• Defaults its width and height properties to value that accommodate all
children, but will not be larger than allowed by its parent container
• Truncates content that is too large and implements scroll bar as appropriate
• Has layout property, like the Application container which can take values
absolute, vertical (default) and horizontal
• Has default padding values of 0 pixels
79. Using Panel container
Sizing container content
• The size of any content placed within a container is relative to that
container, not the main Application area.
• If the child is sized larger than the parent container, then it will be resized
down to fit into the parent container
80. Panel width set to 600
Text width set to 100%
relative to Panel
Panel width set to 500
Text width set to 600 and
will automatically be resized
to fit the panel
82. Using ControlBar container
The ControlBar container
• Holds components that can be shared by the other children in the Panel and
TitleWindow container
• Must be the last child of the Panel or TitleWindow container
• Is a subclass of the Box class and therefore inherits the layout
characteristics of the Box container
• Has a direction property to determine either vertical or horizontal layout of
the child components
• Defaults it width and height properties to values that accommodate all
children, but will not be larger than allowed by its parent container
83. Using ControlBar container
• Has default padding value of 10 pixels
• Had horizontalAlign and VerticalAlign properties to control the positioning of
the child components
• Had verticalGap and horizontalGap properties to set the spacing between
children
<mx:ControlBar width=“100”>
<mx:Label text=“Quantity” />
<mx:NumericStepper id=“myNS” />
<mx:Spacer width=“100%”/>
<mx:Button label=“Add to Cart” click=“addToCart();” />
</mx:ControlBar>
86. Adding user interface controls
• Controls are user interface components such as Button, TextArea,
ComboBox, TextInput
• Controls are placed inside the containers
• typically you define container and then insert controls or other containers
inside it.
87. The following image shows several controls used in a Form container:
A. Form container B. TextInput controls C. ComboBox control D. Button control
88. Adding user interface controls
• Text controls
• Menu based controls
• Data Driven controls
89. Alert Displays a pop-up alert
Button Displays a variable-size button that can include a label, an
icon image, or both.
ButtonBar Displays a row of related buttons with a common
appearance.
CheckBox Shows whether a particular Boolean value is true
(checked) or false (unchecked).
ComboBox Displays a drop-down list attached to a text field that
contains a set of values.
ColorPicker Displays a selectable drop-down color swatch panel
(palette).
DataGrid Displays data in a tabular format.
DateChooser Displays a full month of days to let you select a date.
DateField Displays the date with a calendar icon on its right side.
HorizontalList Displays a horizontal list of items.
HRule/VRule Displays a single horizontal rule (HRule) or vertical rule
(VRule).
90. HSlider/VSlider Lets users select a value by moving a slider thumb
between the end points of the slider track.
Image Imports GIF, JPEG, PNG, SVG, and SWF files.
Label Displays a noneditable single-line field label.
LinkBar Displays a horizontal row of LinkButton controls that
designate a series of link destinations.
LinkButton Displays a simple hypertext link.
List Displays a scrollable array of choices.
Menu Displays a pop-up menu of individually selectable choices,
much like the File or Edit menu of most software
applications.
MenuBar Displays a horizontal menu bar that contains one or more
submenus of Menu controls
NumericStepper Displays a dual button control that you can use to increase
or decrease the value of the underlying variable.
ProgressBar Provides visual feedback of how much time remains in the
current operation.
RadioButton Displays a set of buttons of which exactly one is selected
at any time.
91. RadioButton Displays a group of RadioButton controls with a single click
Group event listener.
RichTextEditor Includes a multiline editable text field and controls for
specifying text formatting.
ScrollBar Displays horizontal and vertical scroll bars.
(HScrollBar and
VScrollBar)
SWFLoader Displays the contents of a specified SWF file or JPEG file
TabBar Displays a horizontal row of tabs.
Text Displays a noneditable multiline text field.
TextArea Displays an editable text field for user input that can accept
more than a single line of input.
TextInput Displays an editable text field for a single line of user input.
Can contain alphanumeric data, but input is interpreted as
a String data type.
TileList Displays a tiled list of items. The items are tiled in vertical
columns or horizontal rows.
ToggleButtonBar Displays a row of related buttons with a common
appearance.
Tree Displays hierarchical data arranged as an expandable tree.
92. Creating data binding between
components
• Data binding is the process of tying or binding data of one object to another
• Data biding requires a source property, a destination property and a
triggering event that indicates when to copy data from source to destination
• There are two ways to perform a binding
– Curly braces syntax { }
– <mx:Binding> tag
93. Creating data binding between
components
Creating Data binding
• Using curly braces syntax
– Assigns a property a dynamic literal value
– Uses a broadcast/listener method
<mx:Label id=“labelOne” text=“Hello” />
<mx:Label id=“labelTwo” text=“{labelOne.text}” />
94. Creating data binding between
components
• Using <mx:Binding> tag
<mx:Label id=“labelOne” text=“Hello” />
<mx:Label id=“labelTwo” />
<mx:Binding source=“labelOne.text” destination=“labelTwo.text” />
97. View States
In this section, you will learn to customize the look and feel of flex applications
with styles, behaviors and transitions. You will also learn to use different types
of themes.
98. View States
Objectives
After completing this unit, you shall be able to:
• Create view states using flex builders design mode
• Create view state using MXML
• Trigger state changes based on use events
99. View States
Topics
In this unit, you will learn the following:
• Understanding view states
• Controlling view states
• Reviewing the generated MXML code
100. Understanding view states
• A view state defines a particular view of a component
• View state define distinct presentation layouts within the same application
• Each distinct layout is called a state
• User or system events are used to change states
101. Understanding view states
Creating view states
• Create a base state, which is default layout of the application
• Modify the base state or another state to create additional states
– Can modify, add or delete components in each state
– Can modify component property
– Can change styles
• Create events to trigger switching states
102. Understanding view states
Benefits of using view states
• Flex manages the switching of states
• Components can be shared across multiple view states
• Components can be added, removed or modified easily
103. Understanding view states
Creating a new state
• To manage and create state we need 2 states
– Base state
– New state
• Base state is the current view of state of any application
• On any event triggered, the state changes from base state to new state.
104. This is my base state
Change state on click of this linkButton
105. In Design mode, click the New State button in the States view (Window > States).
108. Understanding view states
• State implementation details
• To change state, set the currentState property value to the name of the
state to switch to
• Flex figures out everything that needs to change between any to states
• Setting currentState
– Setting currentState property of the Application tag sets the initial state
to one another.
– A components currentState property specifies its view state
– To specify the base state, set currentState equal to an empty string
109. Understanding view states
<mx:Button id=“b1” label=“Add a button” click=“currentState=‘forms’” />
<mx:Button id=“b2” label=“Remove button” click=“currentState=‘ ’” />
110. On click event the changeState will
trigger the new forms state view
111. On click event the changeState will
trigger the base state view
112. Understanding view states
The following table shows the classes that you use to create states
AddChild and Adds or removes a child component as part of a change
RemoveChild of view state.
SetEventHandler Adds an event handler as part of a change of view state.
SetProperty Sets a component property as part of a change of view
state.
SetStyle Sets a style property on a component as part of a
change of view state
114. Reviewing the generated MXML
code
The MXML tag used to manage the view states are
• The states tag – wraps all of the state in single block of code
• The State tag – wraps the details of one individual state
• The AddChild tag – nested within the State tag to instruct that a component
has to be added to the Base state when creating the current state
• The RemoveChild tag – nested within the state tag to instruct that a
component has to be removed from the Base state.
• The SetProperty tag – nested within the State tag. Use it to change a
property of a component in the current state that originally was created in
another state
• The SetEventHandler tag – nested within the State tag to set event
handlers which are only active during a particular view state
118. Application navigation
In this section, you will learn how to implement and manipulate navigation
containers individually and relative to one another. You will also learn how
navigator and layout containers interact
119. Application navigation
Objectives
After completing this unit, you shall be able to:
• Understand what navigator container are and how to create them
• Navigate the ViewStack container with LinkBar, TabBar controls
120. Application navigation
Topics
In this unit, you will learn the following:
• Understanding navigator containers and controls
• Using the LinkBar control
• Using the TabBar control
• Using the ViewStack container
• Using the TabNavigator container
• Using the Accordion container
121. Understanding navigator containers
and controls
There are two types of containers
• Layout container - Control the sizing and positioning of the child element
within them
• Navigator container – Control user movement, or navigation among multiple
child containers
122. Understanding navigator containers
and controls
Navigator container basics
• The direct children of a navigator container must be containers, either layout
or navigator container
• Typical properties of a container tag include id, width and height.
• Navigator container and their children
• Only ViewStack, TabNavigator and Accordion containers have child
containers that you can layout.
• LinkBar, ButtonBar, TabBar navigator controls do not have child containers.
Instead they enable users and code to control the currently active child
container of ViewStack container.
123. Using the LinkBar control
• The LinkBar control
• Defines a horizontal row of linkButton controls
• Is a navigator container with built-in logic to switch between children of a
ViewStack container
• Has a width that is wide enough to contain all label text plus separators and
necessary padding
• Has a height that accommodate the tallest child element
• Has default padding value of 2 pixels on all sides
• Is represented in MXML with the <mx:LinkBar> tag
124. Using the LinkBar control
<mx:LinkBar>
<mx:dataProvider>
<mx:String>Home</mx:String>
<mx:String>Contact Us</mx:String>
<mx:String>Special Events</mx:String>
<mx:String>Restaurant Menu</mx:String>
</mx:dataProvider>
</mx:LinkBar>
125. Using the TabBar control
• The TabBar control
• Defines a horizontal (default) or vertical rows of tabs
• Has default padding value of 0 pixels on all sides
• Is represented in MXML using <mx:TabBar> tag
126. Using the TabBar control
<mx:TabBar labelField="menuName">
<mx:dataProvider>
<mx:Object menuName="Home" />
<mx:Object menuName="Contact Us" />
<mx:Object menuName="Special Events"/>
<mx:Object menuName="Resturant Menu" />
</mx:dataProvider>
</mx:TabBar>
127. Using the ViewStack control
The ViewStack container
• Is made up of a collection of child containers that are stacked on top of each
other, with one container visible or active at a time.
• The ViewStack container does not define a built-in mechanism for users to
switch the currently active container
• you must use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control or
build the logic yourself in ActionScript to let users change the currently
active child.
• Is represented in MXML with the <mx:ViewStack> tag
132. Using TabNavigator container
• The TabNavigator works the same way as ViewStack.
• Has its own child so no need to provide ViewStack or dataProvider
• Defines a horizontal row of tabs
• Display one child at a time, in order they are defined
• Had default padding value of 2 pixels on all side
• Is represented in MXML with <mx:TabNavigator> tag
135. Using Accordion container
• The Accordion works the same way as ViewStack.
• Has its own child so no need to provide ViewStack or dataProvider
• Defines vertically stacked panels that animate as they open and close
• has its own child content
• Has default padding value of 2 pixels on all side
• Is represented in MXML with the <mx:Accordion> tag
140. Styling your Application with CSS
In this section, you will learn to customize the look and feel of flex applications
with styles, behaviors and transitions. You will also learn to use different types
of themes.
141. Styling your Application with CSS
Objectives
After completing this unit, you shall be able to:
• Modifying the default Flex application style
• Add animations to components using triggers and effects
• Add animation to view state transitions
142. Styling your Application with CSS
Topics
In this unit, you will learn the following:
• Customizing Flex application look and feel
• Modifying Flex styles to change the look and feel
• Using themes
• Applying behaviors to components
• Applying transitions to view state changes
143. Customizing Flex application look
and feel
• You can modify almost every aspect of the look and feel and user
interaction of your application by using these features of flex
– Component sizes- height and width.
– Graphical display – characteristic like color, font size, border, width, text
alignment, corner radius setting etc
– Dynamic effects – animations or sound
– Fonts – default embedded text character sets
144. Customizing Flex application look
and feel
About CSS styles in Flex
• You can use CSS styles to modify your Flex user interface more efficiently.
• CSS styles in Flex can be defined at the site level with external styles, at the
document level with embedded styles, or at the component level with inline
styles.
• Flex uses slightly different names for multi-word CSS property names such
as font-family or font-size.
• Hyphens are removed, the letter following each hyphen is capitalized, and
equal signs instead of colons are used for property values.
145. Customizing Flex application look
and feel
External Styles
• External styles are defined in a separate file and can be used in any
MXML file that references the CSS file.
• You reference a CSS file into an MXML file with the source property of the
<mx:Style> tag, as follows:
• <mx:Style source="../siteStyles.css"/>
146. Customizing Flex application look
and feel
Embedded Styles
• Embedded styles are defined in an MXML file and can only be used in that
file. Embedded styles are defined with the <mx:Style> tag, as follows:
<mx:Style>
.myclass { background-color: xFF0000 }
TextInput { font-family: Helvetica; font-size: 12pt }
</mx:Style>
• Once defined, you can apply the myclass style to any component using the
styleName property, as in the following example:
<mx:Button styleName="myclass">
147. Customizing Flex application look
and feel
Inline Styles
• Inline styles are defined in an MXML tag and can only be used in that tag.
Inline styles are defined as follows:
<mx:Button color="red"...>
148. Customizing Flex application look
and feel
Changing flex control style defaults – skins
• Skins are graphics displayed on components
– for example, the down arrow of the ScrollBar component is made up of
three skins – ScrollDownArrowDisabled, ScrollDownArrowUp,
ScrollDownArrowDown
– Some components share skins. For example components that use scroll
bars – including all containers share their skin with the ScrollBar
component
• Styles are defined on components. You can customize these styles
149. Modifying styles to change the look
and feel
• Flex provides several ways of setting component styles
• Using MXML component properties
• Calling the setStyle() method in ActionScript
• Using Cascading style sheets (CSS)
• Setting global styles
• Implementing built in theme styles
150. Modifying styles to change the look
and feel
Setting styles inline using MXML component attributes
• You have already set some styles for components by specifying values for
attributes in MXML components
• <mx:Text text=“Appetizers” color=“#dd7142” />
151. Modifying styles to change the look
and feel
Setting style in ActionScript for individual components using the setStyle()
method
emailButton.setStyle(“ontSize”, 15);
152. Modifying styles to change the look
and feel
Setting style using Cascading style sheets (CSS)
• Creating CSS type selectors
– Type selectors assign styles to all instances of a particular type
– Within the Style container, name MXML component and define its styles
– Use a comma-separated list of components to set the same style to all
specified components types
<mx:Style>
TextArea { backgroundColor: “#cccccc”}
Button, TextInput, Label { font-style: Italic}
</mx:Style>
<mx:TextArea id=“message” />
153. Using themes
• Flex provides several themes that can be applied to the overall application
• Use the themeColor style to set the theme color to any color or to a halo
color (haloGreen, haloBlue, haloSilver, haloOrange)
<mx:Application themeColor=“haloBlue” >
155. Applying behaviors to components
• A behavior is a combination of a trigger paired with an effect
• Behaviors let you add animation and motion to your application components
in response to some user or programmatic action.
• For example, you can use behaviors to cause a dialog box to bounce
slightly when it receives focus, or to play a sound when the user enters an
invalid value.
• You build behaviors into your applications by using MXML and ActionScript
156. Applying behaviors to components
Understanding behaviors basics
• Behavior has two parts
– A trigger – an action, such as user clicking on a button, a component
gaining focus or becoming invisible
• You can define multiple effects for a single trigger.
– An effect – a visible or audible change to the component occurring over
a period of time such as fade effect
157. Applying behaviors to components
About applying behaviors
• Apply simple behavior by setting the trigger name property of the
component to the name of the effect class
• <mx:Button id=“sendButton” label=“send message”
mouseDowneffect=“fade” />
158. Applying behaviors to components
• Apply a simple behavior by setting the trigger name property of the
component to the name of the effect class
<mx:Button id=“sendButton” label=“Send Message”
mouseDownEffect=“Fade” />
159. Applying behaviors to components
• Define a reusable effect instance
– First use the MXML component for the effect
<mx:Fade id=“fadeEffect” />
– Then apply the effect to the targets using data binding
<mx:Button id=“sendButton” label=“Send Message”
mouseDownEffect=“{fadeEffect}” />
<mx:Button id=“requestButton” label=“Request broucher”
mouseDownEffect=“{fadeEffect}” />
162. Working with Datagrid
• The DataGrid control is a list that can display more than one column of
data
• It is a formatted table of data that lets you set editable table cells, and is
the foundation of many data-driven applications.
163. Working with Datagrid
The DataGrid control provides the following features:
• Resizable, sortable, and customizable column layouts, including hidable
columns
• Optional customizable column and row headers, including optionally
wrapping header text
• Columns that the user can resize and reorder at run time
• Selection events
• Ability to use a custom item renderer for any column
• Support for paging through data
• Locked rows and columns that do not scroll
164. Working with DataGrid
Creating a DataGrid control
• You use the <mx:DataGrid> tag to define a DataGrid control in MXML
• Specify an id value if you intend to refer to a component elsewhere in your
MXML, either in another tag or in an ActionScript block
• The DataGrid control uses a list-based data provider
• You can specify data in several different ways.
• In the simplest case for creating a DataGrid control, you use the
<mx:dataProvider> property subtag with <mx:ArrayCollection>, and
<mx:Object> tags to define the entries as an ArrayCollection of Objects.
165. Working with DataGrid
<mx:DataGrid>
<mx:ArrayCollection>
<mx:Object>
<mx:Artist>Pavement</mx:Artist>
<mx:Price>11.99</mx:Price>
<mx:Album>Slanted and Enchanted</mx:Album>
</mx:Object>
<mx:Object>
<mx:Artist>Pavement</mx:Artist>
<mx:Album>Brighten the Corners</mx:Album>
<mx:Price>11.99</mx:Price>
</mx:Object>
</mx:ArrayCollection>
</mx:DataGrid>
167. Specifying columns
Specifying columns
• Each column in a DataGrid control is represented by a DataGridColumn
object
• You use the columns property of the DataGrid control and the
<mx:DataGridColumn> tag to select the DataGrid columns, specify the
order in which to display them, and set additional properties.
• You can also use the DataGridColumn class visible property to hide and
redisplay columns