Alternating background colors in a Flash data grid (ActionScript 3.0 edition)

Somebody was asking me today how to alternate background colors for the DataGrid component in Flash CS3 today (using the new ActionScript 3.0 components). Well, as luck has it, I wrote a section on it in an upcoming Flash Quick Start for the DataGrid component (my third and final installment on DataGrid).

The wording/code may change, but here’s the latest draft of the “Alternating background colors in a data grid” section. Oh, and don’t worry, the formatting will be *much* better once the Developer Center people clean it up.


Alternating background colors in a data gridOften when displaying large amounts of data in a data grid, it is easier to see the rows when they have alternating row colors. In order for the following example to work, you need to create two new symbols in the Flash document’s library. The easiest way to do this is to duplicate an existing cell renderer skin in the library (such as CellRenderer_upSkin in the Library panel’s Component Assets/CellRendererSkins folder, see figure 1) and modify the asset as desired. Once you’ve finished creating the desired skins for the alternating row color backgrounds, you’ll need to set up a linkage and give the symbol a class name of “CellRenderer_upSkinGray” and “CellRenderer_upskinDarkGray”.figure1.jpgFigure 1. The CellRenderer_upSkin symbol in the Flash document’s Library panel.Once both the CellRenderer_upSkinDarkGray and CellRenderer_upSkinGray assets have been created, right-click the CellRenderer_upSkinDarkGray asset in the Library panel and select Linkage to open the Linkage Properties dialog box. From this dialog box, click the Export for ActionScript check box, assign a class name of CellRenderer_upSkinDarkGray and leave the base class text field as flash.display.MovieClip. Click OK. Repeat these steps for the CellRenderer_upSkinGray asset, giving it a class name of CellRenderer_upSkinGray (see figure 2).figure2.jpgFigure 2. Setting the class name for the CellRenderer_upSkinGray asset in the library.ExampleThe following example creates ten items in a data grid and alternates the data grid row’s background colors based on the row’s current index:

// Import the required component classes.import fl.controls.DataGrid;import fl.data.DataProvider;// Create and populate a new DataProvider object.var dp:DataProvider = new DataProvider();dp.addItem({label:"Item a", data:0});dp.addItem({label:"Item b", data:1});dp.addItem({label:"Item c", data:2});dp.addItem({label:"Item d", data:3});dp.addItem({label:"Item e", data:4});dp.addItem({label:"Item f", data:5});dp.addItem({label:"Item g", data:6});dp.addItem({label:"Item h", data:7});dp.addItem({label:"Item i", data:8});dp.addItem({label:"Item j", data:9});/* Create a new DataGrid component instance, add two data grid columns,define the data provider and add the instance to the display list. Thiscode also sets the cellRenderer style on the data grid by using thesetStyle() method and specifies the custom cell renderer class to use. */var myDataGrid:DataGrid = new DataGrid();myDataGrid.addColumn("label");myDataGrid.addColumn("data");myDataGrid.dataProvider = dp;myDataGrid.width = 200;myDataGrid.rowCount = dp.length;myDataGrid.move(10, 10);myDataGrid.setStyle("cellRenderer", AlternatingRowColors);addChild(myDataGrid);

The AlternatingRowColors class is as follows:

package {// Import the required component classes.import fl.controls.listClasses.CellRenderer;import fl.controls.listClasses.ICellRenderer;/*** This class sets the upSkin style based on the current item's index in a list.* Make sure the class is marked "public" and in the case of our custom cell renderer,* extends the CellRenderer class and implements the ICellRenderer interface.*/public class AlternatingRowColors extends CellRenderer implements ICellRenderer {/*** Constructor.*/public function AlternatingRowColors():void {super();}/*** This method returns the style definition object from the CellRenderer class.*/public static function getStyleDefinition():Object {return CellRenderer.getStyleDefinition();}/*** This method overrides the inherited drawBackground() method and sets the renderer's* upSkin style based on the row's current index. For example, if the row index is an* odd number, the upSkin style is set to the CellRenderer_upSkinDarkGray linkage in the* library. If the row index is an even number, the upSkin style is set to the* CellRenderer_upSkinGray linkage in the library.*/override protected function drawBackground():void {if (_listData.index % 2 == 0) {setStyle("upSkin", CellRenderer_upSkinGray);} else {setStyle("upSkin", CellRenderer_upSkinDarkGray);}super.drawBackground();}}}

Save the previous code in the same directory as your Flash document and give it a filename of AlternatingRowColors.as.The custom AlternatingRowColors class extends the CellRenderer class and implements the ICellRenderer interface. This class overrides the drawBackground() method from the CellRenderer class and determines which upSkin to use for the current data grid row’s background based on the current row’s index. If the row index is an even number, the data grid sets the upSkin style to CellRender_upSkinGray, otherwise the CellRenderer_upSkinDarkGray is used.Note: The alternating background skins are applied using the setStyle() method in the drawBackground() method in the custom cell renderer above. For this example to work you need to create two new skins in your library and make sure they are exported for ActionScript: CellRenderer_upSkinGray and CellRenderer_upSkinDarkGray.