Developing Flash MX 2004 ComponentsUsing the Version 2 Architecture

CFUN-04

Chafic Kazoun, Senior Flash Developer B-Line Express: http://www.blinex.com Weblog: http://www.rewindlife.com

Outline

A bit of component theory The need for an architecture The goals of the Version 2 Architecture Setting up our Fla UIObject & UIComponent internals

Required properties Order of initialization Required methods Metadata Tags Setters Post-initialization considerations and invalidation Utility methods Events The pre-implemented API

Further aspects of the architecture

Some theory

The quick boring stuff Components promote re-usable code, one of the goals of OOP Components allow people with no knowledge of the inner

workings of components to do a lot very quickly Components allow a developer to focus on smaller parts of a

larger application and better develop those parts than if they had to build an entire application with no components

UI Components/Widgets are a perfect example

Why an architecture?

When developing components, many components will have similar needs. These needs can be abstracted out and re-used.

Standards are important. We take it for granted sometimes but

A single styling system A single event system Familiar implementation. example: move()

Makes components easier to use

The V2 Architecture

Latest component architecture by Macromedia that will be with us for a long time, used by Flash, Flex, and in the future most probably Central

Designed specifically for RIA development Written in AS2 Helps developers build components faster Promotes good practices Uses Meta-data tags for properties/events/databinding (ex:

[Event(“change”)]) New event system (mx.events.*) Smarter focus management Databinding

Cons: Large initial file-size hit Steep learning curve Some parts not completely polished

Setting up our component

Setup your Fla with symbols, layers, linkage identifiers, and skins

All symbols should not have export in first frame checked Main component symbol should include parent class symbol and

any other required symbols in the 2nd frame like skins Should include a bounding Box or dead preview with an instance

name of boundingBox_mc Should have a “stop()” on the first frame Set the class for the symbol Set the class in the component properties

UIObject

Main base class that a component will inherit from UIObject extends MovieClip Requires child to contain some methods/properties Architecture is built to do away with a lot of the

MovieClip specific details (Example: createClassObject() instead of attachMovie())

Includes the Event System Includes the Styling System And most of the core features…

UIComponent

Extends UIObject so all of our UIObject knowledge generally applies

Implements focus management (tabEnabled)

No implementation of sizing. UIObject by default will distort a component (change scaleX and scaleY)

Support the enabled property

Most of the time you will use UIComponent not UIObject as your base class

Setting up our Class

import mx.core.UIComponent;

class com.rewindlife.controls.StatusIcon extends UIComponent

{

private var boundingBox_mc:MovieClip;

function StatusIcon()

{

};

};

Required Properties

symbolName: This property is used by createClassObject() which internally calls attachMovie(). It would correspond to the linkage name of the library symbol for the component (ex: “com.rewindlife.controls.StatusIcon”).

symbolOwner: This property is also used by createClassObject()

className: This is not required if you won’t be implementing styling for your component. It corresponds to the name of the class usually and is used when deciding what class styles to use. (_global.styles.RadioButton.setStyle("color", "blue"); )

clipParamaters & mergedClipParamaters: These are required if publishing to Flash Player 6. When you publish to the 6 player, there are issues where a setter may not be available in time thus causing the property to be created, only to later on be wiped out and lost by the setter property becoming available.

Adding our required properties

import mx.core.UIComponent;import mx.core.UIObject;

class com.rewindlife.controls.StatusIcon extends UIComponent{

static var symbolName:String = "com.rewindlife.controls.StatusIcon";static var symbolOwner:Object = com.rewindlife.controls.StatusIcon;private var className:String = "StatusIcon";

private var clipParameters:Object = {status:1};private static var mergedClipParameters:Boolean = UIObject.mergeClipParameters(com.rewindlife.controls.StatusIcon.prototype.clipParameters, UIComponent.prototype.clipParameters);

private var boundingBox_mc:MovieClip;}

Required Methods - Initialization diagram

Methods: init() & createChildren()

init() At a minimum you must call super.init() It is also used for creating instance member variables It is called only once and never again in the life of the

component Set boundingBox width/height = 0 and visible = false

createChildren() Used to create/attach sub-objects Is only called once during initialization

Adding init() and createChildren()

import mx.core.UIComponent;import mx.core.UIObject;

class com.rewindlife.controls.StatusIcon extends UIComponent{

static var symbolName:String = "com.rewindlife.controls.StatusIcon";static var symbolOwner:Object = com.rewindlife.controls.StatusIcon;private var className:String = "StatusIcon";

private var boundingBox_mc:MovieClip;

private function init():Void{ super.init();

trace("init") boundingBox_mc._width = boundingBox_mc._height = 0; boundingBox_mc._visible = false; }

private function createChildren():Void{ //1

trace("createChildren");}

}

Methods: draw()

Where most of a component’s implementation exists Is responsible for setting the visual state of the

component Should be designed in a way to allow it to be called

during initialization and afterwards. Needs to be efficient!

Adding draw()

import mx.core.UIComponent;import mx.core.UIObject;

class com.rewindlife.controls.StatusIcon extends UIComponent{

static var symbolName:String = "com.rewindlife.controls.StatusIcon";static var symbolOwner:Object = com.rewindlife.controls.StatusIcon;private var className:String = "StatusIcon";private var boundingBox_mc:MovieClip;

private function init():Void{ … }private function createChildren():Void{

…}

private function draw():Void{

trace("draw");}

}

Methods: size()

Called by setSize() implicitly In UIObject it resizes by default it will scale the

component UIComponent doesn’t include any resizing logic Should check __width/__height. Sometimes you just invalidate the component rather

than implement any sizing (if it is a simple component)

Setters

Should set the internal model state (ex: __status) Should add appropriate MetaData tags Should Invalidate afterwards

[Inspectable(enumeration="Available,Busy,Idle",defaultValue="Available")]

[Bindable]

function set status(s:String):Void

{

__status = s;

dispatchEvent({type:"change"});

};

function get status():String

{

return __status;

}

Without Invalidation

With Invalidation

Invalidation in V2

Should call invalidate() after updating the model state It is good practice to store all model state data

privately to and have draw() access it later, proceed all private variables with __ (two underscores)

If you need to redraw the component immediately do not call draw(), instead call redraw(true)

The “draw” event is automatically dispatched during invalidation

Other aspects of the architecture

Skinning Styling Advanced focus management Containers Data binding

Further information

You may contact me at chafic@rewindlife.comor visit my weblog at http://www.rewindlife.com,

presentation material will be posted there

Good resources: Ultrashock Tutorials – Wrote two articles on Flash MX 2004

Component Development Macromedia DevNet – Several articles on the new

architecture and component development Nigel Pegg (http://www.markme.com/nigel) – One of the

lead component developers at Macromedia. Very good information on the internals of the architecture/components.

Joey Lott (http://www.person13.com/articles/components/creatingcomponents.html) – An article that deals with components in Flash MX 2004 without the V2 framework. Good for getting a good understanding of components in general