Flex 4: Developing Rich Internet Applications (4 days)

This is a four day, 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


Developers wishing to build rich Internet applications in Flex


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