Arbeiten mit einem Zellrenderer

Formatieren von Zellen
Definieren benutzerdefinierter CellRenderer-Klassen
Eigenschaften der CellRenderer-Klasse
Anwenden von Zellrenderern auf Datenrasterspalten
Definieren von Zellrenderern für bearbeitbare Zellen
Verwenden eines Bilds, einer SWF-Datei oder eines Movieclips als Zellrenderer

„CellRenderer“ ist eine Klasse, die von List-basierten Komponenten wie „List“, „DataGrid“, „TileList“ und „ComboBox“ verwendet wird, um benutzerdefinierten Zellinhalt für deren Zeilen zu ändern und anzuzeigen. Benutzerdefinierte Zellen können Text, vorgefertigte Komponenten, wie ein Kontrollkästchen, oder jede sonstige Anzeigeobjektklasse, die Sie erstellen können, enthalten. Um Daten mithilfe eines benutzerdefinierten Zellrenderers (CellRenderer) zu rendern, können Sie entweder die CellRenderer-Klasse erweitern oder die ICellRenderer-Schnittstelle implementieren, um eine eigene benutzerdefinierte CellRenderer-Klasse zu erstellen.

Die List-, DataGrid-, TileList- und ComboBox-Klassen sind Unterklassen der SelectableList-Klasse. Die SelectableList-Klasse umfasst ein cellRenderer -Format. Dieses Format definiert das Anzeigeobjekt, das die Komponente für das Rendern der Zellen verwendet.

Sie können die Formatierung der vom Zellrenderer verwendeten Formate ändern, indem Sie die Methode setRendererStyle() des List-Objekts aufrufen (siehe Formatieren von Zellen ). Sie können auch eine benutzerdefinierte Klasse als Zellrenderer definieren (siehe Definieren benutzerdefinierter CellRenderer-Klassen ).

Formatieren von Zellen

Die CellRenderer-Klasse umfasst eine Reihe von Formaten, mit denen Sie die Formatierung der Zellen steuern können.

Die folgenden Formate erlauben die Definition der für die verschiedenen Zustände der Zellen („disabled“, „down“, „over“ und „up“) verwendeten Skins:

disabledSkin und selectedDisabledSkin
downSkin und selectedDownSkin
overSkin und selectedOverSkin
upSkin und selectedUpSkin

Die folgenden Formate dienen der Textformatierung:
disabledTextFormat
textFormat
textPadding

Sie können diese Formate festlegen, indem Sie die Methode setRendererStyle() des List-Objekts oder die Methode setStyle() des CellRenderer-Objekts aufrufen. Sie können diese Formate abrufen, indem Sie die Methode getRendererStyle() des List-Objekts oder die Methode getStyle() des CellRenderer-Objekts aufrufen. Über die Eigenschaft rendererStyles des List-Objekts oder die Methode getStyleDefinition() des CellRenderer-Objekts können Sie auch auf ein Objekt zugreifen, das alle Rendererformate als benannte Eigenschaften des Objekts definiert.

Sie können die Methode clearRendererStyle() aufrufen, um ein Format auf seinen Standardwert zurückzusetzen.

Um die Höhe der Zeilen in der Liste abzurufen oder festzulegen, verwenden Sie die Eigenschaft rowHeight des List-Objekts.

Definieren benutzerdefinierter CellRenderer-Klassen

Definition durch Erstellen einer Klasse, die die CellRenderer-Klasse erweitert

Der folgende Code enthält zum Beispiel zwei Klassen. Die ListSample-Klasse instanziiert eine List-Komponente und verwendet die andere Klasse, CustomRenderer, um den für die List-Komponente zu verwendenden Zellrenderer zu definieren. Die CustomRenderer-Klasse erweitert die CellRenderer-Klasse.

Wählen Sie „Datei“ > „Neu“.
Wählen Sie im Dialogfeld „Neues Dokument“ die Option „Flash-Datei“ (ActionScript 3.0) aus und klicken Sie dann auf „OK“.
Wählen Sie „Fenster“ > „Komponenten“, um das Bedienfeld „Komponenten“ zu öffnen.
Ziehen Sie die List-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne.
Wenn der Eigenschafteninspektor nicht angezeigt wird, wählen Sie „Fenster“ > „Eigenschaften“ > „Eigenschaften“.
Während die List-Komponente ausgewählt ist, legen Sie die Eigenschaften im Eigenschafteninspektor fest:
- Instanzname: myList
- B (Breite): 200
- H (Höhe): 300
- X: 20
- Y: 20
Wählen Sie in der Zeitleiste das Bild 1 der Ebene 1 aus und wählen Sie „Fenster“ > „Aktionen“.

Geben Sie im Bedienfeld „Aktionen“ den folgenden Code ein:

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({label:"Burger -- $5.95"}); 
myList.addItem({label:"Fries -- $1.95"});

Wählen Sie „Datei“ > „Speichern“. Geben Sie einen Dateinamen ein und klicken Sie auf „OK“.
Wählen Sie „Datei“ > „Neu“.
Wählen Sie im Dialogfeld „Neues Dokument“ die Option „ActionScript-Datei“ aus und klicken Sie dann auf „OK“.

