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.

Feature set comparison: CS3 vs MinimalComps

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:

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.

Share/Bookmark

Related Journal Entries

  1. Component framework July update
  2. AS3 Component: NumberStepper
  3. AS3 component: NextPreviousButton
  4. The project architecture
  5. Building an AS3 component framework: Suspend and Resume
  6. Building an AS3 component framework: Events and Inheritance
  7. Building an AS3 component framework: Deferred Rendering
  8. Building an AS3 component framework: Garbage Management
  9. Inside the Bit-101 MinimalComps
  10. Choosing an AS3 component framework
  11. AS3 Component: TimeStepper
  12. The Computus Engine on Google Code
  13. Building an AS3 component framework: The Finished BaseComponent Class
  14. Creating a main preloader in Flash CS3
  15. Projects update March 2009

Comments

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

2 Comments so far
  1. Ash June 4, 2008 4:27 pm

    If you like you can take a look at the components I made at this url. Although the skinning part is fairly convoluted :)

  2. John June 4, 2008 5:27 pm

    Thanks for link Ash – I’ll check them out!