• Technical IT

    Solutions delivered throughout the UK
  • Business Applications

    Solutions delivered throughout the UK
  • Professional Best Practice

    Solutions delivered throughout the UK
  • Professional Development

    Solutions delivered throughout the UK

Flex: Extending & Styling Components

Flex: Extending & Styling Components
  • Price £597.00
  • Level Intermediate
  • Duration 2 day(s)
All major credit cards accepted


In the 2-day Flex: 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 pop-ups, embedding fonts, implementing custom application ‘look-and-feel’ and positioning stage- and mouse-aware elements.


This course is for experienced Flex Developers.

Assumed Knowledge

You’ll have attended the Flex: Developing Rich Client Applications or the Flex Jumpstart course or have equivalent knowledge of the topics covered in the Flex: Developing Rich Client Application course.


This course targets experienced Adobe Flex developers featuring Introducing Flex: Extending and Styling Components, embedding Images and Fonts, Modifying the Look and Feel of Flex Components, Creating Popups, Extending Flex Components, Drawing Shapes and Skinning Programmatically, Animating Components and View States,Creating Mouse-Aware Applications and Implementing Drag and Drop Functionality.

Course Content

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
  • Setting Up Application Files

Embedding Images and Fonts

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

Modifying the Look and Feel of Flex Components

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

Creating Popups

  • Creating a Popup Window
  • Creating the TitleWindow and Gallery Popup
  • Passing Data to the Popup Window
  • Passing Data to the Gallery Popup

Extending Flex Components

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

Implementing Visual Changes to a Flex Application

  • Adding Images
  • Applying Graphical Skins
  • Embedding FlashType Fonts and Applying Styles
  • Creating and Applying Filters

Drawing Shapes and Skinning Programmatically

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

Animating Components and View States

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

Creating Mouse-Aware Applications

  • Detecting the Mouse Position
  • Moving the Popup to the Mouse Position
  • Detecting the Stage Dimensions
  • Ensure the Popup Stays Within the Content Area

Implementing Drag and Drop Functionality

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

Extending and Skinning Components and Creating Drag-and-Drop Shopping Cart Functionality

  • Drawing, Extending and Skinning
  • Creating a Drag-and-Drop Cart

Make Enquiry

Course Enquiry

Book Now

Course Enquiry