Geben Sie den folgenden Code in das Skriptfenster ein, um die CustomCellRenderer-Klasse zu definieren.

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

Wählen Sie „Datei“ > „Speichern“. Geben Sie der Datei den Namen „CustomCellRenderer.as“, legen Sie sie im selben Verzeichnis wie die FLA-Datei ab und klicken Sie auf „OK“.
Wählen Sie „Steuerung“ > „Film testen“.

Definition durch eine Klasse, die die ICellRenderer-Schnittstelle implementiert

Sie können einen Zellrenderer auch mithilfe jeder Klasse definieren, die die DisplayObject-Klasse erbt und die ICellRenderer-Schnittstelle definiert. Mit dem folgenden Code werden zum Beispiel zwei Klassen definiert. Die ListSample2-Klasse fügt ein List-Objekt in die Anzeigeliste ein und definiert seinen Zellrenderer so, dass er die CustomRenderer-Klasse verwendet. Die CustomRenderer-Klasse erweitert die CheckBox-Klasse (welche die DisplayObject-Klasse erweitert) und implementiert die ICellRenderer-Schnittstelle. Beachten Sie, dass die CustomRenderer-Klasse Get-/Set-Methoden für die Eigenschaften data und listData definiert, die in der ICellRenderer-Schnittstelle definiert sind. Andere in der ICellRenderer-Schnittstelle definierte Eigenschaften und Methoden (die Eigenschaft selected und die Methode setSize() ) sind bereits in der CheckBox-Klasse definiert:

Wählen Sie „Datei“ > „Neu“.
Wählen Sie im Dialogfeld „Neues Dokument“ die Option „Flash-Datei“ (ActionScript 3.0) aus und klicken Sie dann auf „OK“.
Wählen Sie „Fenster“ > „Komponenten“, um das Bedienfeld „Komponenten“ zu öffnen.
Ziehen Sie die List-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne.
Wenn der Eigenschafteninspektor nicht angezeigt wird, wählen Sie „Fenster“ > „Eigenschaften“ > „Eigenschaften“.
Während die List-Komponente ausgewählt ist, legen Sie die Eigenschaften im Eigenschafteninspektor fest:
- Instanzname: myList
- B (Breite): 100
- H (Höhe): 300
- X: 20
- Y: 20
Wählen Sie in der Zeitleiste das Bild 1 der Ebene 1 aus und wählen Sie „Fenster“ > „Aktionen“.

Geben Sie im Bedienfeld „Aktionen“ den folgenden Code ein:

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({name:"Burger", price:"$5.95"}); 
myList.addItem({name:"Fries", price:"$1.95"});

Wählen Sie „Datei“ > „Speichern“. Geben Sie einen Dateinamen ein und klicken Sie auf „OK“.
Wählen Sie „Datei“ > „Neu“.
Wählen Sie im Dialogfeld „Neues Dokument“ die Option „ActionScript-Datei“ aus und klicken Sie dann auf „OK“.

Geben Sie den folgenden Code in das Skriptfenster ein, um die CustomCellRenderer-Klasse zu definieren.

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

Wählen Sie „Datei“ > „Speichern“. Geben Sie der Datei den Namen „CustomCellRenderer.as“, legen Sie sie im selben Verzeichnis wie die FLA-Datei ab und klicken Sie auf „OK“.
Wählen Sie „Steuerung“ > „Film testen“.

Definition durch ein Bibliothekssymbol

Sie können einen Zellrenderer auch mithilfe eines Symbols in der Bibliothek definieren. Das Symbol muss für ActionScript exportiert werden und der Klassenname für das Bibliothekssymbol muss mit einer Klassendatei verknüpft sein, die entweder die ICellRenderer-Schnittstelle implementiert oder die CellRenderer-Klasse (oder eine ihrer Unterklassen) erweitert.

Im folgenden Beispiel wird ein benutzerdefinierter Zellrenderer mithilfe eines Bibliothekssymbols definiert.

