Werken met een CellRenderer

CellRenderer is een klasse die door op lijst gebaseerde componenten, zoals List, DataGrid, TileList en ComboBox, worden gebruikt om aangepaste celinhoud voor elke rij te bewerken en weer te geven. Een aangepaste cel kan tekst bevatten, een vooraf gebouwde component zoals CheckBox, of een weergaveobjectklasse die u kunt maken. Als u gegevens rendert met een aangepaste CellRenderer, kunt u de klasse CellRenderer uitbreiden of de interface ICellRenderer implementeren om uw eigen aangepaste CellRenderer-klasse te maken.

De klassen List, DataGrid, TileList en ComboBox zijn subklassen van de klasse SelectableList. De klasse SelectableList bevat de stijl cellRenderer . Met deze stijl wordt het weergaveobject gedefinieerd dat de component gebruikt om cellen te renderen.

U kunt de opmaak van de stijlen die worden gebruikt door de CellRenderer aanpassen door de methode setRendererStyle() van het lijstobject aan te roepen (zie Cellen opmaken ). U kunt ook een aangepaste klasse definiëren om als de CellRenderer te gebruiken (zie Een aangepaste CellRenderer-klasse definiëren ).

Cellen opmaken

De klasse CellRenderer bevat een aantal stijlen waarmee u de opmaak van de cel kunt bepalen.

Met de volgende stijlen kunt u de skins definiëren die worden gebruikt voor de verschillende toestanden van de cel (uitgeschakeld, omlaag, over en omhoog):

  • disabledSkin en selectedDisabledSkin

  • downSkin en selectedDownSkin

  • overSkin en selectedOverSkin

  • upSkin en selectedUpSkin

    De volgende stijlen worden toegepast op tekstopmaak:

  • disabledTextFormat

  • textFormat

  • textPadding

U kunt deze stijlen instellen door de methode setRendererStyle() van het lijstobject of de methode setStyle() van het CellRenderer-object aan te roepen. U kunt deze stijlen verkrijgen door de methode getRendererStyle() van het lijstobject of de methode getStyle() van het CellRenderer-object aan te roepen. U kunt ook via de eigenschap rendererStyles van het lijstobject of de methode getStyleDefinition() van het CellRenderer-object een object openen waarmee alle renderstijlen worden gedefinieerd (als benoemde eigenschappen van het object).

U kunt de methode clearRendererStyle() aanroepen om de standaardwaarde van een stijl te herstellen.

Gebruik de eigenschap rowHeight van het lijstobject om de hoogte van de rijen in de lijst op te halen of in te stellen.

Een aangepaste CellRenderer-klasse definiëren

Een klasse maken waarmee de klasse CellRenderer wordt uitgebreid om een aangepaste CellRenderer te definiëren

De volgende code bevat bijvoorbeeld twee klassen. De klasse ListSample instantieert een component List en gebruikt de andere klasse, CustomRenderer, om de celrenderer te definiëren die moet worden gebruikt voor de component List. De klasse CustomRenderer breidt de klasse CellRenderer uit.

  1. Selecteer Bestand > Nieuw.

  2. Selecteer Flash-bestand (ActionScript 3.0) in het dialoogvenster Nieuw document dat wordt weergegeven en klik vervolgens op OK.

  3. Selecteer Venster > Componenten om het deelvenster Componenten weer te geven.

  4. Sleep een component List van het deelvenster Componenten naar het werkgebied.

  5. Selecteer Venster > Eigenschappen > Eigenschappen wanneer Flash Eigenschapcontrole niet weergeeft.

  6. Selecteer de component List en stel de eigenschappen in het deelvenster Eigenschappen in:

    • Instantienaam: myList

    • B (breedte): 200

    • H (hoogte): 300

    • X: 20

    • Y: 20

  7. Selecteer frame 1 van laag 1 in de tijdlijn en selecteer Venster > Handelingen.

  8. Typ het volgende script in het deelvenster Handelingen: 

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

  9. Selecteer Bestand > Opslaan. Geef het bestand een naam en klik op OK.

  10. Selecteer Bestand > Nieuw.

  11. Selecteer ActionScript-bestand (ActionScript 3.0) in het dialoogvenster Nieuw document dat wordt weergegeven en klik vervolgens op OK.

  12. Voer in het scriptvenster de volgende code in om de aangepaste CustomCellRenderer-klasse te definiëren: 

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

  13. Selecteer Bestand > Opslaan. Geef het bestand de naam CustomCellRenderer.as, sla het bestand op in dezelfde map als het FLA-bestand en klik op OK.

  14. Selecteer Besturing > Film testen.

