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: Reduce file size for downloads and minimuze CPU/memory impact
- Easy skinning & stlying: Simplify the workflow for customizing the appearance of components
- Extensibility: Make the architecture more approachable to encourage customization
- Knowledge portability: Ensure user knowledge can be transferred from the Version 2 components and Flex.
Size and performance
Size:
- Reduced size vs. v2 by 25-40% (depending on components used)
- Base size: ~10kb smaller than v2 (27KB vs. 17KB). ~110kb smaller than Flex 2.
Performance
- Lower CPU, higher capacity.
- Inherent AS3 performance gains.
- Also took advantage of new features: event model, strong typing, Dictionary.
- No more recursive lookups.
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:
- Drop component on stage.
- Double-click component.
- Edit assets.
- 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:
- Option 1: Bind a class to the skin clip
- Option 2: Write timeline code on the skin clip
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:
- No databinding or data components. These features are apparently not commonly used in the the experience market.
- No CSS (uses a simplified style model instead).
- No tree or accordion components.
- API variances (some component interfaces differ from those in Flex 2).
This was a hugely informative session and was very well presented.
Recent Comments