Flex 3: Extending & Styling Components

Description

In this Adobe Flex 3: Extending & 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

This instructor-led course targets experienced Adobe flex developers who want to use the built in Flex components in Flex 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.  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

Course Length

2-days

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 experience 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 an 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 or CS4
  • Walkthrough 4: Using Flex skin artwork created in Flash CS3 or CS4

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
  • Implementing the create Children () method
  • 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: Lab Implementing Visual Changes to a Flex Application

  • Adding images
  • Applying graphical skins
  • Embedding FlashType fonts and applying styles
  • 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 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: Lab: Extending and Skinning Components and Creating Drag-and-Drop Shopping Cart Functionality

  • Drawing, extending and skinning
  • Creating a drag-and-drop cart

Appendix A: Student Setup Guide

(EK MM20254 SM)