Building an AS3 component framework: Planning
Posted on June 4, 02008
Filed Under DaVinci, Development, Flash
This isn't going to be a dictatorial lecture about how you must build your components. Think of it more as a fly-on-the-wall documentary. I need to build some unusual components and I thought it might make interesting reading to document the process and the design decisions along the way. I hope you find it useful.
A UI Component framework is a collection of interface elements that all share some common features. Although there is no single right or wrong way to implement a feature, some techniques are more efficient than others and each route will have its own constraints and challenges.
Size matters: functionality vs filesize
The biggest differentiator between frameworks is usually weight; and by weight I mean filesize. Heavier frameworks like the Flex component set have a lot of powerful shared functionality, but the tradeoff for this is a larger base filesize. Lighter frameworks such as MinimalComps have much less functionality but are consequently simpler and lighter. The chart below shows the relative feature sets of both frameworks.

As a rough guide I'm aiming to build something lighter than the CS3 Components but heavier than the MinimalComps and I expect to use a combination of AS3 for the functionality and Flash for the design assets. I certainly don't intend to build yet another set of standard components. I'm only going to build what I need when I need it. This is the main attraction of rolling your own - you can add all the functionality you need and no more than you need. If you want to extend any of these then be my guest, but the focus of this series will be on the concepts, the process and the decisions.
The first thing I want to do is decide on my common feature list. This functionality can then be baked into the base class that every component extends. My wish list looks something like this:
- Garbage Management
- Component Invalidation
- Deferred Rendering
- Child Management
All of these features are examples of what I call 'system wiring'. They are common management features that form the functionality backbone of all the components in the set. There are plenty of historical precedents for building these features so it's worth doing a little research before diving in. This could be as simple as referring to a Patterns book to digging into the source code of someone who's been there before. We're looking for elegant solutions.
I'd recommend taking a look under the hood of both the CS3 components and the Bit101 MinimalComps to see how they work. If this is your first time then I'd start with Keith Peters MinimalComps. They are really stripped down and good way to get acquainted with the main concepts. You can get started by reading Inside the Bit-101 MinimalComps. The CS3 components are more complex but very well commented.
Related Journal Entries
- Component framework July update
- AS3 Component: NumberStepper
- AS3 component: NextPreviousButton
- The project architecture
- Building an AS3 component framework: Suspend and Resume
- Building an AS3 component framework: Events and Inheritance
- Building an AS3 component framework: Deferred Rendering
- Building an AS3 component framework: Garbage Management
- Inside the Bit-101 MinimalComps
- Choosing an AS3 component framework
- AS3 Component: TimeStepper
- The Computus Engine on Google Code
- Building an AS3 component framework: The Finished BaseComponent Class
- Creating a main preloader in Flash CS3
- Projects update March 2009
Comments
Leave a Comment
If you would like to make a comment, please fill out the form below.


If you like you can take a look at the components I made at this url. Although the skinning part is fairly convoluted
Thanks for link Ash – I’ll check them out!