Wählen Sie „Datei“ > „Neu“.
Wählen Sie im Dialogfeld „Neues Dokument“ die Option „Flash-Datei“ (ActionScript 3.0) aus und klicken Sie dann auf „OK“.
Wählen Sie „Fenster“ > „Komponenten“, um das Bedienfeld „Komponenten“ zu öffnen.
Ziehen Sie die List-Komponente aus dem Bedienfeld „Komponenten“ auf die Bühne.
Wenn der Eigenschafteninspektor nicht angezeigt wird, wählen Sie „Fenster“ > „Eigenschaften“ > „Eigenschaften“.
Während die List-Komponente ausgewählt ist, legen Sie die Eigenschaften im Eigenschafteninspektor fest:
- Instanzname: myList
- B (Breite): 100
- H (Höhe): 400
- X: 20
- Y: 20
Klicken Sie auf die Registerkarte „Parameter“ und doppelklicken Sie auf die zweite Spalte in der Zeile „dataProvider“.
Klicken Sie im Dialogfeld „Werte“ zwei Mal auf das Pluszeichen, um zwei Datenelemente einzufügen (deren Beschriftungen Sie auf „label0“ und „label1“ setzen), und klicken Sie auf „OK“.
Zeichnen Sie mit dem Textwerkzeug ein Textfeld auf der Bühne.
Während das Textfeld ausgewählt ist, legen Sie die Eigenschaften im Eigenschafteninspektor fest:
- Texttyp: Dynamischer Text
- Instanzname: textField
- B (Breite): 100
- Schriftgröße: 24
- X: 0
- Y: 0
Während das Textfeld noch ausgewählt ist, wählen Sie „Modifizieren“ > „In Symbol konvertieren“.
Legen Sie im Dialogfeld „In Symbol konvertieren“ die folgenden Einstellungen fest und klicken Sie auf „OK“.
- Name: MyCellRenderer
- Typ: MovieClip
- Export für ActionScript: ausgewählt
- Export in Bild 1: ausgewählt
- Klasse: MyCellRenderer
- Basisklasse: flash.display.MovieClip
  
  Falls Flash eine ActionScript-Klasse-Warnung anzeigt, klicken Sie im Dialogfeld mit der Warnmeldung auf „OK“.
Löschen Sie die Instanz des neuen Movieclipsymbols von der Bühne.
Wählen Sie in der Zeitleiste das Bild 1 der Ebene 1 aus und wählen Sie „Fenster“ > „Aktionen“.
Geben Sie im Bedienfeld „Aktionen“ den folgenden Code ein:
```
myList.setStyle("cellRenderer", MyCellRenderer);
```
Wählen Sie „Datei“ > „Speichern“. Geben Sie einen Dateinamen ein und klicken Sie auf „OK“.
Wählen Sie „Datei“ > „Neu“.
Wählen Sie im Dialogfeld „Neues Dokument“ die Option „ActionScript-Datei“ aus und klicken Sie dann auf „OK“.

Geben Sie in das Skriptfenster den folgenden Code ein, um die MyCellRenderer-Klasse zu definieren.

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 = []; 
            } 
        } 
    } 
}

Wählen Sie „Datei“ > „Speichern“. Geben Sie der Datei den Namen „MyCellRenderer.as“, legen Sie sie im selben Verzeichnis wie die FLA-Datei ab und klicken Sie auf „OK“.
Wählen Sie „Steuerung“ > „Film testen“.

Eigenschaften der CellRenderer-Klasse

Die Eigenschaft data ist ein Objekt, dass alle Eigenschaften enthält, die für den Zellrenderer festgelegt worden sind. In der folgenden Klasse etwa, die einen benutzerdefinierten Zellrenderer definiert, der die CheckBox-Klasse erweitert, übergibt die Set-Funktion für die Eigenschaft data den Wert data.label an die Eigenschaft label , die von der CheckBox-Klasse geerbt wurde:

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

Die Eigenschaft selected definiert, ob eine Zelle in der Liste ausgewählt ist oder nicht.

Anwenden von Zellrenderern auf Datenrasterspalten

Ein DataGrid-Objekt kann mehrere Spalten enthalten und Sie können für jede Spalte verschiedene CellRenderer festlegen. Jede Spalte einer DataGrid-Komponente wird von einem DataGridColumn-Objekt repräsentiert. Die DataGridColumn-Klasse enthält die Eigenschaft cellRenderer , für die Sie einen CellRenderer für die Spalte definieren können.

Definieren von Zellrenderern für bearbeitbare Zellen

Die DataGridCellEditor-Klasse definiert einen Renderer, der für bearbeitbare Zellen in einem DataGrid-Objekt verwendet wird. Er wird zum Renderer für eine Zelle, wenn die Eigenschaft editable des DataGrid-Objekts auf true gesetzt ist und der Benutzer auf die betreffende Zelle klickt. Um einen Zellrenderer für die bearbeitbare Zelle zu definieren, setzen Sie die Eigenschaft itemEditor für jedes Element des columns -Arrays des DataGrid-Objekts.

Verwenden eines Bilds, einer SWF-Datei oder eines Movieclips als Zellrenderer

Die ImageCell-Klasse eine Unterklasse von CellRenderer, definiert ein Objekt für das Rendern von Zellen, in denen der Hauptinhalt der Zelle ein Bild, eine SWF-Datei oder ein Movieclip ist. Die ImageCell-Klasse umfasst die folgenden Formate für die Definition der Zelldarstellung:

imagePadding: Der Rand zwischen Zelle und Bild, also der Abstand zwischen Zell- und Bildbegrenzung (in Pixel).
selectedSkin: Die Skin, die verwendet wird, um den ausgewählten Zustand anzuzeigen.
textOverlayAlpha: Die Deckkraft der Überlagerung hinter der Zellenbeschriftung.
textPadding: Der Rand zwischen Zelle und Text, also der Abstand zwischen Zell- und Textbegrenzung (in Pixel).

Die ImageCell-Klasse ist der Standardzellrenderer für die TileList-Klasse.