CellRenderer  - AS3 Flash

Ottiene o imposta un oggetto che rappresenta i dati associati a un componente. Quando questo valore è impostato, i dati relativi al componente vengono memorizzati e il componente contenitore viene invalidato. In seguito il componente invalidato viene ridisegnato automaticamente.

La proprietà data è un oggetto contenente la voce nel DataProvider che la cella rappresenta. Generalmente, tale proprietà contiene proprietà standard, a seconda del tipo di componente. In CellRenderer in un componente List o ComboBox, la proprietà data contiene proprietà label, icon e data; in TileList: proprietà label e source; una cella DataGrid contiene valori per ciascuna colonna. La proprietà data può anche contenere dati definiti dall'utente relativi alla cella specifica. Gli utenti possono estendere una classe CellRenderer in modo che un componente utilizzi proprietà diverse di data per il rendering della cella.

Inoltre, gli elementi labelField, labelFunction, iconField, iconFunction, sourceField e sourceFunction possono essere utilizzati per specificare quali proprietà utilizzare per disegnare rispettivamente l'etichetta, l'icona e l'origine.

Ottiene o imposta le proprietà di elenco che vengono applicate alla cella, ad esempio i valori index e selected. Queste proprietà di elenco vengono aggiornate automaticamente dopo che la cella viene invalidata.

Ottiene o imposta un valore booleano che indica se la cella corrente è selezionata. Il valore true indica che la cella corrente è selezionata; il valore false indica che non lo è.

Il valore predefinito è false.

Crea una nuova istanza CellRenderer.

Recupera la mappa di stile predefinita del componente corrente. La mappa di stile contiene il tipo appropriato per il componente, in base allo stile utilizzato dal componente. Ad esempio, lo stile disabledTextFormat contiene un valore null o un oggetto TextFormat. È possibile utilizzare questi stili e chiamare setStyle() sul componente corrente. Il codice seguente consente di ignorare lo stile disabledTextFormat predefinito sul componente specificato:

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

Elementi API correlati

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

Specifica le dimensioni con cui deve essere effettuato il rendering dei dati. Queste dimensioni agiscono sia sui dati che sulla cella che li contiene; il renderer di celle le utilizza per garantire che i dati siano contenuti nella cella senza smarginare in quelle adiacenti.

Parametri

Per provare l'esempio, eseguite queste operazioni:

1. Aggiungete il componente TileList alla libreria.
2. Create un nuovo simbolo di nome "BlueBackground" e le relative proprietà, quindi selezionate la casella "Esporta per ActionScript". Lasciate "BlueBackground" come nome di classe.
3. Create un nuovo simbolo di nome "OrangeBackground" e le relative proprietà, quindi selezionate la casella "Esporta per ActionScript". Lasciate "OrangeBackground" come nome di classe.
4. Create un nuovo simbolo di nome "GreenBackground" e le relative proprietà, quindi selezionate la casella "Esporta per ActionScript". Lasciate "GreenBackground" come nome di classe.
5. In ogni simbolo, create un rettangolo largo 10 pixel e alto 10 pixel e con il colore indicato nel nome del simbolo. Lasciatelo posizionato in corrispondenza delle coordinate x = 0 e y = 0.
6. Salvate questo codice come CellRendererExample.as nella stessa directory del file FLA.
7. Impostate la classe documento nel file FLA su 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);
    }
}