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

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