Flex 3: Extending and Styling Components  (3 days)

Onsite and private classes available. Please enquire directly for details...

Description

In the Flex 3: 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.

Audience

To gain the most from this class, you should:

• Have attended the Flex 3: Developing Rich Client Applications course.
• Have equivalent knowledge of the topics covered in Flex 3: Developing Rich Client Applications.

This course targets experienced Adobe Flex developers who:

• Want to use the built-in Flex components as a basis for their own custom component development.
• Want to incorporate interactive, position- and size-aware elements into their applications.
• Need to skin Flex applications to meet corporate marketing demands.

Course Outline

Introducing Flex 3: 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-Time22
• Layering Content Using Absolute Layout27
• Creating a Reusable Embedded Image29
• Creating Instances of an Embedded Image Class30
• Understanding Device Font Limitations32
• Embedding Fonts with Absolute File Paths35
• Embedding Fonts using Adobe Flash39

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