Developing Flash MX 2004 Components

1
Developing Flash MX 2004 Components

• Using the Version 2 Architecture
• CFUN-04

Chafic Kazoun, Senior Flash Developer B-Line
Express http//www.blinex.com Weblog
http//www.rewindlife.com
2
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

3
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

4
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

5
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/databind
  ing (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

6
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

7
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

8
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

9
Setting up our Class

• import mx.core.UIComponent
• class com.rewindlife.controls.StatusIcon extends
  UIComponent
• private var boundingBox_mcMovieClip
• function StatusIcon()

10
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 wont 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.

11
Adding our required properties

• import mx.core.UIComponent
• import mx.core.UIObject
• class com.rewindlife.controls.StatusIcon extends
  UIComponent
• static var symbolNameString
  "com.rewindlife.controls.StatusIcon"
• static var symbolOwnerObject
  com.rewindlife.controls.StatusIcon
• private var classNameString "StatusIcon"
• private var clipParametersObject status1
• private static var mergedClipParametersBoolean
  UIObject.mergeClipParameters(com.rewindlife.cont
  rols.StatusIcon.prototype.clipParameters,
  UIComponent.prototype.clipParameters)
• private var boundingBox_mcMovieClip

12
Required Methods - Initialization diagram
13
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

14
Adding init() and createChildren()

• import mx.core.UIComponent
• import mx.core.UIObject
• class com.rewindlife.controls.StatusIcon extends
  UIComponent
• static var symbolNameString
  "com.rewindlife.controls.StatusIcon"
• static var symbolOwnerObject
  com.rewindlife.controls.StatusIcon
• private var classNameString "StatusIcon"
• private var boundingBox_mcMovieClip
• private function init()Void
• super.init()
• trace("init")
• boundingBox_mc._width boundingBox_mc._height
  0
• boundingBox_mc._visible false

15
Methods draw()

• Where most of a components 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!

16
Adding draw()

• import mx.core.UIComponent
• import mx.core.UIObject
• class com.rewindlife.controls.StatusIcon extends
  UIComponent
• static var symbolNameString
  "com.rewindlife.controls.StatusIcon"
• static var symbolOwnerObject
  com.rewindlife.controls.StatusIcon
• private var classNameString "StatusIcon"
• private var boundingBox_mcMovieClip
• private function init()Void
• private function createChildren()Void

17
Methods size()

• Called by setSize() implicitly
• In UIObject it resizes by default it will scale
  the component
• UIComponent doesnt 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)

18
Setters

• Should set the internal model state (ex
  __status)
• Should add appropriate MetaData tags
• Should Invalidate afterwards
• Inspectable(enumeration"Available,Busy,Idle",de
  faultValue"Available")
• Bindable
• function set status(sString)Void
• __status s
• dispatchEvent(type"change")
• function get status()String
• return __status

19
Without Invalidation
20
With Invalidation
21
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

22
Other aspects of the architecture

• Skinning
• Styling
• Advanced focus management
• Containers
• Data binding

23
Further information

• You may contact me at chafic_at_rewindlife.com
• or 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/compon
  ents/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