Introducing the Course

Introducing mastery learning

Understanding the course format

Reviewing the course prerequisites

Reviewing the course outline

Introducing Adobe Flex 4.5

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

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

Walkthrough 1: Creating a main application file and running it

Understanding Flex 4.5 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

Walkthrough 1: Creating an application and configuring its controls in Design mode

Creating custom components

Controlling component layout in containers

Defining and using a custom component

Introducing skinning

Defining a skin class

Applying a skin class

Walkthrough 2: Creating and skinning custom components

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

Walkthrough 3: Accessing and using structured data in a custom component

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

Walkthrough 4: Updating visual controls with dynamically assigned data

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

Walkthrough 1: Using MXML classes

Creating a class property

Creating the property

Controlling access

Creating and using a public property

Walkthrough 2: Creating a class 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

Walkthrough 3: Creating an ActionScript class

Creating instances of an ActionScript class

Walkthrough 4: Creating instances of an ActionScript class

Creating class methods

Walkthrough 5: Creating a class method

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

Walkthrough 1: Using layout classes in an Application container

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

Walkthrough 2: Using different containers with layouts

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

Walkthrough 3: Implementing a constraint based layout

Adding scrollbars to containers

Implementing the Scroller class

Walkthrough 4: Using a Scroller

Handling Events

Understanding events

Handling Framework events

Handling user events

Implementing event handlers

Using inline ActionScript in MXML

Walkthrough 1: Using inline ActionScript for event handling

Creating ActionScript event handler functions

Defining a function in an MXML document

Creating functions in external files

Walkthrough 2: Using a function for an event handler

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

Walkthrough 3 Using the event object

Adding event listeners with ActionScript

Walkthrough 4 Using the addEventListener method

Using the Form container

Introducing the Form components

Using form components

Using the FormItem container

Creating a Form custom component

Walkthrough 1: Using a form

Customizing the FormItem container display

Using sequence labels

Using help content

Using prompts with text controls

Using a custom required icon

Displaying the Spark Form in a stacked layout

Creating a Form with the stacked layout using CSS

Walkthrough 2: Customizing the Spark form

Validating and Formatting Data

Using formatters

Introducing MX formatters

Introducing Spark formatters

Defining formatters

Using formatters

Walkthrough 1: Formatting currency

Validating form data

Introducing MX validators

Introducing Spark validators

Creating a Validator with MXML

Creating a Validator with ActionScript

Handling Required Values

Triggering validation with events

When validation fails

Using a custom error icon

Using the NumberValidator Class

Walkthrough 2: Validating Numeric Input

Triggering validation with ActionScript

Suppressing automatic validation

Using the validate method

Triggering multiple validators

Walkthrough 3: Triggering Validation with ActionScript

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

Walkthrough 1: Navigating using the ViewStack and TabBar control

Creating custom navigation for the ViewStack container

Setting the active ViewStack child container

Enabling buttons dynamically

Using the TabNavigator container

Using the Accordion container

Walkthrough 2: Navigating using the TabNavigator and Accordion containers

Controlling Application State

Understanding view states

Introducing view states

Creating view states in Design mode

Creating view states with code

Walkthrough 1: Creating multiple states

Controlling view states

Introducing the currentState property

Switching between states

Walkthrough 2: Controlling view states using MXML

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

Walkthrough 1: Applying an effect to a component

Creating composite effects

Walkthrough 2: Creating parallel and sequential effects

Applying transitions to application state changes

Creating transitions

Adding and removing components during animations

Walkthrough 3: Animating between states

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

Walkthrough 1: Creating global styles

Defining styles and skins for components

Creating Flex component selectors

Create custom component selectors

Applying a component skin via CSS

Walkthrough 2: Creating selector styles and skins

Introducing Advanced CSS selectors

Descendent selector

id selector

Class selector

Pseudo selector

Walkthrough 3: Using advanced CSS selectors

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

Walkthrough 1: Creating and applying skins

Incorporating visual elements drawn in other programs

Introducing FXG

Walkthrough 2: Using a shape drawn in Adobe Illustrator

Changing the default display of skin parts

Reviewing the contentGroup skin part for containers

Understanding a Button control skin part

Understanding the Panel container skin parts

Finding skin parts for any component

Choosing a component to display the skin part

Walkthrough 3: Creating a vertical header for the Spark Panel container

Implementing Advanced Skinning Techniques

Implementing different visual states for a skin

Understanding skin states in Button component

Assigning properties for each state

Adding transitions in skin states

Animating the button states

Walkthrough 1: Creating animated states in a Button control skin

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

Walkthrough 2: Implementing a skin on multiple instances with different properties

Adding scrollbars to skins

Using the Scroller with nonskinnable containers

Using the Scroller with skinnable containers

Walkthrough 3: Making a component scrollable using a skin

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

Walkthrough 1: Creating an HTTPService request and using the lastResult property

Handling returned data and faults

Handling results

Handling faults

Displaying messages with an Alert popup

Using result and fault handlers example

Walkthrough 2: Using result and fault handlers

Making HTTP requests with parameters

Using explicit parameter passing

Using parameter binding

Walkthrough 3: Making HTTP requests with parameters

Using the wizards

Understanding the CallResponder class

Creating a master detail form

Walkthrough 4: Using the wizards

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

Walkthrough 1: Creating a value object class

Populating an ArrayCollection with value objects

Comparing ArrayCollection with ArrayList

Walkthrough 2 Populating an ArrayCollection of value objects

Understanding data bindings with value objects

Making ActionScript class properties bindable

Binding the view to the model

Binding two way

Walkthrough 3: Implementing data bindings

Refactoring value objects

Downcasting object references

Walkthrough 4: Refactoring a value object

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

Walkthrough 1: Creating and dispatching an event

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

Walkthrough 2: Extending the Event class to dispatch the event object with data

Dispatching a value object with the extended event

Accommodating a value object in the extended event

Walkthrough 3: Dispatching a value object in the extended event

Overriding the clone method

Passing a parameter to toggle event bubbling

Walkthrough 4: Utilizing the clone method

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

Walkthrough 1: Using DefaultItemRenderer

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

...