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.