Utilisation d’un composant CellRenderer

CellRenderer est une classe utilisée par les composants à base de listes, tels que List, DataGrid, TileList et ComboBox pour manipuler et afficher le contenu des cellules personnalisées dans leurs lignes. Une cellule personnalisée peut contenir du texte, un composant prédéfini, tel qu’un objet CheckBox, ou une classe quelconque que vous créez. Pour procéder au rendu des données à l’aide d’un composant CellRenderer personnalisé, vous pouvez étendre la classe CellRenderer ou implémenter l’interface ICellRenderer pour créer votre propre classe CellRenderer personnalisée.

Les classes List, DataGrid, TileList et ComboBox sont des sous-classes de la classe SelectableList. La classe SelectableList inclut un style cellRenderer . Ce style définit l’objet d’affichage utilisé par le composant pour procéder au rendu des cellules.

Vous pouvez ajuster le formatage des styles utilisés par le composant CellRenderer, en appelant la méthode setRendererStyle() de l’objet List (voir Formatage des cellules ). Vous pouvez également définir une classe personnalisée à utiliser en tant que composant CellRenderer (voir la section Définition d’une classe CellRenderer personnalisée ).

Formatage des cellules

La classe CellRenderer inclut un certain nombre de styles vous permettant de contrôler le format de la cellule.

Les styles suivants vous permettent de définir les enveloppes utilisées pour les différents états de la cellule (désactivé, abaissé, survolé et relevé) :

  • disabledSkin et selectedDisabledSkin

  • downSkin et selectedDownSkin

  • overSkin et selectedOverSkin

  • upSkin et selectedUpSkin

    Les styles suivants s’appliquent au formatage du texte :

  • disabledTextFormat

  • textFormat

  • textPadding

Vous pouvez définir ces styles en appelant la méthode setRendererStyle() de l’objet List ou en appelant la méthode setStyle() de l’objet CellRenderer. Vous pouvez obtenir ces styles en appelant la méthode getRendererStyle() de l’objet List ou en appelant la méthode getStyle() de l’objet CellRenderer. Vous pouvez également accéder à un objet qui définit tous les styles de rendu (en tant que propriétés nommées de l’objet) par la propriété rendererStyles de l’objet List ou la méthode getStyleDefinition() de l’objet CellRenderer.

Vous pouvez appeler la méthode clearRendererStyle() pour restaurer la valeur par défaut d’un style.

Pour obtenir ou définir la hauteur des lignes dans la liste, utilisez la propriété rowHeight de l’objet List.

Définition d’une classe CellRenderer personnalisée

Création d’une classe qui étend la classe CellRenderer pour définir une classe CellRenderer personnalisée

Par exemple, le code suivant inclut deux classes. La classe ListSample instancie un composant List et utilise l’autre classe, CustomRenderer, pour définir la classe CellRenderer à utiliser pour le composant List. La classe CustomRenderer étend la classe CellRenderer.

  1. Sélectionnez Fichier > Nouveau.

  2. Dans la boîte de dialogue Nouveau document qui s’affiche, sélectionnez Fichier Flash (ActionScript 3.0), puis cliquez sur OK.

  3. Choisissez Fenêtre > Composants pour afficher le panneau Composants.

  4. Dans le panneau Composants, faites glisser un composant List sur la scène.

  5. Si Flash n’affiche pas l’Inspecteur des propriétés, choisissez Fenêtre > Propriétés > Propriétés.

  6. Après avoir sélectionné le composant List, définissez les propriétés dans l’Inspecteur des propriétés :

    • Nom d’occurrence : myList

    • L (largeur) : 200

    • H (hauteur) : 300

    • X : 20

    • Y : 20

  7. Sélectionnez l’image 1 du calque 1 dans le scénario, puis Fenêtre > Actions.

  8. Tapez le script suivant dans le panneau Actions : 

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

  9. Sélectionnez Fichier > Enregistrer. Attribuez un nom au fichier et cliquez sur le bouton OK.

  10. Sélectionnez Fichier > Nouveau.

  11. Dans la boîte de dialogue Nouveau document qui s’affiche, sélectionnez Fichier ActionScript, puis cliquez sur le bouton OK.

  12. Dans la fenêtre de script, entrez le code suivant pour définir 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()]; 
        } 
    } 
}

  13. Sélectionnez Fichier > Enregistrer. Nommez le fichier CustomCellRenderer.as, placez-le dans le même répertoire que le fichier FLA, puis cliquez sur le bouton OK.

  14. Choisissez Contrôle > Tester l’animation.

