CellRenderer  - AS3 Flash

Pobiera lub ustawia obiekt (klasy Object) reprezentujący dane skojarzone ze składnikiem. Ustawienie tej wartości powoduje zapisanie danych składnika i unieważnienie zawierającego je składnika. Unieważniony składnik jest wówczas automatycznie ponownie rysowany.

Właściwość data reprezentuje obiekt zawierający element w obiekcie DataProvider, który reprezentuje dana komórka. Zwykle właściwość data zawiera standardowe właściwości, w zależności od typu składnika. W obiekcie CellRenderer składnika List lub ComboBox dane zawierają właściwości label, icon i data; w przypadku składnika TileList: właściwości label i source; komórka DataGrid zawiera wartości dla poszczególnych kolumn. Właściwość data może także zawierać dane określone przez użytkownika mające związek z określoną komórką. Użytkownicy mogą rozszerzać klasę CellRenderer, aby składnik przy renderowaniu komórki używał innych właściwości danych.

Ponadto możliwe jest użycie elementów labelField, labelFunction, iconField, iconFunction, sourceField i sourceFunction do określenia właściwości używanych do rysowania odpowiednio etykiety, ikony i źródła.

Pobiera lub ustawia właściwości listy zastosowane do komórki, np. wartości index i selected. Te właściwości listy są automatycznie aktualizowane po unieważnieniu komórki.

Pobiera lub ustawia wartość typu Boolean wskazującą, czy bieżąca komórka jest zaznaczona. Wartość true oznacza, że komórka jest zaznaczona; wartość false oznacza, że nie jest.

Wartością domyślną jest false.

Tworzy nowe wystąpienie składnika CellRenderer.

Pobiera domyślną mapę stylów dla bieżącego składnika. Mapa stylów zawiera typ odpowiedni dla składnika, w zależności od stylu składnika. Na przykład dla stylu disabledTextFormat wartość jest równa null lub jest obiektem TextFormat. Można używać tych stylów w wywołaniach metody setStyle() dla bieżącego składnika. Poniższy kod przesłania domyślny styl disabledTextFormat dla określonego składnika:

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

Powiązane elementy interfejsu API

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

Określa wymiary renderowania danych. Te wymiary mają wpływ zarówno na dane, jak i na zawierającą je komórkę; mechanizm renderujący komórki na ich podstawie dopasowuje obraz danych do komórki, dzięki czemu nie zachodzą one na komórki sąsiednie.

Parametry

W celu uruchomienia przykładu należy wykonać poniższe czynności:

1. Dodaj składnik TileList do biblioteki.
2. Utwórz nowy symbol o nazwie "BlueBackground" i jego właściwości symbolu, zaznacz pole wyboru „Eksportuj dla ActionScript”. Pozostaw niezmienioną nazwę klasy "BlueBackground".
3. Utwórz nowy symbol o nazwie "OrangeBackground" i jego właściwości symbolu, zaznacz pole wyboru „Eksportuj dla ActionScript”. Pozostaw niezmienioną nazwę klasy "OrangeBackground".
4. Utwórz nowy symbol o nazwie "GreenBackground" i jego właściwości symbolu, zaznacz pole wyboru „Eksportuj dla ActionScript”. Pozostaw niezmienioną nazwę klasy "GreenBackground".
5. W każdym symbolu utwórz prostokąt o szerokości 10 pikseli i wysokości 10 pikseli, w kolorze zgodnym z nazwą symbolu. Pozostaw współrzędne x i y równe 0.
6. Zapisać ten kod pod nazwą CellRendererExample.as w tym samym katalogu, co plik FLA.
7. W pliku FLA ustaw klasę dokumentu na 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);
    }
}