Flex 4: Developing Rich Client Applications
3-day instructor led course - € 1.750

This is a hands-on introduction to developing Rich Internet Applications (RIAs) for the Adobe Flash Platform using the Adobe Flex 4 framework. Emphasized topics include:

• Custom components and layout control
• Handling and extending events
• Validating and formatting data
• Navigation, animation, and visual state control
• Text and style control
• Spark component skinning
• Introduction to remote data access
• Working with typed data in DataGroup and DataGrid components
• Deploying Flex applications over the web and on AIR

Audience

Developers wishing to build rich Internet applications in Flex

Prerequisites

Programming and XML experience

Course Outline

Introducing the Course

Introducing mastery learning
Understanding the course format
Reviewing the course prerequisites
Reviewing the course outline

Introducing Adobe Flex 4

Introducing the Adobe Flash Platform

Introducing the technologies
Building Flex applications
Experiencing web and desktop applications
Learning more about Flex

Understanding Flex development technologies

Understanding the Flex framework, SDK and tool
Understanding Adobe Flash Builder 4

Understanding Flex application deployment
Exploring the Flash Builder interface

Grouping projects with workspaces
Understanding the workbench
Understanding editors
Understanding views
Understanding perspectives
Adding and configuring components in Design mode

Creating a Flex project

Using the New Flex Project wizard

Understanding Flex 4 Fundamentals

Understanding Adobe Flex namespaces

Understanding how namespaces translate into Flex libraries

Understanding Flex components

Assigning component properties

Laying out and styling with Flash Builder

Setting component properties
Setting styles using a CSS style sheet

Compiling and running an application

Compiling the application
Running the application

Creating custom components

Controlling component layout in containers
Defining and using a custom component

Introducing skinning

Defining a skin class
Applying a skin class

Accessing and using structured data within a custom component

Declaring non-visual objects in MXML
Defining inline event handlers
Generating event handler functions

Introducing data binding

Implementing data binding
Declaring and using bindable properties
Passing data to an embedded control through a custom component property

Updating visual controls using dynamic data

Capturing the current item in a list control
Using data binding to dynamically update visual controls
Adding and removing event listeners using ActionScript

Introducing Object Oriented Programming

Introducing OOP terminology

Understanding classes
Understanding instances and objects
Understanding class relationships

Understanding MXML classes

Exploring the Flex framework classes
Creating class instances
Extending the Flex framework classes

Creating a class property

Creating the property
Controlling access
Creating and using a public property

Writing a class definition in ActionScript

Creating a class
Packaging a class
Naming a class
Understanding the constructor
Creating class properties
Assigning property values through the constructor
Making properties or classes bindable

Creating instances of an ActionScript class
Creating class methods

Understanding Components and Layouts

Introducing visual components

Introducing Spark vs MX components
Understanding components

Introducing Spark layout classes

Defining the layout property
Understanding the BasicLayout class
Understanding the HorizontalLayout class
Understanding the VerticalLayout class
Understanding the TileLayout class
Custom layout classes

Introducing the Spark container classes

Understanding how the containers work
Understanding the Spark containers
Reviewing the Application container
Introducing the Group container
Introducing the Panel container
Sample application layout
Introducing the BorderContainer

Using constraints to control component layout

Understanding constraint-based layout basics
Rules to control component layout
Constraint-based vs. traditional container layout
Visually assigning anchors

Adding scrollbars to containers

Implementing the Scroller class

Handling Events

Understanding events

Handling Framework events
Handling user events

Implementing event handlers

Using inline ActionScript in MXML

Creating ActionScript event handler functions

Defining a function in an MXML document
Creating functions in external files

Understanding the event object

Introducing the event object
Exploring event object properties
Datatyping the event object

Understanding event bubbling

Distinguishing currentTarget and target
Introducing event bubbling

Adding event listeners with ActionScript

Validating and Formatting Data

Using the Form container

Introducing the Form components
Using form components
Using the FormItem container
Creating a Form custom component

Using formatters

Using formatters

Validating form data

Creating a Validator with MXML
Creating a Validator with ActionScript
Handling Required Values

Triggering validation with events

When validation fails
Using the NumberValidator Class

Triggering validation with ActionScript

Suppressing automatic validation
Using the validate() method
Triggering multiple validators

Controlling Navigation

Understanding MX navigator containers

Controlling container display
Introducing the MX navigator containers

Using the ViewStack container

Understanding ViewStack basics
Navigating with the LinkBar control
Navigating with the TabBar control
Displaying and resizing the ViewStack child containers
Deferring instantiation of ViewStack child containers

Using a Spark container inside MX navigator containers

Creating custom navigation for the ViewStack container

Setting the active ViewStack child container
Enabling buttons dynamically

