1. 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

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

2. 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

3. 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

4. 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

5. 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

6. 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

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

8. 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

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

9. 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

Passing UI components in the data provider

Rendering visual controls

Mixing data item types

Walkthrough 2: Using the DefaultComplexItemRenderer

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

Walkthrough 3: Creating a custom item renderer with data

Using the SkinnableDataContainer

Implementing the SkinnableDataContainer

Creating the skin component

Walkthrough 4: Applying a skin to the SkinnableDataContainer