Flex 3: Extending and Styling Components

Cost:

$795.00 (Online Class - Lodestone Live)
$995.00 (Lodestone Training Center) Classes Always Run!

Time: 10 AM - 4:30 PM EST
Length: 2 day class
Type: Instructor-led

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

Learning Objectives:

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 Application

Target Audience:

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:

Unit 1: 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
  • Walkthrough 1: Setting Up Application Files

Unit 2: Embedding Images and Fonts

  • Embedding Images at Compile-Time
  • Walkthrough 1: Adding Imagery to the Natural Experiences Application
  • Layering Content Using Absolute Layout
  • Walkthrough 2: Positioning the Flower Image over the Welcome Panel
  • Creating a Reusable Embedded Image
  • Creating Instances of an Embedded Image Class
  • Walkthrough 3: Embedding the Flowers using ActionScript
  • Understanding Device Font Limitations
  • Walkthrough 4: Learning the Limitations of Device Fonts
  • Embedding Fonts with Absolute File Paths
  • Walkthrough 5: Embed a Font by Reference to the File System
  • Embedding Fonts using Adobe Flash
  • Walkthrough 6: Creating the Text Logo using a Embedded Flash Font

Unit 3: Modifying the Look and Feel of Flex Components

  • Exploring Filters
  • Walkthrough 1: Add Filters to the Natural Experiences Text Logo
  • Applying Blends
  • Walkthrough 2: Add a Blend to the Experience Font
  • Modifying the Look-and-Feel of Flex Components using MXML Styles
  • Walkthrough 3: Modifying the Natural Experiences Application using MXML Styles
  • Modifying Graphical Skins using Flex Skin Design Extensions for CS3
  • Walkthrough 4: Using Flex Skin Artwork Created in Flash CS3

Unit 4: Creating Popups

  • Creating a Popup Window
  • Walkthrough 1: Creating the TitleWindow and Gallery Popup
  • Passing Data to the Popup Window
  • Walkthrough 2: Passing Data to the Gallery Popup

Unit 5: Extending Flex Components

  • Exploring Display Object Basics
  • Extending Flex Components
  • Walkthrough 1: Creating an Extended Component
  • Creating a constraint-based layout using Flex Builder
  • Walkthrough 2: Adding Custom Buttons to the scrollWindow Extended Panel
  • Implementing the updateDisplayList() Method
  • Walkthrough 3: Positioning the Custom Buttons in the scrollWindow
  • Improving Custom Component Reusability with Stylesheets
  • Walkthrough 4: Optimizing the Application with Stylesheets

Unit 6: Implementing Visual Changes to a Flex Application

  • Part 1: Adding Images
  • Part 2: Applying Graphical Skins
  • Part 3: Embedding FlashType Fonts and Applying Styles
  • Part 4: Creating and Applying Filters

Unit 7: Drawing Shapes and Skinning Programmatically

  • Understanding the Relationship Between Display List Objects and the Graphics Class
  • Calling the clear() Method
  • Demonstration 1: Exploring the clear() Method
  • Drawing Lines
  • Walkthrough 1: Using Line Methods to Draw a Star
  • Creating a Visual Element as an ActionScript Class
  • Walkthrough 2: Drawing a Star in an ActionScript Class
  • Creating Shapes
  • Defining Fill Methods
  • Walkthrough 3: Draw the Expand Button for the scrollWindow Panel in the Natural Experiences Application
  • Implementing a ButtonSkin from the mx.skins.halo Package
  • Walkthrough 4: Applying Drawn Buttons to an Application
  • Implementing a Programmatic Skin
  • Walkthrough 4: Walkthrough 5: Creating and Applying a Panel Skin using the borderSkin Property

Unit 8: Animating Components and View States

  • Creating Behaviors in ActionScript
  • Walkthrough 1: Animating a Fly-in Popup Component
  • Reviewing View States and Transitions
  • Walkthrough 2: Expanding and Restoring the Scroll Window Panel
  • Using the CurrentStateChange Event
  • Walkthrough 3: Detecting Panel Width after a Completed Transition

Unit 9: Creating Mouse-Aware Applications

  • Detecting the Mouse Position
  • Walkthrough 1: Moving the Popup to the Mouse Position
  • Detecting the Stage Dimensions
  • Walkthrough 2: Ensure the Popup Stays Within the Content Area

Unit 10: Implementing Drag and Drop Functionality

  • Understanding the DragManager
  • Walkthrough 1: Enabling Drag and Drop Functionality in a Drag-Enabled Component
  • Specifying the Data to Display in a List Control
  • Walkthrough 2: Using the labelField to Display Data in a List Component
  • Enabling Dragging on Non-List-Based Controls
  • Walkthrough 3: Dragging an Image
  • Controlling Dropping with Formats
  • Walkthrough 4: Using Formats
  • Handling Data in Drag and Drop Operations
  • Walkthrough 5: Manipulating Data in Drag and Drop Operations

Unit 11: Extending and Skinning Components and Creating Drag-and-Drop Shopping Cart Functionality

  • Part 1: Drawing, Extending and Skinning
  • Part 2: Creating a Drag-and-Drop Cart
There are currently no public classes scheduled dates for this class. To schedule a private class, please call us toll free at 866-665-9441.

Please note, assigned instructor may change. Lodestone confirms instructor schedules two weeks prior to class date.

*Classes are online via Lodestone Live and at a Lodestone training center.
The only time that a class will cancel is either if there is a power failure or other major disruption in service.