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).
Format cellsThe 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):
disabledSkin and selectedDisabledSkin
downSkin and selectedDownSkin
overSkin and selectedOverSkin
upSkin and selectedUpSkin
The
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.
Define a custom CellRenderer classCreate a class that extends the CellRenderer class to define a custom CellRendererFor 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.
Use a class that implements the ICellRenderer interface to define a custom CellRendererYou 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.
Use a symbol to define a CellRendererYou 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.
CellRenderer propertiesThe 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.
Apply a CellRenderer for a column of a DataGrid objectA
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.
Define a CellRenderer for an editable cellThe
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.
Use an image, SWF file, or movie clip as a CellRendererThe
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 pixels
The
ImageCell class is the default CellRenderer for the TileList class.
|
|
|