Flash CS3 Components

Notes from Grant's talk on the new Flash CS3 Components at FITC 2007.

Core philosophy: Build a component set targeted at rich experience creators.

Main objectives

Size and performance

Size:

Performance

He's showing a demo of a List component with 1,000,000 items in the list and it's scrolling smoothly. He selects 100,000 items and it's almost instantaneous.

Skinning and styling: simplicity and power

Visual skinning

Process:

  1. Drop component on stage.
  2. Double-click component.
  3. Edit assets.
  4. Rinse, repeat.

Tip: You can use graphic symbols with Scale-9 for sharing component assets.

Limitation: No author-time preview

Everything is visually editable.

You can also use programmatic skinning if you want to.

Process:

You just need to expose the width and height setters.

Stlying:

Styling lets you apply skins, text formats, and other style settings to instances, all components, or all components of a certain type.

Usage: 

import fl.managers.StyleManager;

// Change a style on a single instance
myInstance.setStyle("styleName", styleValue);

// Change a style for all components
StyleManager.setStyle("styleName", styleValue);

// Change a style for instances of a specific component
StyleManager.setComponentStyle(component, "styleName", styleValue);

Styling no longer causes an inefficient recursive look-up system. So you can style at runtime without a performance hit.

Instances as skins:

Advanced feature. You can now use an instance as a component's skin.

Demo: Using a dynamically loaded asset as an icon skin. Grant loads a semi-transparent PNG using a Loader and sets it as the icon for a button.

Demo: Using instance skins to programmatically skin a slide. This rocks: Grant passes a Sprite instance as the track skin for a slider and updates the gradient fill in it at runtime.

Note: Only a single component instance can use an instance as a skin.

Lists: TileList, DataProvider and CellRenderer

TileList: New list type.

DataProviders

No longer obscured as an Array mix-in. Mandatory for use with lists. Sync multiple lists using the same DP. 

// data can be an Array, XML, etc.
myList.dataProvider = new DataProvider(data);

Methods: addItem, removeItem, replaceItem, merge, invalidate, sort, toArray, etc.

Events: DataChange and PreDataChange events show the type (add, remove, replace, sort) and the indexes/items affected.

CellRenderer

Extend the CellRenderer class to create your own custom cell renderer. 

import fl.controls.listClasses.CellRenderer;

public class MyRenderer extends CellRenderer
{
  // ...
}

Or implement ICellRenderer: x, y, data, listData, selected, setSize, setMouseState.

Architecture: behind the scenes

Shallow, linear class hierarchy without mixins and a clear inheritance structure (limited use of composition). Makes use of protected members with few private or namespace-protected members. In short, you can extend pretty much anything. Uses consistent coding standards.

To create your own components, you extend UIComponent and can, if you want to, make use of the InvalidationType, ComponentEvent, StyleManager and FocusManager classes.

To create a custom list called MyList, for example, you would extend the SelectableList class, which extends BaseScrollPane, which extends UIComponent. Although the list classes are probably among the most complicated, the inheritance hierarchy is relatively shallow.

The framework allows for the granular invalidation of specific aspects of a component. e.g., foo.invalidate(InvalidationType.SIZE); All invalidated aspects of a component get redrawn at the next RenderEvent.

There is a registration-based style model where components register for specific styles. Supports style inheritance and pass-through styles.

The components support smooth scrolling (pixel level scrolling on all List-based components, as opposed to cell-level scrolling).

The framework has smart renderer reuse. Renderers are reused intelligently, leading to less flicker than in the Version 2 components.

The Bad

Although the components are a huge step forward when compared to the Version 2 components, Grant wants to point out some of their limitations. These include:

This was a hugely informative session and was very well presented.

Comments