For those of you who are comfortable with Actionscript 2.0 component development based on the v2 component framework, I thought it would be worthwhile in posting about the similarities and the differences between the core methods that can be implemented when creating an Actionscript 3.0 component. For clarity I’ll deal with UIComponent as most of the core methods are in some way implemented or derived from this class.
To begin with let’s recap on the core methods for UIComponent in the Actionscript 2.0 v2 framework.
Actionscript 2.0 Specific
- init() – Here we create the initial references to our component and make sure that our parent class has instantiated by calling super(); (If you don’t call super() you cannot take advantage of enabling / diabling your component as a Watch is applied for just this purpose in the UIComponent init() method.
- createChildren() – Pretty self explanatory really. Watch out for parameter setting in the optional initObj of a nested component.
- size() – Again it pretty much does what it says on the tin. This is the first time a component knows it’s actual size.
- draw() – Our last method, draw() does just that, it draws the visual elements on the screen.
Compare this to the Actionscript 3.0 framework. First of all not all of the methods from the v2 framework are carried over and those that are have been re-engineered. In my opinion this is a good thing as most were a little convoluted as to their actual purpose and what order they were actually processed in (having access to the source code wasn’t that beneficial and only served as a solution due to the shockingly poor documentation for component development.
With AS3.0 we now have an actual use for the constructor and we lose init(). It’s a like for like trade. createChildren() stays, but size() and draw() get replaced with measure() and updateDisplayList(). We also get a couple of extra methods to make our life easier – layoutChrome() and commitChanges(). So what do these do differently to the old methods we had in the v2 framework?
Actionscript 3.0 Specific
- createChildren() – This method still does pretty much the same job as in the v2 framework.
- measure() – Again this is similar in nature to size(). Providing the default width and height of the components. It also provides the default minimum size this particular component can be. So no more design view flaws where a user can make the component smaller than is functionally usable.
- updateDisplayList() – Like measure(), this is pretty similar to the old draw() method. However it does have the ability to do sizing of any child elements as well as the positioning within the component operational area. It also deals with the application of skins and graphics as required by the component. This is not the same as layoutChrome() though.
- layoutChrome() – This method deals with the application of any border area of a component. You will generally only use this when subclassing from Container components / classes or creating a custom component that is a type of container or holder.
- commitChanges() – This method deals with the application of property changes within the component itself – either by internal or external intervention. You can either get all changes to invoke at the same time or define a specific order.
So we have the initial methods used to create our core component framework, but what about the old redraw(), invalidate() and setSize() from v2? As most are aware these were part of the public API to allow for the re-rendering / resizing of the component and it’s visual elements. Iin the case of invalidate() that would be the next available frame interval or if redraw(true) the current frame. setSize() deals with manipulating the size method by providing an interface to set the components new width and height values then calling size().
In Actionscript 3.0 we lose all of these and in their place we have the following:
- invalidateDisplayList() – This marks the component so that it’s updateDisplayList() and layoutChrome() methods are called on the next screen update.
- invalidateProperties() – If our component has received a data change or it’s properties have been updated via a specific mechanism we can invoke this method to make sure that commitChanges() gets called during the next screen update.
- invalidateSize() – This one is obvious compared to the other two, it marks the component so that it’s measure() method is called in the next screen update.
Hopefully this will make everyones life a lot easier when developing components for both Flex 2 and eventually Flash 9. If you want to find out more then feel free to pop back here from time to time. Alternatively see the blatant plug below :p
Catch my talk on Flex 2 and Actionscript 3.0 component development at Flash on the Beach
December 4th-6th 2006, Brighton, UK
Nice one !