Operazioni con CellRenderer

Formattare le celle
Definire una classe CellRenderer personalizzata
Proprietà di CellRenderer
Applicare un oggetto CellRenderer per una colonna di un oggetto DataGrid
Definire un oggetto CellRenderer per una cella modificabile
Usare immagini, file SWF o clip filmato come CellRenderer

CellRenderer è una classe con componenti basati su List (ad esempio, List, DataGrid, TileList e ComboBox), utilizzata per gestire e visualizzare il contenuto delle celle personalizzate per le righe dell'elenco. Una cella personalizzata può contenere del testo, un componente predefinito come CheckBox oppure qualsiasi classe di oggetti di visualizzazione creata. Per il rendering dei dati utilizzando una classe CellRenderer personalizzata, potete estendere la classe CellRenderer o implementare l'interfaccia ICellRenderer per creare una classe CellRenderer personalizzata.

Le classi List, DataGrid, TileList e ComboBox sono sottoclassi della classe SelectableList. Nella classe SelectableList è incluso uno stile cellRenderer che definisce l'oggetto di visualizzazione usato dal componente per il rendering delle celle.

Potete modificare la formattazione degli stili usati da CellRenderer chiamando il metodo setRendererStyle() dell'oggetto List (vedete Formattare le celle ). Oppure potete definire una classe personalizzata da usare come CellRenderer (vedete Definire una classe CellRenderer personalizzata ).

Formattare le celle

La classe CellRenderer include numerosi stili per il controllo del formato delle celle.

Gli stili riportati di seguito consentono di definire gli skin usati per i diversi stati della cella (disattivato, giù, sopra e su):

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

Gli stili seguenti vengono applicati alla formattazione del testo:
disabledTextFormat
textFormat
textPadding

Potete impostare questi stili chiamando il metodo setRendererStyle() dell'oggetto List o il metodo setStyle() dell'oggetto CellRenderer. Potete ottenere questi stili chiamando il metodo getRendererStyle() dell'oggetto List o il metodo setStyle() dell'oggetto CellRenderer. Inoltre, potete accedere a un oggetto che definisce tutti gli stili del renderer (come proprietà con nome dell'oggetto) tramite il metodo rendererStyles dell'oggetto List o il metodo getStyleDefinition() dell'oggetto CellRenderer.

Per ripristinare il valore predefinito di uno stile, potete chiamare il metodo clearRendererStyle() .

Per ottenere o impostare l'altezza delle righe nell'elenco, usate la proprietà rowHeight dell'oggetto List.

Definire una classe CellRenderer personalizzata

Creare una classe che estende la classe CellRenderer per definire un oggetto CellRenderer personalizzato

Il codice seguente, ad esempio, include due classi: la classe ListSample crea un'istanza di un componente List e usa l'altra classe, CustomRenderer, per definire il renderer di celle da usare per il componente List; la classe CustomRenderer estende la classe CellRenderer.

Selezionate File > Nuovo.
Nella finestra di dialogo Nuovo documento che viene visualizzata, selezionate File Flash (ActionScript 3.0) e fate clic su OK.
Selezionate Finestra > Componenti per visualizzare il pannello Componenti.
Dal pannello Componenti, trascinate un componente List nello stage.
Se la finestra di ispezione Proprietà non è visualizzata, selezionate Finestra > Proprietà > Proprietà.
Con il componente List selezionato, impostate le proprietà nella finestra di ispezione Proprietà:
- Nome istanza: myList
- W (larghezza): 200
- H (altezza): 300
- X: 20
- Y: 20
Selezionate il fotogramma 1 nel livello 1 della linea temporale, quindi selezionate Finestra > Azioni.

Digitate lo script riportato di seguito nel pannello Azioni:

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

Selezionate File > Salva. Assegnate un nome al file e fate clic sul pulsante OK.
Selezionate File > Nuovo.
Nella finestra di dialogo Nuovo documento che viene visualizzata, selezionate File ActionScript e fate clic sul pulsante OK.

Nella finestra Script, inserite il codice seguente per definire la classe 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()]; 
        } 
    } 
}

