Building a custom component is one thing; Making a component extensible and configurable enough to consider it something you would reuse across multiple applications, or potentially sell to customers for use in their applications, requires a little bit of extra thought and support.
Building a one-off component…building something that does exactly what you’re looking for and nothing else…Is generally a matter of implementing the component lifecycle:
Getting your component initialized,
creating sub-components,
implementing your layout and rendering methods to display your data.
adding event handlers to respond to user interaction
dispatching your own custom events and handling them in your application.
optionally implementing a measure routine so your component can size to its own content.
Turning it into multi-use component is a matter of generalization. That is, of the behavior, properties, and values your component uses, deciding which are core to its very identity, and which you can leave up to the component user to define. Flex supports generalization in a number of ways, the most obvious being:
skinning
styling
properties/attributes
templating.
Sometimes you can stop there, and be happy with a nice, full featured, and potentially profitable component. Sometimes you’ll want to go the extra mile, adding the kind of polish that some customers will expect out a first class component in the flex environment. This can mean adding support for features like:
accessibility
automation
binding

Last week with some help from the developers on the SDK team, I put together a sample component that helped to illustrate the difference between the first type of component…a basic get the job done component…and a more full featured generalized version of the same. To celebrate the release of Flex 2, I thought I’d post it here.
The component, which for no good reason we called ‘RandomWalk,’ is a variation on a basic tree-menu structure. It takes XML data as input, and allows you to click down through the nodes in a horizontal layout.
First, take a look at the simple, one-off get the job done version:
Simple RandomWalk prototype
That version got the basic concept in place, but leaves something to be desired. The interaction is pretty basic. The rendering is all hard-coded directly in the component. And the representation of the individual items, which is really irrelevant to the behavior of the component itself, is hard-coded to be a simple Label.
So let’s put in a little more work and take another crack at it:
Improved RandomWalk
That version raises the bar a little bit. This time, we’ve abstracted away the rendering of the border and the highlight. We’ve used CSS to swap in a simple graphical skin for the border (using Flash’s Scale9 functionality), and a more advanced programmatic skin for the highlight that we’ve done some additional styling on via CSS. The individual items are no longer Labels…in fact, the RandomWalk component neither knows, nor cares, how the items are being rendererd. All it’s doing is creating the renderers, handing over the XML nodes, and laying them out on screen. In this version, we were able to drop in a slightly more complex renderer that alters the appearance of the individual items based on whether they’re selected or not.
And because Flex is Flash, and it’s easy to do these kinds of things, let’s take it one step further:
Animated RandomWalk
This time, we’ve got some nice smooth animation kicking in every time we open a node in the tree. We’ve also added some basic keyboard navigation to allow users to step through the component using the arrow keys. Lastly, we’ve integrated it with the History manager so you (the user) can use the back button to step backwards through the open nodes.
Of course, the true test of a nice, reusable component is to actuall build something different with it. I’m not artistic enough to go swapping out different skins (thank god for designers), But I can drop in different data.
Here’s a version of our final Animated RandomWalk component that uses a different item renderer to navigate a hierarchy of icons from the excellent Tango Desktop Project. The individual items even change states to display additional details and provide a link to download the icon if you like it:
RandomWalk Icon Browser
And that’s how you build a generalized reusable component.
Like the component? Interested in seeing how we did it? Grab the source here:
RandomWalk Source Viewer
Download RandomWalk source
These demos of course all require Flash Player 9, and were built using Flex 2