CellRenderer  - AS3 Flash

Hämtar eller ställer in ett objekt som representerar de data som associeras med en komponent. När det här värdet har ställts in sparas komponentens data och innehållskomponenten görs ogiltig. Den ogiltiga komponenten ritas sedan om automatiskt.

Dataegenskapen representerar ett objekt som innehåller objektet i den DataProvider som cellen representerar. Vanligtvis innehåller dataegenskapen standardegenskaper, beroende på komponenttypen. I CellRenderer i en List- eller ComboBox-komponent innehåller informationen en etikett, en ikon och dataegenskaper, en TileList: en etikett och en källegenskap. En DataGrid-cell innehåller värden för varje kolumn. Dataegenskapen kan även innehålla relevanta användarspecificerade data för den specifika cellen. Användare kan utöka en CellRenderer för en komponent så att olika egenskaper av data kan användas i renderingen av cellen.

Dessutom kan elementen labelField, labelFunction, iconField, iconFunction, sourceField, och sourceFunction användas för att ange vilka egenskaper som används för att rita etiketten, ikonen och källan.

Hämtar eller ställer in listegenskaperna som används i cellen, t.ex. värdena index och selected. Dessa listegenskaper uppdateras automatiskt efter att cellen görs ogiltig.

Hämtar eller ställer in ett booleskt värde som anger om den aktuella cellen är markerad. Värdet true anger att den aktuella cellen är markerad. Värdet false anger att den inte är det.

Standardvärdet är false.

Skapar en ny CellRenderer-instans.

Hämtar standardformatförskjutningen för den aktuella komponenten. Formatförskjutningen innehåller den type som är lämplig för komponenten, beroende på det format komponenten använder. Till exempel innehåller formatet disabledTextFormat värdet null eller ett TextFormat-objekt. Du kan använda dessa format och anropa setStyle() på den aktuella komponenten. Följande kod åsidosätter standardformatet för disabledTextFormat för den angivna komponenten:

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

Relaterade API-element

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;
}

Anger måtten för dataåtergivning. Dessa mått påverkar både data och cellen. Cellrenderaren använder dem för att se till att data får plats i cellen och inte läcker till närliggande celler.

Parametrar

Följ stegen nedan:

1. Lägg till TileList-komponenten i biblioteket.
2. Skapa en ny symbol som kallas "BlueBackground" och skapa symbolens egenskaper, markera rutan "Exportera för ActionScript". Låt klassnamnet "BlueBackground" stå kvar.
3. Skapa en ny symbol som kallas "OrangeBackground" och skapa symbolens egenskaper, markera rutan "Exportera för ActionScript". Låt klassnamnet "OrangeBackground" stå kvar.
4. Skapa en ny symbol som kallas "GreenBackground" och skapa symbolens egenskaper, markera rutan "Exportera för ActionScript". Låt klassnamnet "GreenBackground" stå kvar.
5. Skapa en rektangel som är 10 pixlar bred och 10 pixlar hög i varje symbol i den färg som symbolen har namngetts med. Låt x-koordinaten 0 och y-koordinaten 0 stå kvar.
6. Spara koden som CellRendererExample.as i samma katalog som din FLA-fil.
7. Ställ in CellRendererExample som dokumentklassen i FLA-filen.

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);
    }
}