Utilisation d’une classe qui implémente l’interface ICellRenderer pour définir une classe CellRenderer personnalisée

Vous pouvez également définir une classe CellRenderer à l’aide des classes qui héritent de la classe DisplayObject et qui implémentent l’interface ICellRenderer. Par exemple, le code suivant définit deux classes. La classe ListSample2 ajoute un objet List à la liste d’affichage et définit sa classe CellRenderer pour utiliser la classe CustomRenderer. La classe CustomRenderer étend la classe CheckBox (qui étend la classe DisplayObject) et implémente l’interface ICellRenderer. Notez que la classe CustomRenderer définit les méthodes de lecture et de définition des propriétés data et listData , définies dans l’interface ICellRenderer. D’autres propriétés et méthodes définies dans l’interface ICellRenderer (la propriété selected et la méthode setSize() ) sont déjà définies dans la classe CheckBox :

  1. Sélectionnez Fichier > Nouveau.

  2. Dans la boîte de dialogue Nouveau document qui s’affiche, sélectionnez Fichier Flash (ActionScript 3.0), puis cliquez sur OK.

  3. Choisissez Fenêtre > Composants pour afficher le panneau Composants.

  4. Dans le panneau Composants, faites glisser un composant List sur la scène.

  5. Si Flash n’affiche pas l’Inspecteur des propriétés, choisissez Fenêtre > Propriétés > Propriétés.

  6. Après avoir sélectionné le composant List, définissez les propriétés dans l’Inspecteur des propriétés :

    • Nom d’occurrence : myList

    • L (largeur) : 100

    • H (hauteur) : 300

    • X : 20

    • Y : 20

  7. Sélectionnez l’image 1 du calque 1 dans le scénario, puis Fenêtre > Actions.

  8. Tapez le script suivant dans le panneau Actions : 

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

  9. Sélectionnez Fichier > Enregistrer. Attribuez un nom au fichier et cliquez sur le bouton OK.

  10. Sélectionnez Fichier > Nouveau.

  11. Dans la boîte de dialogue Nouveau document qui s’affiche, sélectionnez Fichier ActionScript, puis cliquez sur le bouton OK.

  12. Dans la fenêtre de script, entrez le code suivant pour définir 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; 
        } 
    } 
}

  13. Sélectionnez Fichier > Enregistrer. Nommez le fichier CustomCellRenderer.as, placez-le dans le même répertoire que le fichier FLA, puis cliquez sur le bouton OK.

  14. Choisissez Contrôle > Tester l’animation.

Utilisation d’un symbole de la bibliothèque pour définir une classe CellRenderer

Vous pouvez également utiliser un symbole de la bibliothèque pour définir une classe CellRenderer. Vous devez exporter le symbole pour ActionScript. En outre, un fichier de classe qui implémente l’interface ICellRenderer ou qui étend la classe CellRenderer (ou l’une de ses sous-classes) doit être associé au nom de classe du symbole de la bibliothèque.

