CellRenderer  - AS3 Flash

Gets or sets an Object that represents the data that is associated with a component. When this value is set, the component data is stored and the containing component is invalidated. The invalidated component is then automatically redrawn.

The data property represents an object containing the item in the DataProvider that the cell represents. Typically, the data property contains standard properties, depending on the component type. In CellRenderer in a List or ComboBox component the data contains a label, icon, and data properties; a TileList: a label and a source property; a DataGrid cell contains values for each column. The data property can also contain user-specified data relevant to the specific cell. Users can extend a CellRenderer for a component to utilize different properties of the data in the rendering of the cell.

Additionally, the labelField, labelFunction, iconField, iconFunction, sourceField, and sourceFunction elements can be used to specify which properties are used to draw the label, icon, and source respectively.

Gets or sets the list properties that are applied to the cell--for example, the index and selected values. These list properties are automatically updated after the cell is invalidated.

Gets or sets a Boolean value that indicates whether the current cell is selected. A value of true indicates that the current cell is selected; a value of false indicates that it is not.

The default value is false.

Creates a new CellRenderer instance.

Retrieves the default style map for the current component. The style map contains the type that is appropriate for the component, depending on the style that the component uses. For example, the disabledTextFormat style contains a value of null or a TextFormat object. You can use these styles and call setStyle() on the current component. The following code overrides the default disabledTextFormat style on the specified component:

componentInstance.setStyle("disabledTextFormat", new TextFormat());

Related API Elements

import fl.controls.*;
import fl.containers.*;
import fl.controls.listClasses.*;
import fl.controls.dataGridClasses.*;
import fl.controls.progressBarClasses.*;
import fl.core.UIComponent;
import fl.data.DataProvider;

var dp:DataProvider = new DataProvider();
dp.addItem( { label: "BaseScrollPane",    data:BaseScrollPane } );
dp.addItem( { label: "Button",             data:Button } );
dp.addItem( { label: "CellRenderer",    data:CellRenderer } );
dp.addItem( { label: "CheckBox",         data:CheckBox } );
dp.addItem( { label: "ColorPicker",     data:ColorPicker } );
dp.addItem( { label: "ComboBox",         data:ComboBox } );
dp.addItem( { label: "DataGrid",         data:DataGrid } );
dp.addItem( { label: "HeaderRenderer",    data:HeaderRenderer } );
dp.addItem( { label: "ImageCell",        data:ImageCell } );
dp.addItem( { label: "IndeterminateBar",data:IndeterminateBar } );
dp.addItem( { label: "Label",             data:Label } );
dp.addItem( { label: "List",             data:List } );
dp.addItem( { label: "NumericStepper",     data:NumericStepper } );
dp.addItem( { label: "ProgressBar",     data:ProgressBar } );
dp.addItem( { label: "RadioButton",     data:RadioButton } );
dp.addItem( { label: "ScrollPane",         data:ScrollPane } );
dp.addItem( { label: "Slider",             data:Slider } );
dp.addItem( { label: "TextArea",         data:TextArea } );
dp.addItem( { label: "TextInput",         data:TextInput } );
dp.addItem( { label: "TileList",         data:TileList } );
dp.addItem( { label: "UILoader",         data:UILoader } );
dp.addItem( { label: "UIComponent",     data:UIComponent } );

var cb:ComboBox = new ComboBox();
cb.move(10,10);
cb.setSize(300,25);
cb.prompt = "Select a component to view its styles";
cb.rowCount = 12;
cb.dataProvider = dp;
cb.addEventListener(Event.CHANGE, showStyleDefinition);
addChild(cb);

var dg:DataGrid = new DataGrid();
dg.setSize(425,300);
dg.move(10,50);
dg.columns = [ new DataGridColumn("StyleName"), new DataGridColumn("DefaultValue") ];
addChild(dg);

function showStyleDefinition(e:Event):void {
    var componentClass:Class = e.target.selectedItem.data as Class;
    var styles:Object = componentClass["getStyleDefinition"].call(this);
    trace(styles.toString());
    var styleData:DataProvider = new DataProvider();
    for(var i:* in styles) {
        trace(i + " : " + styles[i]);
        styleData.addItem( { StyleName:i, DefaultValue:styles[i] } );
    }
    styleData.sortOn("StyleName");
    dg.dataProvider = styleData;
}

Specifies the dimensions at which the data should be rendered. These dimensions affect both the data and the cell that contains it; the cell renderer uses them to ensure that the data fits the cell and does not bleed into adjacent cells.

Parameters

To run the example, follow these steps:

1. Add the TileList component to the library.
2. Create a new symbol called "BlueBackground" and in its symbol properties, check the box that says "Export for ActionScript". Leave the class name as "BlueBackground".
3. Create a new symbol called "OrangeBackground" and in its symbol properties, check the box that says "Export for ActionScript". Leave the class name as "OrangeBackground".
4. Create a new symbol called "GreenBackground" and in its symbol properties, check the box that says "Export for ActionScript". Leave the class name as "GreenBackground".
5. In each symbol create a rectangle that is 10 pixels wide and 10 pixels tall, of the color the symbol is named. Leave it at x coordinate 0 and y coordinate 0.
6. Save this code as CellRendererExample.as in the same directory as your FLA file.
7. Set the Document class in the FLA file to CellRendererExample.

package
{ 
    import fl.controls.TileList;
    import fl.core.UIComponent;
    import fl.data.DataProvider;
    import fl.events.ListEvent;
    import flash.display.Sprite;
    import flash.events.Event;
    
    public class CellRendererExample extends Sprite
    {
        public function CellRendererExample() {
            var dp:DataProvider = new DataProvider();
            var totalEntries:uint = 42;
            var i:uint;
            for(i=0; i<totalEntries; i++) {
                dp.addItem( { label:"Item "+i } );            
            }
            
            var myTileList = new TileList();
            myTileList.dataProvider = dp;
            myTileList.allowMultipleSelection = true;
            myTileList.columnWidth = 125;
            myTileList.rowHeight = 25;
            myTileList.columnCount = 3;
            myTileList.rowCount = 6;
            myTileList.move(10,10);
            myTileList.setStyle('cellRenderer', MyRenderer);    
            myTileList.addEventListener(ListEvent.ITEM_CLICK, onClick);
            addChild(myTileList);
        }
        private function onClick(e:ListEvent):void {
            var cr:MyRenderer = e.target.itemToCellRenderer(e.item) as MyRenderer;
            trace(cr.customProperty);    
        }
    }
}

import fl.controls.listClasses.CellRenderer;

class MyRenderer extends CellRenderer
{
    public var customProperty:String = "foo";
    
    public function MyRenderer() {
        var originalStyles:Object = CellRenderer.getStyleDefinition();
        setStyle("upSkin",BlueBackground);
        setStyle("downSkin",GreenBackground);
        setStyle("overSkin",OrangeBackground);
        setStyle("selectedUpSkin",originalStyles.selectedUpSkin);
        setStyle("selectedDownSkin",originalStyles.selectedDownSkin);
        setStyle("selectedOverSkin",originalStyles.selectedOverSkin);
    }
}