Flex 4: Extending and Styling Components

Course Description:

In the 2-day Flex 4: Extending and Styling Components course, students will use their object-oriented skills to create custom classes that programmatically draw skins and extend the functionality of built-in Flex classes. Experienced Flex developers will have an opportunity to explore hands-on, practical code examples for creating drag-and-drop user interfaces that also incorporate user-triggered transitions and smart components that resize based on available space. Other learning objectives include creating popups, embedding fonts, implementing custom application look-and-feel and positioning stage- and mouse-aware elements.

This course includes the following modules:

Introducing Flex: Extending and Styling Components

• Programming the Visual Experience
• Understanding Project Roles
• Introducing Mastery Learning
• Understanding the Course Format
• Reviewing the Course Prerequisites
• Reviewing the Course Outline

Embedding Images and Fonts

• Embedding Images at Compile-Time
• Layering Content Using Absolute Layout
• Creating a Reusable Embedded Image
• Creating Instances of an Embedded Image Class
• Understanding Device Font Limitations
• Embedding Fonts with Absolute File Paths
• Embedding Fonts using Adobe Flash

Modifying the Look and Feel of Flex Components

• Exploring Filters
• Applying Blends
• Modifying the Look-and-Feel of Flex Components using MXML Styles
• Modifying Graphical Skins using Flex Skin Design Extensions for CS3
• Installing the Flex Skin Design Extensions for Flash
• Selecting which component to modify in Flash
• Importing the Flex skins artwork

Creating Popups

• Creating a Popup Window
• Passing Data to the Popup Window

Extending Flex Components

• Exploring Display Object Basics
• Extending Flex Components
• Implementing the createChildren() Method
• Implementing the updateDisplayList() Method
• Improving Custom Component Reusability with Stylesheets

Drawing Shapes and Skinning Programmatically

• Understanding the Relationship Between Display List Objects and the Graphics Class
• Calling the clear() Method
• Drawing Lines
• Creating a Visual Element as an ActionScript Class
• Creating Shapes
• Defining Fill Methods
• Implementing a ButtonSkin from the mx.skins.halo Package
• Implementing a Programmatic Skin

Animating Components and View States

• Creating Behaviors in ActionScript
• Reviewing View States and Transitions
• Using the CurrentStateChange Event

Creating Mouse-Aware Applications

• Detecting the Mouse Position
• Detecting the Stage Dimensions

Implementing Drag and Drop Functionality

• Understanding the DragManager
• Specifying the Data to Display in a List Control
• Enabling Dragging on Non-List-Based Controls
• Controlling Dropping with Formats
• Handling Data in Drag and Drop Operations