L’exemple suivant définit une classe CellRenderer personnalisée à l’aide d’un symbole de la bibliothèque.

  1. Sélectionnez Fichier > Nouveau.

  2. Dans la boîte de dialogue Nouveau document qui s’affiche, sélectionnez Fichier Flash (ActionScript 3.0), puis cliquez sur OK.

  3. Choisissez Fenêtre > Composants pour afficher le panneau Composants.

  4. Dans le panneau Composants, faites glisser un composant List sur la scène.

  5. Si Flash n’affiche pas l’Inspecteur des propriétés, choisissez Fenêtre > Propriétés > Propriétés.

  6. Après avoir sélectionné le composant List, définissez les propriétés dans l’Inspecteur des propriétés :

    • Nom d’occurrence : myList

    • L (largeur): 100

    • H (hauteur) : 400

    • X : 20

    • Y : 20

  7. Cliquez sur le panneau Paramètres, puis double-cliquez sur la deuxième colonne de la ligne de dataProvider.

  8. Dans la boîte de dialogue Valeurs qui s’affiche, cliquez sur le signe plus à deux reprises pour ajouter deux éléments de données (avec les étiquettes définies sur label0 et label1), puis cliquez sur le bouton OK.

  9. A l’aide de l’outil Texte, dessinez un champ de texte sur la scène.

  10. Après avoir sélectionné le champ de texte, définissez les propriétés dans l’Inspecteur des propriétés :

    • Type de texte : Texte dynamique

    • Nom d’occurrence : textField

    • L (largeur) : 100

    • Taille de la police : 24

    • X : 0

    • Y : 0

  11. Après avoir sélectionné le champ de texte, choisissez Modification > Convertir en symbole.

  12. Dans la boîte de dialogue Convertir en symbole, définissez les paramètres suivants, puis cliquez sur OK.

    • Nom : MyCellRenderer

    • Type : MovieClip

    • Exporter pour ActionScript : Sélectionné

    • Exporter dans la première image : Sélectionné

    • Classe : MyCellRenderer

    • Classe de base : flash.display.MovieClip

      Si Flash affiche un avertissement de classe ActionScript, cliquez sur le bouton OK dans la boîte de dialogue d’avertissement.

  13. Supprimez l’occurrence du nouveau symbole de clip sur la scène.

  14. Sélectionnez l’image 1 du calque 1 dans le scénario, puis Fenêtre > Actions.

  15. Tapez le script suivant dans le panneau Actions : 

    myList.setStyle("cellRenderer", MyCellRenderer);

  16. Sélectionnez Fichier > Enregistrer. Attribuez un nom au fichier et cliquez sur le bouton OK.

  17. Sélectionnez Fichier > Nouveau.

  18. Dans la boîte de dialogue Nouveau document qui s’affiche, sélectionnez Fichier ActionScript, puis cliquez sur le bouton OK.

  19. Dans la fenêtre de script, entrez le code suivant pour définir 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 = []; 
            } 
        } 
    } 
}

  20. Sélectionnez Fichier > Enregistrer. Nommez le fichier MyCellRenderer.as, placez-le dans le même répertoire que le fichier FLA, puis cliquez sur le bouton OK.

  21. Choisissez Contrôle > Tester l’animation.

Propriétés CellRenderer

La propriété data est un objet qui contient toutes les propriétés définies pour la classe CellRenderer. Par exemple, dans la classe suivante, qui définit une classe CellRenderer personnalisée qui étend la classe Checkbox, vous remarquerez que la fonction de lecture de la propriété data transmet la valeur de data.label à la propriété label héritée de la 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 propriété selected définit si une cellule est sélectionnée dans la liste ou non.

Application d’une classe CellRenderer à une colonne d’un objet DataGrid

Un objet DataGrid peut comporter plusieurs colonnes. Vous pouvez définir des rendus de cellule différents pour chacune d’elles. Chaque colonne d’un objet DataGrid est représentée par un objet DataGridColumn ; la classe DataGridColumn inclut une propriété cellRenderer pour laquelle vous pouvez définir la classe CellRenderer de la colonne.

Définition d’une classe CellRenderer pour une cellule modifiable

La classe DataGridCellEditor définit un rendu utilisé pour les cellules modifiables d’un objet DataGrid. Il devient le rendu d’une cellule lorsque la propriété editable de l’objet DataGrid est définie sur true et lorsque l’utilisateur clique sur la cellule à modifier. Pour définir une classe CellRenderer pour la cellule modifiable, définissez la propriété itemEditor de chaque élément du tableau columns de l’objet DataGrid.

Utilisation d’une image, d’un fichier SWF ou d’un clip en tant que classe CellRenderer

La classe ImageCell, sous-classe de la classe CellRenderer, définit un objet utilisé pour procéder au rendu des cellules dans lesquelles le contenu principal est une image, un fichier SWF ou un clip. La classe ImageCell inclut les styles suivants pour définir l’aspect de la cellule :

  • imagePadding : marge intérieure qui sépare le bord de la cellule du bord de l’image, en pixels

  • selectedSkin : enveloppe utilisée pour indiquer l’état sélectionné

  • textOverlayAlpha : opacité de la superposition derrière l’étiquette de la cellule

  • textPadding : marge intérieure qui sépare le bord de la cellule du bord du texte, en pixels

    La classe ImageCell est le CellRenderer par défaut de la classe TileList.