Selezionate File > Salva. Assegnate al file il nome CustomCellRenderer.as, inseritelo nella stessa directory del file FLA, quindi fate clic sul pulsante OK.
Selezionate Controllo > Prova filmato.

Usare una classe che implementa l'interfaccia ICellRenderer per definire un oggetto CellRenderer personalizzato

Potete anche definire un oggetto CellRenderer usando una classe qualsiasi che erediti la classe DisplayObject e implementi l'interfaccia ICellRenderer. Il codice seguente, ad esempio, definisce due classi: la classe ListSample2 aggiunge un oggetto List all'elenco di visualizzazione e definisce il relativo CellRenderer affinché usi la classe CustomRenderer; la classe CustomRenderer estende la classe CheckBox (che a sua volta estende la classe DisplayObject) e implementa l'interfaccia ICellRenderer. La classe CustomRenderer definisce i metodi getter e setter per le proprietà data e listData , definiti nell'interfaccia ICellRenderer. Altre proprietà e metodi definiti nell'interfaccia ICellRenderer (la proprietà selected e il metodo setSize() ) sono già definiti nella classe CheckBox:

Selezionate File > Nuovo.
Nella finestra di dialogo Nuovo documento che viene visualizzata, selezionate File Flash (ActionScript 3.0) e fate clic su OK.
Selezionate Finestra > Componenti per visualizzare il pannello Componenti.
Dal pannello Componenti, trascinate un componente List nello stage.
Se la finestra di ispezione Proprietà non è visualizzata, selezionate Finestra > Proprietà > Proprietà.
Con il componente List selezionato, impostate le proprietà nella finestra di ispezione Proprietà:
- Nome istanza: myList
- W (larghezza): 100
- H (altezza): 300
- X: 20
- Y: 20
Selezionate il fotogramma 1 nel livello 1 della linea temporale, quindi selezionate Finestra > Azioni.

Digitate lo script riportato di seguito nel pannello Azioni:

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

Selezionate File > Salva. Assegnate un nome al file e fate clic sul pulsante OK.
Selezionate File > Nuovo.
Nella finestra di dialogo Nuovo documento che viene visualizzata, selezionate File ActionScript e fate clic sul pulsante OK.

Nella finestra Script, inserite il codice seguente per definire la classe 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; 
        } 
    } 
}

Selezionate File > Salva. Assegnate al file il nome CustomCellRenderer.as, inseritelo nella stessa directory del file FLA, quindi fate clic sul pulsante OK.
Selezionate Controllo > Prova filmato.

Usare un simbolo della libreria per definire un oggetto CellRenderer

Per definire un oggetto CellRenderer, potete anche usare un simbolo della libreria. Il simbolo deve essere esportato per ActionScript e al nome della classe per il simbolo della libreria deve essere associato un file di classe che implementa l'interfaccia ICellRenderer o che estende la classe CellRenderer (o una delle relative sottoclassi).

Nell'esempio seguente viene definito un oggetto CellRenderer personalizzato usando un simbolo della libreria.

