Developing Flash MX 2004 Components Using the Version 2 Architecture CFUN-04 Chafic Kazoun, Senior Flash Developer B-Line Express: Weblog:

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 2 nd 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.clip Parameters, 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 or visit my weblog at presentation material will be posted therehttp:// 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 ( – One of the lead component developers at Macromedia. Very good information on the internals of the architecture/components. Joey Lott ( ents.html) – An article that deals with components in Flash MX 2004 without the V2 framework. Good for getting a good understanding of components in generalhttp:// ents.html