Disable items in Flash ComboBox component

Recently, Barefoot built a new promotional site for Miller Lite–millerpregame.com. The site is a cross promotion with Wal-Mart. The main attraction allows users to vote on their favorite NFL city to tailgate at. We built a small voting widget in Flash and utilize Flash Remoting. It is a simple form really, just a ComboBox that lists the 32 NFL teams and a textfield so users can add comments as to why the city submitted is really the "best."

Each week the votes are tallied and a city is declared a winner. We then compile tidbits about the city, the atmosphere the fans create, and any pregame rituals that have been submitted. Once a city wins they are then taken out of the list of eligible cities going forward throughout the season.

To avoid confusion, we wanted to grey out the previous weeks winners in the ComboBox. Disabling options in the ComboBox Component should be as easy as setting a property in the dataprovider right? Wrong.

Luckily, the ComboBox uses the List Component and the List Component can utilize the CellRenderer API. The CellRenderer API is a way of styling and manipulating the individual items (aka "cells") in a List Component.

To implement your own extended CellRenderer Class, you simply define the class with a few required methods and properties. Similar to an Interface structure in Java, etc...

You then create a MovieClip in your library and define it's linkage properties using the Class you have created to be your CellRenderer.

Next, you designate the cellrenderer property of the List inside the ComboBox to point at your new Class. 


// define cellRenderer class
comboBox.dropdown.cellRenderer = "MyCell";

MyCell is the name given to the identifier in the MovieClip linkage properties mentioned above.

OK, so now we have more control over "cell" rendering. We now use the setValue method required in our new MyCell class.

We decided to set a property in our dataprovider array that would identify which items in the ComboBox we wanted to disable.

// for example
cities.push({label: 'Cincinnati', data: 7, selectable: 'false'});
comboBox.dataProvider = cities;


We then check for this property in the setValue method.

// define the item index
var cellIndex:Number = getCellIndex().itemIndex;

// Apply text formatting
if (listOwner.dataProvider.getItemAt(cellIndex).selectable == 'false') {
// code goes here
}


If that if statement is true we set the cell textfield to html so we can easily style it using a font tag and setting a color like grey to indicate to the user the option is disabled. We also need to remove the default rollover action and onpress action for the cell.

_tLabel.html = true;
_tLabel.htmlText = '<font style="color:#DDDDDD;">' + sLabel + '</font>';
// define row
var row = this._parent;
// remove the highlight
row.highlight = row.background;
// add a fake onPress event
row.onPress = null;
// don't show the hand cursor
row.useHandCursor = false;


That is it! Items we designate are now disabled and appear greyed out. Some times Flash is better than HTML and other times HTML is just easier.