Utilisation du composant TileList

Le composant TileList comprend une liste de lignes et de colonnes accompagnant les données attribuées par un fournisseur de données. Un élément est une unité de données stockée dans une cellule du composant TileList. L’élément, qui provient du fournisseur de données, possède généralement une propriété label et une propriété source . La propriété label identifie le contenu à afficher dans une cellule, et la propriété source lui fournit une valeur.

Vous pouvez créer une occurrence de Array ou en récupérer une depuis un serveur. Le composant TileList dispose de méthodes agissant comme proxy pour son fournisseur de données (par exemple addItem() et removeItem() ). Si vous ne fournissez aucun fournisseur de données externe à la liste, ces méthodes créent automatiquement une occurrence de DataProvider, exposée par le biais de List.dataProvider .

Interaction de l’utilisateur avec le composant TileList

Un composant TileList rend chaque cellule à l’aide d’un sprite qui met en œuvre l’interface ICellRenderer. Vous pouvez spécifier ce convertisseur à l’aide de la propriété cellRenderer de TileList. L’interface CellRenderer par défaut du composant TileList est ImageCell, qui affiche une image (classe, bitmap, occurrence ou URL) et une étiquette facultative. L’étiquette est une ligne simple qui est toujours alignée sur le dessous de la cellule. Vous ne pouvez faire défiler un composant TileList que dans un sens.

Lorsqu’une occurrence de TileList a le focus, vous pouvez utiliser les touches suivantes pour accéder aux éléments qu’elle contient :

Touche

Description

Flèche vers le haut et flèche vers le bas

Permettent de monter et de descendre dans une colonne. Si la propriété allowMultipleSelection est définie sur true , vous pouvez utiliser ces touches en combinaison avec la touche Maj pour sélectionner plusieurs cellules.

Flèche vers la gauche et flèche vers la droite

Permettent de se déplacer vers la gauche ou la droite dans une ligne. Si la propriété allowMultipleSelection est définie sur true , vous pouvez utiliser ces touches en combinaison avec la touche Maj pour sélectionner plusieurs cellules.

Orig

Sélectionne la première cellule dans un composant TileList. Si la propriété allowMultipleSelection a la valeur true , maintenez enfoncée la touche Maj et appuyez sur la touche Origine pour sélectionner toutes les cellules de votre sélection actuelle dans la première cellule.

Fin

Sélectionne la dernière cellule dans un composant TileList. Si la propriété allowMultipleSelection a la valeur true , maintenez enfoncée la touche Maj et appuyez sur la touche Fin pour sélectionner toutes les cellules de votre sélection actuelle dans la dernière cellule.

Ctrl

Si la propriété allowMultipleSelection est définie sur true , permet de sélectionner des cellules multiples, sans ordre spécifique.

Lorsque vous ajoutez un composant TileList à une application, vous pouvez le rendre accessible à un lecteur d’écran en ajoutant les lignes de code ActionScript suivantes : 

import fl.accessibility.TileListAccImpl; 
 
TileListAccImpl.enableAccessibility();

Quel que soit le nombre d’occurrences d’un composant, l’activation de son accessibilité ne se fait qu’une fois. Pour plus d’informations, voir le Chapitre 18, « Création de contenu accessible » du guide Utilisation de Flash .

Paramètres du composant TileList

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres de création suivants pour chaque occurrence du composant TileList : allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize et verticalScrollPageSize . A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur l’utilisation du paramètre dataProvider, voir la section Utilisation du paramètre dataProvider .

ActionScript vous permet de définir des options supplémentaires pour les occurrences de TileList en utilisant ses méthodes, propriétés et événements. Pour plus d’informations, voir la classe TileList dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Création d’une application avec le composant TileList

Cet exemple utilise des clips pour remplir un composant TileList d’un tableau de couleurs.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant TileList sur la scène et nommez l’occurrence aTi .

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.data.DataProvider; 
import flash.display.DisplayObject; 
 
var aBoxes:Array = new Array(); 
var i:uint = 0; 
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00); 
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July"); 
var dp:DataProvider = new DataProvider(); 
for(i=0; i < colors.length; i++) { 
    aBoxes[i] = new MovieClip(); 
    drawBox(aBoxes[i], colors[i]);    // draw box w next color in array 
    dp.addItem( {label:colorNames[i], source:aBoxes[i]} ); 
} 
aTl.dataProvider = dp; 
aTl.columnWidth = 110; 
aTl.rowHeight = 130; 
aTl.setSize(280,150); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(0, 0, 100, 100); 
            box.graphics.endFill();         
}

  4. Sélectionnez Contrôle > Tester l’animation pour tester l’application.

Création d’un composant TileList à l’aide d’ActionScript

Cet exemple crée en mode dynamique une occurrence du composant TileList et lui ajoute des occurrences des composants ColorPicker, ComboBox, NumericStepper et CheckBox. Il crée un tableau contenant des étiquettes et les noms du composant à afficher, et attribue ce tableau ( dp ) à la propriété dataProvider du composant TileList. Il utilise les propriétés columnWidth et rowHeight et la méthode setSize() pour agencer le composant TileList, la méthode move() pour le placer sur la scène, et le style contentPadding pour créer un espace entre les bords de l’occurrence de TileList et son contenu, et la méthode sortItemsOn() pour trier le contenu selon ses étiquettes.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser les composants suivants du panneau Composants vers le panneau Bibliothèque : ColorPicker, ComboBox, NumericStepper, CheckBox et TileList.

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.controls.CheckBox; 
import fl.controls.ColorPicker; 
import fl.controls.ComboBox; 
import fl.controls.NumericStepper; 
import fl.controls.TileList; 
import fl.data.DataProvider; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aCb:ComboBox = new ComboBox(); 
var aNs:NumericStepper = new NumericStepper(); 
var aCh:CheckBox = new CheckBox(); 
var aTl:TileList = new TileList(); 
 
var dp:Array = [ 
{label:"ColorPicker", source:aCp}, 
{label:"ComboBox", source:aCb}, 
{label:"NumericStepper", source:aNs}, 
{label:"CheckBox", source:aCh}, 
]; 
aTl.dataProvider = new DataProvider(dp); 
aTl.columnWidth = 110; 
aTl.rowHeight = 100; 
aTl.setSize(280,130); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
aTl.sortItemsOn("label"); 
addChild(aTl);

  4. Choisissez Contrôle > Tester l’animation pour tester l’application.