Selezionate File > Nuovo.
Nella finestra di dialogo Nuovo documento che viene visualizzata, selezionate File Flash (ActionScript 3.0) e fate clic su OK.
Selezionate Finestra > Componenti per visualizzare il pannello Componenti.
Dal pannello Componenti, trascinate un componente List nello stage.
Se la finestra di ispezione Proprietà non è visualizzata, selezionate Finestra > Proprietà > Proprietà.
Con il componente List selezionato, impostate le proprietà nella finestra di ispezione Proprietà:
- Nome istanza: myList
- W (larghezza): 100
- H (altezza): 400
- X: 20
- Y: 20
Nel pannello Parametri, fate doppio clic sulla seconda colonna della riga dataProvider.
Nella finestra di dialogo Valori che viene visualizzata, fate clic sul segno più due volte per aggiungere due elementi di dati, con le etichette impostate su label0 e label1, quindi fate clic sul pulsante OK.
Con lo strumento Testo, disegnate un campo di testo sullo stage.
Con il campo di testo selezionato, impostate le proprietà nella finestra di ispezione Proprietà:
- Tipo di testo: testo dinamico
- Nome istanza: textField
- W (larghezza): 100
- Dimensione carattere: 24
- X: 0
- Y: 0
Con il campo di testo selezionato, scegliete Elabora >Converti in simbolo.
Nella finestra di dialogo Converti in simbolo, configurate le seguenti impostazioni e fate clic su OK.
- Nome: MyCellRenderer
- Tipo: MovieClip
- Esporta per ActionScript: selezionato
- Esporta nel primo fotogramma: selezionato
- Classe: MyCellRenderer
- Classe base: flash.display.MovieClip
  
  Se viene visualizzato un Avviso classe ActionScript, fate clic sul pulsante OK nella finestra di avvertenza.
Eliminate l'istanza del nuovo simbolo di clip filmato dallo stage.
Selezionate il fotogramma 1 nel livello 1 della linea temporale, quindi selezionate Finestra > Azioni.
Digitate lo script riportato di seguito nel pannello Azioni:
```
myList.setStyle("cellRenderer", MyCellRenderer);
```
Selezionate File > Salva. Assegnate un nome al file e fate clic sul pulsante OK.
Selezionate File > Nuovo.
Nella finestra di dialogo Nuovo documento che viene visualizzata, selezionate File ActionScript e fate clic sul pulsante OK.

Nella finestra Script, inserite il codice seguente per definire la classe 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 = []; 
            } 
        } 
    } 
}

Selezionate File > Salva. Assegnate al file il nome MyCellRenderer.as, inseritelo nella stessa directory del file FLA, quindi fate clic sul pulsante OK.
Selezionate Controllo > Prova filmato.

Proprietà di CellRenderer

La proprietà data è un oggetto che contiene tutte le proprietà impostate per CellRenderer. Ad esempio, nella classe seguente, che definisce un oggetto CellRenderer personalizzato che estende la classe Checkbox, la funzione setter per la proprietà data passa il valore di data.label alla proprietà label ereditata dalla classe 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; 
        } 
    } 
}

La proprietà selected definisce se una cella nell'elenco è selezionata o meno.

Applicare un oggetto CellRenderer per una colonna di un oggetto DataGrid

Un oggetto DataGrid può avere più colonne ed è possibile specificare diversi renderer di celle per ogni colonna. Ogni colonna di un oggetto DataGrid è rappresentata da un oggetto DataGridColumn e la classe DataGridColumn include una proprietà cellRenderer per cui viene definito l'oggetto CellRenderer per la colonna.

Definire un oggetto CellRenderer per una cella modificabile

La classe DataGridCellEditor definisce un renderer usato per le celle modificabili in un oggetto DataGrid, che diventa il renderer per una cella quando la proprietà editable dell'oggetto DataGrid è impostata su true e l'utente fa clic sulla cella da modificare. Per definire un oggetto CellRenderer per una cella modificabile, impostate la proprietà itemEditor per ogni elemento dell'array columns dell'oggetto DataGrid.

Usare immagini, file SWF o clip filmato come CellRenderer

La classe ImageCell, una sottoclasse di CellRenderer, definisce un oggetto usato per il rendering delle celle in cui il contenuto principale della cella è un'immagine, un file SWF o un clip filmato. La classe ImageCell include i seguenti stili per definire l'aspetto della cella:

imagePadding — Il riempimento che separa il bordo della cella dal bordo dell'immagine, in pixel
selectedSkin — Lo skin usato per indicare lo stato selezionato
textOverlayAlpha — L'opacità della sovrapposizione dietro l'etichetta della cella
textPadding — Il riempimento che separa il bordo della cella dal bordo del testo, in pixel

La classe ImageCell è l'oggetto CellRenderer predefinito per la classe TileList.