Arbeta med en CellRenderer

Formatera celler
Definiera en anpassad CellRenderer-klass
CellRenderer-egenskaper
Använda en CellRenderer för en kolumn i ett DataGrid-objekt
Definiera en CellRenderer för en redigerbar cell
Använda en bild, SWF-fil eller ett filmklipp som en CellRenderer

CellRenderer är en klass som List-baserade komponenter, till exempel List, DataGrid, TileList och ComboBox, använder för att ändra och visa anpassat cellinnehåll för sina rader. En anpassad cell kan innehålla text, en fördefinierad komponent, t.ex. en CheckBox, eller en visningsobjektklass som du skapar. Om du vill återge data med en anpassad CellRenderer kan du antingen utöka CellRenderer-klassen, eller implementera gränssnittet ICellRenderer för att skapa en egen anpassad CellRenderer-klass.

Klasserna List, DataGrid, TileList och ComboBox är underklasser till klassen SelectableList. Klassen SelectableList innehåller en cellRenderer -stil. Den här stilen definierar visningsobjektet som komponenten använder för att återge celler.

Du kan justera formateringen av stilarna som används av CellRenderer genom att anropa metoden setRendererStyle() för List-objektet (se Formatera celler ). Du kan också definiera en anpassad klass som du använder som CellRenderer (se Definiera en anpassad CellRenderer-klass ).

Formatera celler

Klassen CellRenderer innehåller flera stilar som du använder för att styra cellens format.

Med stilarna nedan kan du definiera skalen som används för cellens olika lägen (inaktiverad, ned, över och upp):

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

Följande stilar anger textformateringen:
disabledTextFormat
textFormat
textPadding

Du kan använda stilarna genom att anropa metoden setRendererStyle() för List-objektet, eller genom att anropa metoden setStyle() för objektet CellRenderer. Du kan hämta stilarna genom att anropa metoden getRendererStyle() för List-objektet eller genom att anropa medtoden getStyle() för objektet CellRenderer. Du kan också komma åt ett objekt som definierar alla renderingsstilar (som namngivna egenskaper för objektet) via egenskapen rendererStyles för List-objektet eller metoden getStyleDefinition() för objektet CellRenderer.

Anropa metoden clearRendererStyle() om du vill återställa en stil till dess standardvärde.

Om du vill hämta eller ange höjden på raderna i listan använder du egenskapen rowHeight för List-objektet.

Definiera en anpassad CellRenderer-klass

Skapa en klass som utökar CellRenderer-klassen för att definiera en anpassad CellRenderer

Följande kod innehåller till exempel två klasser. Klassen ListSample instansierar en List-komponent och den använder den andra klassen, CustomRenderer, för att definiera cellrenderaren som ska användas för List-komponenten. Klassen CustomRenderer utökar klassen CellRenderer.

Välj Arkiv > Nytt.
I dialogrutan Nytt dokument som visas markerar du Flash File (ActionScript 3.0) och klickar på OK.
Välj Fönster > Komponenter så visas panelen Komponenter.
I komponentpanelen drar du en List-komponent till scenen.
Om Flash inte visar egenskapsinspektören väljer du Fönster > Egenskaper > Egenskaper.
När List-komponenten är markerad anger du egenskaperna i egenskapsinspektören:
- Variantnamn: myList
- W (bredd): 200
- H (höjd): 300
- X: 20
- Y: 20
Välj bildruta 1 i lager 2 på tidslinjen och välj Fönster > Åtgärder.

Lägg till följande skript i åtgärdspanelen:

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

Välj Arkiv > Spara. Skriv ett namn på filen och klicka på OK.
Välj Arkiv > Nytt.
I dialogrutan Nytt dokument som visas markerar du ActionScript File och klickar på OK.

I skriptfönstret anger du följande kod för att definiera klassen CustomCellRenderer:

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

Välj Arkiv > Spara. Kalla filen CustomCellRenderer.as, placera den i samma katalog som FLA-filen och klicka på OK.
Välj Kontroll > Testa filmen.

Använda en klass som implementerar gränssnittet ICellRenderer för att definiera en anpassad CellRenderer

Du kan också definiera en CellRenderer med en klass som ärver DisplayObject-klassen och implementerar IcellRenderer-gränssnittet. Följande kod definierar till exempel två klasser. Klassen ListSample2 lägger till ett List-objekt till visningslistan och definierar dess CellRenderer för at använda CustomRenderer-klassen. Klassen CustomRenderer utökar CheckBox-klassen (som utökar DisplayObject-klassen) och implementerar gränssnittet ICellRenderer. Observera att CustomRenderer-klassen definierar get- och set-metoderna för egenskaperna data och listData som definieras i gränssnittet ICellRenderer. Andra egenskaper och metoder som är definierade i gränssnittet ICellRenderer (egenskapen selected och metoden setSize() ) har redan definierats i klassen CheckBox:

Välj Arkiv > Nytt.
I dialogrutan Nytt dokument som visas markerar du Flash File (ActionScript 3.0) och klickar på OK.
Välj Fönster > Komponenter så visas panelen Komponenter.
I komponentpanelen drar du en List-komponent till scenen.
Om Flash inte visar egenskapsinspektören väljer du Fönster > Egenskaper > Egenskaper.
När List-komponenten är markerad anger du egenskaperna i egenskapsinspektören:
- Variantnamn: myList
- W (bredd): 100
- H (höjd): 300
- X: 20
- Y: 20
Välj bildruta 1 i lager 2 på tidslinjen och välj Fönster > Åtgärder.