Een klasse gebruiken waarmee de interface ICellRenderer wordt geïmplementeerd om een aangepaste CellRenderer te definiëren

U kunt ook een CellRenderer definiëren met een klasse die de klasse DisplayObject overerft en de interface ICellRenderer implementeert. Met de volgende code worden bijvoorbeeld twee klassen gedefinieerd. De klasse ListSample2 voegt een List-object toe aan het weergaveoverzicht en de CellRenderer wordt zo gedefinieerd dat de klasse CustomRenderer wordt gebruikt. De klasse CustomRenderer breidt de klasse CheckBox (waarmee de klasse DisplayObject wordt uitgebreid) uit en implementeert de interface ICellRenderer. Met de klasse CustomRenderer worden de methoden getter en setter gedefinieerd voor de eigenschappen data en listData die zijn gedefinieerd in de interface ICellRenderer. Andere eigenschappen en methoden die zijn gedefinieerd in de interface ICellRenderer (de eigenschap selected en de methode setSize() ), zijn al gedefinieerd in de klasse CheckBox:

  1. Selecteer Bestand > Nieuw.

  2. Selecteer Flash-bestand (ActionScript 3.0) in het dialoogvenster Nieuw document dat wordt weergegeven en klik vervolgens op OK.

  3. Selecteer Venster > Componenten om het deelvenster Componenten weer te geven.

  4. Sleep een component List van het deelvenster Componenten naar het werkgebied.

  5. Selecteer Venster > Eigenschappen > Eigenschappen wanneer Flash Eigenschapcontrole niet weergeeft.

  6. Selecteer de component List en stel de eigenschappen in het deelvenster Eigenschappen in:

    • Instantienaam: myList

    • B (breedte): 100

    • H (hoogte): 300

    • X: 20

    • Y: 20

  7. Selecteer frame 1 van laag 1 in de tijdlijn en selecteer Venster > Handelingen.

  8. Typ het volgende script in het deelvenster Handelingen: 

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

  9. Selecteer Bestand > Opslaan. Geef het bestand een naam en klik op OK.

  10. Selecteer Bestand > Nieuw.

  11. Selecteer ActionScript-bestand (ActionScript 3.0) in het dialoogvenster Nieuw document dat wordt weergegeven en klik vervolgens op OK.

  12. Voer in het scriptvenster de volgende code in om de aangepaste CustomCellRenderer-klasse te definiëren: 

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

  13. Selecteer Bestand > Opslaan. Geef het bestand de naam CustomCellRenderer.as, sla het bestand op in dezelfde map als het FLA-bestand en klik op OK.

  14. Selecteer Besturing > Film testen.

Een symbool geruiken om een CellRenderer te definiëren

U kunt ook een symbool in de bibliotheek gebruiken om een CellRenderer te definiëren. Het symbool moet worden geëxporteerd voor ActionScript en aan de klassenaam voor het bibliotheeksymbool moet een klassebestand zijn gekoppeld waarmee de interface ICellRenderer wordt geïmplementeerd of de klasse CellRenderer (of een van de subklassen) wordt uitgebreid.

