CellRenderer is a class that List-based components, such as List, DataGrid, TileList, and ComboBox, use to manipulate and display custom cell content for their rows. A customized cell can contain text, a prebuilt component, such as a CheckBox, or any display object class you can create. To render data using a custom CellRenderer, you can either extend the CellRenderer class or implement the ICellRenderer interface to create your own custom CellRenderer class.
The List, DataGrid, TileList, and ComboBox classes are subclasses of the
SelectableList class. The SelectableList class includes a cellRenderer style.
This style defines the display object that the component uses to render cells.
You can adjust the formatting of the styles used by the CellRenderer, by calling
the setRendererStyle() method of the List object (see
Format cells). Or you can define a custom class to use as the
CellRenderer (see
Define a custom CellRenderer class).
The CellRenderer class includes a number of styles that let you control the format of the cell.
The following styles let you define the skins used for the different states of the cell (disabled, down, over, and up):
-
disabledSkinandselectedDisabledSkin -
downSkinandselectedDownSkin -
overSkinandselectedOverSkin -
upSkinandselectedUpSkinThe following styles apply to the text formatting:
-
disabledTextFormat -
textFormat -
textPadding
You can set these styles by calling the setRendererStyle() method of the List
object or by calling the setStyle() method of the CellRenderer object. You can
get these styles by calling the getRendererStyle() method of the List object
or by calling the getStyle() method of the CellRenderer object. You can also
access an object that defines all renderer styles (as named properties of the
object) via the rendererStyles property of the List object or the
getStyleDefinition() method of the CellRenderer object.
You can call the clearRendererStyle() method to reset a style to its default
value.
To get or set the height of the rows in the list, use the rowHeight property
of the List object.
For example, the following code includes two classes. The ListSample class instantiates a List component, and it uses the other class, CustomRenderer, to define the cell renderer to use for the List component. The CustomRenderer class extends the CellRenderer class.
-
Select File > New.
-
In the New Document dialog box that is displayed, select Flash File (ActionScript 3.0), and then click OK.
-
Select Window > Components to display the Components panel.
-
In the Components panel, drag a List component to the Stage.
-
If Flash is not displaying the Property inspector, select Window > Properties > Properties.
-
With the List component selected, set the properties in the Property inspector:
-
Instance Name: myList
-
W (width): 200
-
H (height): 300
-
X: 20
-
Y: 20
-
-
Select Frame 1 of Layer 1 in the Timeline, and select Window > Actions.
-
Type the following script in the Actions panel:
myList.setStyle("cellRenderer", CustomCellRenderer); myList.addItem({label:"Burger -- $5.95"}); myList.addItem({label:"Fries -- $1.95"}); -
Select File > Save. Give the file a name and click the OK button.
-
Select File > New.
-
In the New Document dialog box that is displayed, select ActionScript File and then click the OK button.
-
In the script window, enter the following code to define the CustomCellRenderer class:
package { import fl.controls.listClasses.CellRenderer; import flash.text.TextFormat; import flash.filters.BevelFilter; public class CustomCellRenderer extends CellRenderer { public function CustomCellRenderer() { var format:TextFormat = new TextFormat("Verdana", 12); setStyle("textFormat", format); this.filters = [new BevelFilter()]; } } } -
Select File > Save. Name the file CustomCellRenderer.as, put it in the same directory as the FLA file, and click the OK button.
-
Select Control > Test Movie.
You can also define a CellRenderer using any class that inherits the
DisplayObject class and implements the ICellRenderer interface. For example the
following code defines two classes. The ListSample2 class adds a List object to
the display list and defines its CellRenderer to use the CustomRenderer class.
The CustomRenderer class extends the CheckBox class (which extends the
DisplayObject class) and implements the ICellRenderer interface. Note that the
CustomRenderer class defines getter and setter methods for the data and
listData properties, defined in the ICellRenderer interface. Other properties
and methods defined in the ICellRenderer interface (the selected property and
the setSize() method) are already defined in the CheckBox class:
-
Select File > New.
-
In the New Document dialog box that is displayed, select Flash File (ActionScript 3.0), and then click OK.
-
Select Window > Components to display the Components panel.
-
In the Components panel, drag a List component to the Stage.
-
If Flash is not displaying the Property inspector, select Window > Properties > Properties.
-
With the List component selected, set the properties in the Property inspector:
-
Instance Name: myList
-
W (width): 100
-
H (height): 300
-
X: 20
-
Y: 20
-
-
Select Frame 1 of Layer 1 in the Timeline, and select Window > Actions.
-
Type the following script in the Actions panel:
myList.setStyle("cellRenderer", CustomCellRenderer); myList.addItem({name:"Burger", price:"$5.95"}); myList.addItem({name:"Fries", price:"$1.95"}); -
Select File > Save. Give the file a name and click the OK button.
-
Select File > New.
-
In the New Document dialog box that is displayed, select ActionScript File and then click the OK button.
-
In the script window, enter the following code to define the CustomCellRenderer class:
package { import fl.controls.CheckBox; import fl.controls.listClasses.ICellRenderer; import fl.controls.listClasses.ListData; public class CustomCellRenderer extends CheckBox implements ICellRenderer { private var _listData:ListData; private var _data:Object; public function CustomCellRenderer() { } public function set data(d:Object):void { _data = d; label = d.label; } public function get data():Object { return _data; } public function set listData(ld:ListData):void { _listData = ld; } public function get listData():ListData { return _listData; } } } -
Select File > Save. Name the file CustomCellRenderer.as, put it in the same directory as the FLA file, and click the OK button.
-
Select Control > Test Movie.
You can also use a symbol in the library to define a CellRenderer. The symbol must be exported for ActionScript and the class name for the library symbol must have an associated class file that either implements the ICellRenderer interface or that extends the CellRenderer class (or one of its subclasses).
The following example defines a custom CellRenderer using a library symbol.
-
Select File > New.
-
In the New Document dialog box that is displayed, select Flash File (ActionScript 3.0), and then click OK.
-
Select Window > Components to display the Components panel.
-
In the Components panel, drag a List component to the Stage.
-
If Flash is not displaying the Property inspector, select Window > Properties > Properties.
-
With the List component selected, set the properties in the Property inspector:
-
Instance Name: myList
-
W (width): 100
-
H (height): 400
-
X: 20
-
Y: 20
-
-
Click the Parameters panel, and then double-click the second column in the dataProvider row.
-
In the Values dialog box that is displayed, click the plus sign twice to add two data elements (with labels set to label0 and label1), and then click the OK button.
-
With the Text tool, draw a text field on the Stage.
-
With the text field selected, set the properties in the Property inspector:
-
Text type: Dynamic Text
-
Instance Name: textField
-
W (width): 100
-
Font size: 24
-
X: 0
-
Y: 0
-
-
With the text field selected, select Modify > Convert To Symbol.
-
In the Convert To Symbol dialog box, make the following settings and then click OK.
-
Name: MyCellRenderer
-
Type: MovieClip
-
Export for ActionScript: Selected
-
Export in First Frame: Selected
-
Class: MyCellRenderer
-
Base Class: flash.display.MovieClip
If Flash displays an ActionScript Class Warning, click the OK button in the warning box.
-
-
Delete the instance of the new movie clip symbol from the Stage.
-
Select Frame 1 of Layer 1 in the Timeline, and select Window > Actions.
-
Type the following script in the Actions panel:
myList.setStyle("cellRenderer", MyCellRenderer); -
Select File > Save. Give the file a name and click the OK button.
-
Select File > New.
-
In the New Document dialog box that is displayed, select ActionScript File and then click the OK button.
-
In the script window, enter the following code to define the MyCellRenderer class:
package { import flash.display.MovieClip; import flash.filters.GlowFilter; import flash.text.TextField; import fl.controls.listClasses.ICellRenderer; import fl.controls.listClasses.ListData; import flash.utils.setInterval; public class MyCellRenderer extends MovieClip implements ICellRenderer { private var _listData:ListData; private var _data:Object; private var _selected:Boolean; private var glowFilter:GlowFilter; public function MyCellRenderer() { glowFilter = new GlowFilter(0xFFFF00); setInterval(toggleFilter, 200); } public function set data(d:Object):void { _data = d; textField.text = d.label; } public function get data():Object { return _data; } public function set listData(ld:ListData):void { _listData = ld; } public function get listData():ListData { return _listData; } public function set selected(s:Boolean):void { _selected = s; } public function get selected():Boolean { return _selected; } public function setSize(width:Number, height:Number):void { } public function setStyle(style:String, value:Object):void { } public function setMouseState(state:String):void{ } private function toggleFilter():void { if (textField.filters.length == 0) { textField.filters = [glowFilter]; } else { textField.filters = []; } } } } -
Select File > Save. Name the file MyCellRenderer.as, put it in the same directory as the FLA file, and click the OK button.
-
Select Control > Test Movie.
The data property is an object that contains all properties that are set for
the CellRenderer. For example, in the following class, which defines a custom
CellRenderer that extends the Checkbox class, note that the setter function for
the data property passes the value of data.label to the label property
that is inherited from the CheckBox class:
public class CustomRenderer extends CheckBox implements ICellRenderer {
private var _listData:ListData;
private var _data:Object;
public function CustomRenderer() {
}
public function set data(d:Object):void {
_data = d;
label = d.label;
}
public function get data():Object {
return _data;
}
public function set listData(ld:ListData):void {
_listData = ld;
}
public function get listData():ListData {
return _listData;
}
}
}
The selected property defines whether or not a cell is selected in the list.
A DataGrid object can have multiple columns and you can specify different cell
renderers for each column. Each column of a DataGrid is represented by a
DataGridColumn object and the DataGridColumn class includes a cellRenderer
property, for which you can define the CellRenderer for the column.
The DataGridCellEditor class defines a renderer used for editable cells in a
DataGrid object. It becomes the renderer for a cell when the editable property
of the DataGrid object is set to true and the user clicks the cell to be
edited. To define a CellRenderer for the editable cell, set the itemEditor
property for each element of the columns array of the DataGrid object.
The ImageCell class, a subclass of CellRenderer, defines an object used to render cells in which the main content of the cell is an image, SWF file, or movie clip. The ImageCell class includes the following styles for defining the appearance of the cell:
-
imagePadding—The padding that separates the edge of the cell from the edge of the image, in pixels -
selectedSkin—The skin that is used to indicate the selected state -
textOverlayAlpha—The opacity of the overlay behind the cell label -
textPadding—The padding that separates the edge of the cell from the edge of the text, in pixelsThe ImageCell class is the default CellRenderer for the TileList class.