Lägg till följande skript i åtgärdspanelen:

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

Välj Arkiv > Spara. Skriv ett namn på filen och klicka på OK.
Välj Arkiv > Nytt.
I dialogrutan Nytt dokument som visas markerar du ActionScript File och klickar på OK.

I skriptfönstret anger du följande kod för att definiera klassen CustomCellRenderer:

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

Välj Arkiv > Spara. Kalla filen CustomCellRenderer.as, placera den i samma katalog som FLA-filen och klicka på OK.
Välj Kontroll > Testa filmen.

Använd en symbol för att definiera en CellRenderer

Du kan också använda en symbol i biblioteket för att definiera en CellRenderer. Symbolen måste exporteras för ActionScript, och bibliotekssymbolens klassnamn måste ha en associerad klassfil som antingen implementerar gränssnittet ICellRenderer eller utökar klassen CellRenderer (eller en av dess underklasser).

Följande exempel definierar en anpassad CellRenderer som använder en bibliotekssymbol.

Välj Arkiv > Nytt.
I dialogrutan Nytt dokument som visas markerar du Flash File (ActionScript 3.0) och klickar på OK.
Välj Fönster > Komponenter så visas panelen Komponenter.
I komponentpanelen drar du en List-komponent till scenen.
Om Flash inte visar egenskapsinspektören väljer du Fönster > Egenskaper > Egenskaper.
När List-komponenten är markerad anger du egenskaperna i egenskapsinspektören:
- Variantnamn: myList
- W (bredd): 100
- H (höjd): 400
- X: 20
- Y: 20
Klicka på panelen Parametrar och dubbelklicka sedan på den andra kolumnen i dataProvider-raden.
I dialogrutan Värden som visas klickar du två gånger på plustecknet för att lägga till två dataelement (med etiketterna angivna till label0 och label1). Sedan klickar du på OK.
Rita ett textfält på scenen med hjälp av textverktyget.
När textfältet är markerat anger du egenskaperna i panelen egenskapsinspektören:
- Texttyp: Dynamisk text
- Variantnamn: textField
- W (bredd): 100
- Teckensnittsstorlek: 24
- X: 0
- Y: 0
När textfältet är markerat väljer du Ändra > Konvertera till symbol.
Gör följande inställningar i dialogrutan Konvertera till symbol och klicka sedan på OK.
- Namn: MyCellRenderer
- Typ: MovieClip
- Exportera för ActionScript: Markerat
- Exportera i första bildrutan: Markerat
- Klass: MyCellRenderer
- Basklass: flash.display.MovieClip
  
  Om Flash visar en ActionScript-klassvarning klickar du på OK i varningsrutan.
Ta bort förekomsten av den nya filmklippssymbolen från scenen.
Välj bildruta 1 i lager 2 på tidslinjen och välj Fönster > Åtgärder.

Lägg till följande skript i åtgärdspanelen:

myList.setStyle("cellRenderer", MyCellRenderer);

Välj Arkiv > Spara. Skriv ett namn på filen och klicka på OK.
Välj Arkiv > Nytt.
I dialogrutan Nytt dokument som visas markerar du ActionScript File och klickar på OK.

I skriptfönstret anger du följande kod för att definiera klassen MyCellRenderer:

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

Välj Arkiv > Spara. Kalla filen MyCellRenderer.as, placera den i samma katalog som FLA-filen och klicka på OK.
Välj Kontroll > Testa filmen.

CellRenderer-egenskaper

Egenskapen data är ett objekt som innehåller alla egenskaper som är angivna för CellRenderer. Observera till exempel i följande klass, som definierar en anpassad CellRenderer som utökar klassen Checkbox, att set-funktionen för egenskapen data skickar värdet på data.label till egenskapen label som ärvs från klassen 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; 
        } 
    } 
}

Egenskapen selected anger om en cell är markerad eller inte i listan.

Använda en CellRenderer för en kolumn i ett DataGrid-objekt

Ett DataGrid-objekt kan ha flera kolumner och du kan ange olika cellåtergivare för varje kolumn. Varje kolumn i en DataGrid representeras av ett DataGridColumn-objekt, och klassen DataGridColumn innehåller en cellRenderer -egenskap, som du kan definiera kolumnens CellRenderer för.

Definiera en CellRenderer för en redigerbar cell

Klassen DataGridCellEditor definierar en renderare som används för redigerbara celler i ett DataGrid-objekt. Den blir renderare för en cell när egenskapen editable för DataGrid-objektet får värdet true och användaren klickar på cellen som ska redigeras. Om du vill definiera en CellRenderer för den redigerbara cellen anger du egenskapen itemEditor för varje element i columns -arrayen för DataGrid-objektet.

Använda en bild, SWF-fil eller ett filmklipp som en CellRenderer

Klassen ImageCell, en underklass till CellRenderer, definierar ett objekt som används för att återge celler där det huvudsakliga cellinnehållet är en bild, SWF-fil eller ett filmklipp. Klassen ImageCell innehåller följande stilar för att definiera cellens utseende:

imagePadding - Den utfyllning som skiljer cellens kant från bildens kant, i pixlar
selectedSkin - Det skal som används för att ange att något är markerat
textOverlayAlpha - Opaciteten för överlägget bakom celletiketten
textPadding - Den utfyllning som skiljer cellens kant från textens kant, i pixlar

Klassen ImageCell är standard-CellRenderer för TileList-klassen.