CellRenderer  - AS3 Flash

Hiermee wordt een object opgehaald of ingesteld dat de gegevens vertegenwoordigt die aan een component zijn gekoppeld. Wanneer deze waarde is ingesteld, worden de componentgegevens opgeslagen en wordt de omvattende component ongeldig gemaakt. De ongeldig gemaakte component wordt vervolgens automatisch opnieuw getekend.

De eigenschap data vertegenwoordigt een object met het item in de DataProvider dat de cel vertegenwoordigt. De eigenschap data bevat meestal standaardeigenschappen, afhankelijk van het type component. In CellRenderer in een component List of ComboBox bestaan de gegevens uit een label, pictogram en gegevenseigenschappen. In een TileList bestaan de gegevens uit een label en de eigenschap source. Een DataGrid-cel bevat waarden voor elke kolom. De eigenschap data kan ook door de gebruiker opgegeven gegevens bevatten die relevant zijn voor de specifieke cel. Gebruikers kunnen een CellRenderer uitbreiden, zodat een component bij het renderen van de cel verschillende eigenschappen van de gegevens kan gebruiken.

Daarnaast kan via de elementen labelField, labelFunction, iconField, iconFunction, sourceField en sourceFunction worden opgegeven welke eigenschappen worden gebruikt voor het tekenen van respectievelijk het label, het pictogram en de bron.

Hiermee worden de lijsteigenschappen opgehaald of ingesteld die op de cel worden toegepast (bijvoorbeeld de index en geselecteerde waarden). Deze lijsteigenschappen worden automatisch bijgewerkt nadat de cel ongeldig is gemaakt.

Hiermee wordt een Booleaanse waarde opgehaald of ingesteld die aangeeft of de huidige cel is geselecteerd. De waarde true geeft aan dat de huidige cel is geselecteerd; de waarde false geeft aan dat dit niet het geval is.

De standaardwaarde is false.

Hiermee wordt een nieuwe instantie CellRenderer gemaakt.

Hiermee wordt de standaardstijlkaart voor de huidige component opgehaald. Op de stijlkaart vindt u het type dat voor de component geschikt is, afhankelijk van de stijl die de component gebruikt. De stijl disabledTextFormat bevat bijvoorbeeld de waarde null of een object TextFormat. U kunt deze stijlen gebruiken en setStyle() aanroepen voor de huidige component. De volgende code overschrijft de standaardstijl disabledTextFormat voor de opgegeven component:

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

Verwante API-elementen

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

Hiermee worden de afmetingen opgegeven waarmee de gegevens moeten worden gerenderd. Deze afmetingen hebben invloed op zowel de gegevens als de cel die deze gegevens bevat; ze worden door de celrenderer gebruikt om de gegevens in de cel te laten passen en niet in aangrenzende cellen te laten overvloeien.

Parameters

U kunt als volgt het voorbeeld uitvoeren:

1. Voeg de component TileList toe aan de bibliotheek.
2. Maak een nieuw symbool met de naam BlueBackground en schakel in symbooleigenschappen het selectievakje Exporteren voor ActionScript in. Gebruik de klassenaam BlueBackground.
3. Maak een nieuw symbool met de naam OrangeBackground en schakel in symbooleigenschappen het selectievakje Exporteren voor ActionScript in. Gebruik de klassenaam OrangeBackground.
4. Maak een nieuw symbool met de naam GreenBackground en schakel in symbooleigenschappen het selectievakje Exporteren voor ActionScript in. Gebruik de klassenaam GreenBackground.
5. Maak in elk symbool een rechthoek van 10 pixels breedte en 10 pixels hoogte, met de kleur waarnaar het symbool werd genoemd. Laat de x- en y-coördinaten ongewijzigd (0,0).
6. Sla deze code op als CellRendererExample.as in dezelfde map als het FLA-bestand.
7. Stel de klasse Document in het FLA-bestand in op 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);
    }
}