Using the TabNavigator container
Using the Accordion container

Controlling Application State

Understanding view states

Introducing view states
Creating view states in Design mode
Creating view states with code

Controlling view states

Introducing the currentState property
Switching between states

Animating Components and States

Applying effects to components

Interacting with users using animated effects
Understanding effect basics
Reviewing available effects
Defining an effect
Playing an effect

Creating composite effects
Applying transitions to application state changes

Creating transitions

Adding and removing components during animations

Controlling Visual Display with Styling

Creating global application styles

Generating the styles using the Appearance view in Design mode
Flash Builder automatically creates CSS file
Global vs Application selector

Defining styles and skins for components

Creating Flex component selectors
Create custom component selectors
Applying a component skin via CSS

Introducing Advanced CSS selectors

Descendent selector
id selector
Class selector
Pseudo selector

Skinning Spark Components

Introducing skinning

Understanding Spark skins
Setting styles inline in the MXML tags
Introducing the skinnable Spark container classes
Creating a skin for Spark components

Incorporating visual elements drawn in other programs

Introducing FXG

Changing the default display of skin parts

Reviewing the contentGroup skin part for containers
Understanding a Button control’s skin part
Understanding the Panel container’s skin parts
Finding skin parts for any component
Choosing a component to display the skin part

Implementing Advanced Skinning Techniques

Implementing different visual states for a skin

Understanding skin states in Button component
Assigning properties for each state
Animating the button states

Accessing custom component properties from a skin

Defining the custom property in the custom component
Creating the skin and component contract
Referencing the properties in the skin

Adding scrollbars to skins

Using the Scroller with nonskinnable containers
Using the Scroller with skinnable containers

Accessing Remote Data

Using HTTPService to load remote data

Using the HTTPService class
Process for making HTTP requests
Retrieving data with lastResult
Understanding the ArrayCollection results
Using results in data bindings

Handling returned data and faults

Handling results
Handling faults
Displaying messages with an Alert pop-up
Using result and fault handlers example

Making HTTP requests with parameters

Using explicit parameter passing
Using parameter binding

Using the wizards

Understanding the CallResponder class
Creating a master/detail form

Creating a Typed Data Model

Understanding the need for a typed data model

Working with a model of generic data
Creating a model of typed data
Understanding value objects
Creating value objects

Creating an ActionScript class for typed data

Reviewing classpaths and packages
Creating class files
Defining class access modifiers
Creating class constructors
Defining class properties
Instantiating an ActionScript class

Populating an ArrayCollection with value objects

Comparing ArrayCollection with ArrayList

Understanding data bindings with value objects

Making ActionScript class properties bindable
Binding the view to the model
Binding two-way

Refactoring value objects

Downcasting object references

Extending Events

Understanding the problem with bindings

The problem of using bindings
Creating loosely coupled components

Defining the event type

Defining the event in the dispatching component
Triggering the event from a user or system event
Instantiating the event
Dispatching the event to the main application

Handling the event in the main application
Extending the Event class

Creating the extended class
Extending the Event class
Adding properties
Creating the constructor

Using the extended event class

Using the Metadata compiler directive
Dispatch the extended event
Handling the event in the main application

Dispatching a value object with the extended event

Accommodating a value object in the extended event

Overriding the clone method

Passing a parameter to toggle event bubbling

Rendering Content with the DataGroup Container

Displaying string data in an item renderer

Understanding DataGroup container basics
Implementing the DataGroup container
Using the default item renderer

Passing UI components in the data provider

Rendering visual controls
Mixing data item types

Creating a custom item renderer

Understanding the limits of the default item renderer
Creating a custom item renderer
Creating a nested item renderer
Referencing an external item renderer class
Using data in an item renderer

Using the SkinnableDataContainer

Implementing the SkinnableDataContainer
Creating the skin component

Displaying Data Using the DataGrid

Using the DataGrid control

Supplying data to a DataGrid control

Specifying DataGrid control columns
Formatting DataGrid control columns

Creating reusable label functions

Using item renderers and item editors

Understanding Item renderers versus item editors
Introducing the types of item renderers and item editors

Inline item renderers and item editors
Item renderer and item editor components

Using Spark components in <mx:DataGrid> item renderers

Using events and selected items with a DataGrid component

Deploying Flex and AIR Applications

Compiling the Flex application

Compiling automatically
Modifying compiler settings
Embedding the SWF in the HTML wrapper
Understanding the runtime shared libraries

Creating a Flex application production build

Creating a release build

Creating a desktop application

Creating an AIR project
Understanding some differences between Flex and AIR applications
Exporting a release build

Appendix A: Student Setup Guide

System Requirements

Machine requirements
Software Requirements

Setup Instructions

Installing Flash Builder 4
Installing the Course Files