CellRenderer  - AS3 Flash

Ruft ein Objekt ab, das die mit einer Komponenten verknüpften Daten darstellt, oder legt dieses fest. Wenn dieser Wert festgelegt wurde, werden die Komponentendaten gespeichert; die Komponente, die diese enthält, wird entwertet. Die entwertete Komponente wird automatisch neu erstellt.

Die Data-Eigenschaft stellt ein Objekt dar, das das Element im DataProvider enthält, das die Zelle repräsentiert. In der Regel enthält die Data-Eigenschaft Standardwerte, die je nach Komponententyp variieren. Die Daten in der List- oder ComboBox-Komponente von CellRenderer enthalten eine Beschriftung, ein Symbol und Dateneigenschaften; eine TileList: eine Beschriftung oder eine Quelleigenschaft; eine DataGrid-Zelle enthält Werte für jede Spalte. Die Data-Eigenschaft kann auch benutzerspezifische Daten enthalten, die sich auf eine bestimmte Zelle beziehen. Benutzer können CellRenderer um eine Komponente erweitern, um unterschiedliche Dateneigenschaften bei der Wiedergabe der Zelle anzuwenden.

Darüber hinaus können Sie die Elemente labelField, labelFunction, iconField, iconFunction, sourceField und sourceFunction verwenden, um festzulegen, welche Eigenschaften zum Erstellen von Beschriftungen, Symbolen und Quellen verwendet werden sollen.

Ruft die Listeneigenschaften ab, die auf die Zelle angewendet werden, z. B. die Werte index und selected, oder legt diese fest. Diese Listeneigenschaften werden automatisch aktualisiert, nachdem die Zelle entwertet wurde.

Ruft einen booleschen Wert ab bzw. legt einen booleschen Wert fest, der angibt, ob die aktuelle Zelle ausgewählt ist. Der Wert true gibt an, dass die aktuelle Zelle ausgewählt ist, der Wert false, dass diese nicht ausgewählt ist.

Der Standardwert ist false.

Erstellt eine neue CellRenderer-Instanz.

Ruft die Standardstilmatrix der aktuellen Komponente ab. Die Stilmatrix enthält den für die Komponente geeigneten Typ und hängt von dem Stil ab, der von der Komponente verwendet wird. Der Stil disabledTextFormat enthält beispielsweise den Wert null oder ein TextFormat-Objekt. Sie können diese Stile verwenden und setStyle() für die aktuelle Komponente aufrufen. Mit folgendem Code wird der Standardstil disabledTextFormat der angegebenen Komponente überschrieben:

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

Verwandte API-Elemente

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

Gibt die Größe der darzustellenden Daten an. Diese Größe wirkt sich sowohl auf die Daten als auch auf die Zelle aus, in denen sie enthalten sind. Die Größe wird vom CellRenderer verwendet, um sicherzustellen, dass die Daten und die Größe der Zelle aufeinander abgestimmt werden, um ein Überlaufen der Daten in angrenzende Zellen zu verhindern.

Parameter

Gehen Sie wie folgt vor, um das Beispiel auszuführen:

1. Fügen Sie die TileList-Komponente zur Bibliothek hinzu.
2. Erstellen Sie ein neues Symbol mit dem Namen "BlueBackground". Aktivieren Sie in seinen Symboleigenschaften das Kontrollkästchen "Export für ActionScript". Behalten Sie den Klassennamen „BlueBackground“ bei.
3. Erstellen Sie ein neues Symbol mit dem Namen "OrangeBackground". Aktivieren Sie in seinen Symboleigenschaften das Kontrollkästchen "Export für ActionScript". Behalten Sie den Klassennamen „OrangeBackground“ bei.
4. Erstellen Sie ein neues Symbol mit dem Namen "GreenBackground". Aktivieren Sie in seinen Symboleigenschaften das Kontrollkästchen "Export für ActionScript". Behalten Sie den Klassennamen „GreenBackground“ bei.
5. Erstellen Sie in jedem Symbol ein Rechteck, das jeweils 10 Pixel breit und hoch ist. Dabei sollte die Farbe der Rechtecke dem Symbolnamen entsprechen. Behalten Sie 0 als Wert für die X- und Y-Koordinaten bei.
6. Speichern Sie diesen Code als "CellRendererExample.as" im gleichen Verzeichnis wie die FLA-Datei.
7. Legen Sie in der FLA-Datei für die Dokumentklasse den Wert "CellRendererExample" fest.

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