CellRenderer  - AS3 Flash

Récupère ou définit un objet Object qui représente les données associées à un composant. Lorsque cette valeur est définie, les données du composant sont stockées et le conteneur est invalidé. Le composant invalidé est alors automatiquement redessiné.

La propriété data représente l’objet contenant l’élément dans le DataProvider représenté par la cellule. Généralement, la propriété data contient des propriétés standard, qui dépendent du type du composant. Dans le CellRenderer d’un composant List ou ComboBox, les données contiennent des propriétés label, icon et data ; un composant TileList : une propriété label et source ; une cellule DataGrid contient les valeurs de chaque colonne. La propriété data contient également les données définies par l’utilisateur et relatives à la cellule. Les utilisateurs peuvent étendre un CellRenderer en composant afin d’exploiter différentes propriétés de données dans le rendu de la cellule.

De plus, les éléments labelField, labelFunction, iconField, iconFunction, sourceField et sourceFunction peuvent servir à désigner les propriétés à utiliser pour dessiner l’étiquette, l’icône et la source, respectivement.

Récupère ou définit les propriétés list qui sont appliquées à la cellule, par exemple les valeurs index et selected. Ces propriétés list sont automatiquement mises à jour après l’invalidation de la cellule.

Récupère ou définit une valeur booléenne indiquant si la cellule active est sélectionnée. La valeur true indique que la cellule active est sélectionnée ; la valeur false indique qu’elle ne l’est pas.

La valeur par défaut est false.

Crée une nouvelle occurrence de CellRenderer.

Récupère la texture de style par défaut du composant actif. La texture de style contient le type adapté au composant, qui dépend du style utilisé par ce dernier. Par exemple, le style disabledTextFormat contient la valeur null ou un objet TextFormat. Vous pouvez utiliser ces styles et appeler setStyle() pour le composant actif. Le code suivant ignore le style par défaut disabledTextFormat dans le composant spécifié :

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

Eléments de l’API associés

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

Indique les dimensions en fonction desquelles les données doivent être restituées. Ces dimensions affectent à la fois les données et la cellule qui les contient ; le rendu de cellule les utilise pour s’assurer que les données sont ajustées à la cellule et qu’elles ne débordent pas dans les cellules adjacentes.

Paramètres

Pour exécuter l’exemple, suivez ces étapes :

1. Ajoutez le composant TileList à votre bibliothèque.
2. Créez un nouveau symbole appelé « BlueBackground » et, dans ses propriétés, sélectionnez l’option intitulée « Export for ActionScript ». Conservez « BlueBackground » comme nom de classe.
3. Créez un nouveau symbole appelé « OrangeBackground» et, dans ses propriétés, sélectionnez l’option intitulée « Export for ActionScript ». Conservez « OrangeBackground » comme nom de classe.
4. Créez un nouveau symbole appelé « GreenBackground» et, dans ses propriétés, sélectionnez l’option intitulée « Export for ActionScript ». Conservez « GreenBackground » comme nom de classe.
5. Dans chaque symbole, créez un rectangle ayant une largeur de 10 pixels et une hauteur de 10 pixels, de la couleur indiquée par le nom du symbole. Conservez les coordonnées X et Y à la valeur 0.
6. Enregistrez ce code sous le nom CellRendererExample.as dans le même répertoire que votre fichier FLA.
7. Dans le fichier FLA, définissez la classe Document sur 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);
    }
}