Choosing an AS3 component framework
Posted on April 22, 02008
Filed Under DaVinci, Development, Flash, Journal
There are a small set of user interface controls that are common to almost all web applications; form elements such as checkboxes and radio buttons are typical of these. These controls can be implemented in Flash as smart reusable MovieClips called components. A component can then be dragged to the stage and configured relatively quickly.
The history of components in Flash
Flash Components have a bit of a chequered past. They were first introduced as ‘SmartClips’ back in Flash 5. Each subsequent release of the Flash IDE has had its own, largely incompatible, set of components. The types of included components, their APIs and features have all varied wildly over the years; and each set have their own inevitable bugs and workarounds.
Sometimes these bugs can be showstoppers and many developers (myself included) have resorted to building our own component sets. However frustrating this process was at the time I'd heartily recommend doing it purely as a programming exercise. The process of designing and optimising a set of re-usable user interface components will teach you everything you need to know about object-oriented design.
The most successful and stable set so far have been the Flex components. They have their own quirks but they are far and away the most feature-rich and comprehensive. They offer great functionality like charting and drag and drop that you don’t get out of the box with the Flash IDE components. On the downside they come with a heavy initial file footprint (thankfully cached in the latest player) and a requirement to develop your site as a Flex application.
Components in The Computus Engine
I need to build a quite a few unusual UI components for The Computus Engine so I thought I'd start off by taking a look at the current crop of AS3 component frameworks. I've already decided to build my app using the Flash IDE so I wont be able to take advantage of the Flex components. Part of the fun of working with Flash though is the freedom it gives you to create your own innovative user interface elements. This leaves me with the following options:
1. extend the existing Flash CS3 components
2. extend a third party component set
3. build my own component set
1. Extend the CS3 Components
Adobe outsourced the development of the Flash CS3 Components to Grant Skinner and Mettaliq. This was a smart move as Grant is well respected within the community and the pair had previously collaborated on a lightweight set of third party components for Flash 8. Initial documentation was a little sketchy but there are now some great articles on Creating Actionscript 3.0 components in Flash and creating FLA based components in Flash CS3.
PROS: A move to AS3 and the removal of data-binding has made the CS3 components lighter and faster than previous versions. Skinning is significantly easier this time round.
CONS: There are fewer components in this set so if you can't find what you're looking for then I'd recommend checking out the ASTRA components from Yahoo! The CS3 components have a known issue with styles amongst other things but on the whole they are pretty good. Although Grant reckons they were "built to be hacked", Keith Peters has hit a few gotchas while trying to build components that play nice with the Flash CS3 IDE. If you are going to go this route then be sure to read: Custom Parameter UIs for Components in Flash CS3, CS3 Component Parameters - defaultValues and CS3 Component Glitch #3.
2. Extend 3rd Party Components
Although there are a few commercial component sets out there (see DigiCrafts Flash Components and Advanced Flash Components) they are not much use to me. I want this project to be as open as possible so extending these isn't really an option. Of the free components, my favourite set are from Keith Peters. His MinimalComps are really lightweight and there are loads of them. You can see examples of these on his site or pick up the code for them from Google Code.
3. Build my own components
This route is the most time consuming but ultimately the most flexible. I don't want to re-invent the wheel but this route will give me just the functionality I want without any licensing issues. The real advantage of going this route would be the opportunity to document the process as I introduce new concepts and features to the component set.
And the winner is..
I like the new CS3 components but they are still a little heavy for what I need. There is a lot of code in there related to skinning and themes that I'd prefer to do without. I also love Keith's lightweight MinimalComps, and these are probably a little closer to what I'm after. Thinking about it, I reckon a few posts about building a component framework from the ground up would make interesting reading. Still not sure which way to go, but I think I might start by taking a look inside the MinimalComps to see how they work.
Related Journal Entries
- The project architecture
- Component framework July update
- Building an AS3 component framework: Planning
- Big History
- The Computus Engine on Google Code
- Hacking the Date class for GeoLocation
- AS3 Component: TimeStepper
- AS3 Component: NumberStepper
- AS3 component: NextPreviousButton
- Building an AS3 component framework: The Finished BaseComponent Class
- Building an AS3 component framework: Suspend and Resume
- Building an AS3 component framework: Events and Inheritance
- Building an AS3 component framework: Deferred Rendering
- Inside the Bit-101 MinimalComps
- Projects update March 2009
Comments
Leave a Comment
If you would like to make a comment, please fill out the form below.
I whole-heartedly agree with you that building your own UI components will teach you a lot about OOP as well as user interaction and usability. I know because I was in this situation a while back when designing a Flash 7 based RIA for a major mobile phone company in Finland.
I too have been starting to peer into Keith Peters’ MinimalComps, to gather some design tips for my own set of CS3 components. Maybe we could share or collaborate in this.
Great site John!
Hi Gerald. Yes, I found building components from the ground up to be a series of epiphanies. In AS2 you had to build an event architecture first, then you wrestled with stuff like Composition vs Inheritance. It’s the perfect project to really understand OOP principles as you have to employ them all.
The MinimalComps are really interesting though as they are light enough that anyone can easily dissect and understand them. Most of the big OOP ideas are still in there but there’s only one base class and a single styles config file to get your head round.
I’ve been trying to write up what’s going on in the base class this evening as it provides quite a lot of functionality. Hope to post that one shortly!
Great! Looking forward to it. Cheers!
You’ve forgot to talk about the outcoming Liquid component made by bytearray.org.
Those ones seems really cool. Can’t wait for the release.
++
Hi ZeFlasher, thanks for the heads up. I hadn’t come across the Liquid component set. They have really interesting way of doing skinning. Look forward to checking them out once they’re out of beta. Here’s a link for anyone wanting to check them out: http://www.bytearray.org/?p=109
how about ASWing?
is that the Java Swing port for AS? I didn’t know there was an AS3 version – I’ll def check it out. Thanks.
There is also a framework I have been working on called LiquidGear that has taken a lot of tweaks and tips and workarounds and combined them into AS3 elements. It uses the same structure as JQuery.
Using the elements in an MVC framework (the Shell) or individually, you can add an image, for example in just two lines of code…
var img:Image = new Image({id:’myImg’, src:’/IMG/myFolder/photo.jpg’});
addChild(img);