Creating Custom Components: Part Deux

Great v2 component resources keep coming to my attention following my initial Creating Custom Components blog entry of two weeks ago. Greg Hammer, Manager of the Las Vegas Macromedia Users Group, turned me on to an excellent tutorial on creating custom v2 architecture components which is made available courtesy of laflash.org (User Groups Rock!!). As Greg pointed out, this is a fairly unknown resource–I had never seen or heard of it and I’ve looked under a lot of v2 rocks over the last year and a half–which was posted about 6 months ago. The presentation by Jacob Bullock runs nearly an hour, so be prepared to to clear your schedule for some component clarity (presentation focuses on entry / intro to v2 component architecture and incidentally covers many basic fundamentals of AS2.0 development) .

Creating Custom Components

There’s been a bit of traffic on the flashcoders mailing list today about how to create custom components extending the UIComponent class. Jesse Warden droppped a link to some really excellent step-by-step tutorials (click here for tutorials, click here for source files) which walk you through the entire process from start to finish. Not only are the tutorials excellent and walk you through some of the more common pitfalls of component development (I know I personally have less hair) , but you also get a taste of JesterXL’s lingo which adds a bit of flava to the learning process (my favorite from this session is how he emphasizes the second syllable in “init” which makes it sound as though you are in the middle of something rather than initializing something). Anyways, Jesse is an excellent resource for the community and deserves many kudos. Taken together with Chafic Kazoun’s excellent series of articles on Ultrashock the community now has a very detailed set of tools to assist the component development process. I know I speak for many others in saying thank you to Jesse and Chafic for the time and effort they put into these tutorials.

ComboBox Item Specific Icons

A friend of mine, and fellow flasher, from the Pacific Northwest IM’d me yesterday about creating a custom cell renderer for a ComboBox. What he wanted to do was deliver a custom icon for each item based on the SCORM objective results returned from the LMS. After thinking about his need for a couple of seconds I remembered a method of the List component which is probably not the most intuitively named–setPropertiesAt().

Now you might be asking yourself what this method has to do with a ComboBox and and custom icons? The answer of course, is that the ComboBox contains a List component which it uses for its drop-down menu. The “dropdown” property of the ComboBox provides a reference to this List which means that we can enjoy all of the fun properties and methods provided by the List without having to fool around with extending it.

This is where setPropertiesAt() arrives on the scene. The setPropertiesAt() method takes two arguments: 1) the index of the item whose properties you wish to set and 2) an object enumerating the “backgroundColor” and “icon” properties. This provides us with an easy way to drop an item specific icon or background color into a List cell, or a ComboBox dropdown cell for that matter, by simply providing the linkage ID of a MovieClip icon or hex number for the background color:

comboBox.dropdown.setPropertiesAt(0,
{backgroundColor:0xCCCCCC icon:"passedIcon"});

It also serves as a reminder of how important method names are to an API. The setPropertiesAt() method makes perfect sense after the context is set and understood, but is not very intuitive for someone searching for the means to set an icon or background color in a List cell.