In het volgende voorbeeld wordt een aangepaste CellRenderer gedefinieerd met een bibliotheeksymbool.

  1. Selecteer Bestand > Nieuw.

  2. Selecteer Flash-bestand (ActionScript 3.0) in het dialoogvenster Nieuw document dat wordt weergegeven en klik vervolgens op OK.

  3. Selecteer Venster > Componenten om het deelvenster Componenten weer te geven.

  4. Sleep een component List van het deelvenster Componenten naar het werkgebied.

  5. Selecteer Venster > Eigenschappen > Eigenschappen wanneer Flash Eigenschapcontrole niet weergeeft.

  6. Selecteer de component List en stel de eigenschappen in het deelvenster Eigenschappen in:

    • Instantienaam: myList

    • B (breedte): 100

    • H (hoogte): 400

    • X: 20

    • Y: 20

  7. Klik in het deelvenster Parameters en dubbelklik op de tweede kolom in de dataProvider-rij.

  8. Klik in het dialoogvenster Waarden twee keer op het plusteken om twee gegevenselementen toe te voegen (met labels ingesteld op label0 en label1) en klik vervolgens op de knop OK.

  9. Gebruik het gereedschap Tekst om een tekstveld in het werkgebied te tekenen.

  10. Wanneer het tekstveld is geselecteerd, stelt u de eigenschappen in Eigenschapcontrole in:

    • Texttype: Dynamische tekst

    • Instantienaam: textField

    • B (breedte): 100

    • Tekengrootte: 24

    • X: 0

    • Y: 0

  11. Selecteer Wijzigen > Omzetten in symbool terwijl het tekstveld is geselecteerd.

  12. Geef in het dialoogvenster Omzetten in symbool de volgende instellingen op en klik vervolgens op OK.

    • Naam: MyCellRenderer

    • Type: MovieClip

    • Exporteren voor ActionScript: Geselecteerd

    • Exporteren in eerste frame: Geselecteerd

    • Klasse: MyCellRenderer

    • Basisklasse: flash.display.MovieClip

      Als er een waarschuwingsbericht over de ActionScript-klasse wordt weergegeven, klikt u in het bericht op de knop OK.

  13. Verwijder de instantie van het nieuwe filmclipsymbool uit het werkgebied.

  14. Selecteer frame 1 van laag 1 in de tijdlijn en selecteer Venster > Handelingen.

  15. Typ het volgende script in het deelvenster Handelingen: 

    myList.setStyle("cellRenderer", MyCellRenderer);

  16. Selecteer Bestand > Opslaan. Geef het bestand een naam en klik op OK.

  17. Selecteer Bestand > Nieuw.

  18. Selecteer ActionScript-bestand (ActionScript 3.0) in het dialoogvenster Nieuw document dat wordt weergegeven en klik vervolgens op OK.

  19. Voer in het scriptvenster de volgende code in om de klasse MyCellRenderer te definiëren: 

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

  20. Selecteer Bestand > Opslaan. Geef het bestand de naam MyCellRenderer.as, sla het bestand op in dezelfde map als het FLA-bestand en klik op OK.

  21. Selecteer Besturing > Film testen.

Eigenschappen van CellRenderer

De eigenschap data is een object dat alle eigenschappen bevat die zijn ingesteld voor de CellRenderer. In de volgende klasse, waarmee een aangepaste CellRenderer wordt gedefinieerd waarmee de klasse Checkbox wordt uitgebreid, wordt bijvoorbeeld met de functie setter voor de eigenschap data de waarde van data.label doorgegeven aan de eigenschap label die wordt overerfd van de klasse CheckBox: 

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

Met de eigenschap selected wordt gedefinieerd of een cel in de lijst wordt geselecteerd of niet.

Een CellRenderer toepassen voor een kolom van een DataGrid-object

Een object DataGrid kan meerdere kolommen bevatten en u kunt verschillende celrenderers opgeven voor elke kolom. Elke kolom van een DataGrid wordt vertegenwoordigd door een object DataGridColumn en de klasse DataGridColumn bevat de eigenschap cellRenderer waarvoor u de CellRenderer voor de kolom kunt definiëren.

Een CellRenderer definiëren voor een bewerkbare cel

Met de klasse DataGridCellEditor wordt een renderer voor bewerkbare cellen in een DataGrid-object gedefinieerd. Dit wordt de renderer voor een cel wanneer de eigenschap editable van het DataGrid-object wordt ingesteld op true en de gebruiker op de cel klikt die moet worden bewerkt. Als u een CellRenderer voor de bewerkbare cel wilt definiëren, stelt u de eigenschap itemEditor in voor elk element van de array columns van het DataGrid-object.

Een afbeelding, SWF-bestand of filmclip gebruiken als een CellRenderer

Met de klasse ImageCell, een subklasse van CellRenderer, wordt een object gedefinieerd dat wordt gebruikt om cellen te renderen waarvan de belangrijkste inhoud uit een afbeelding, SWF-bestand of filmclip bestaat. De klasse ImageCell bevat de volgende stijlen voor het definiëren van de weergave van de cel:

  • imagePadding —De opvulling die fungeert als scheiding tussen de rand van de cel en de rand van de afbeelding, in pixels

  • selectedSkin —De skin die wordt gebruikt om de geselecteerde toestand aan te duiden

  • textOverlayAlpha —De dekking van de bedekking achter het cellabel

  • textPadding —De opvulling die fungeert als scheiding tussen de rand van de cel en de rand van de tekst, in pixels

    De klasse ImageCell is de standaard CellRenderer voor de klasse TileList.