Utilisation d’un DataProvider

Vous pouvez créer un fournisseur de données simple pour les composants ComboBox, List et TileList en cliquant sur le paramètre dataProvider de l’onglet Paramètres de l’Inspecteur des propriétés ou de l’Inspecteur des composants.

Si vous double-cliquez sur la cellule de valeur, qui affiche initialement un tableau vide, la boîte de dialogue Valeurs vous permettant d’entrer plusieurs valeurs d’étiquettes et de données afin de créer le fournisseur de données s’ouvre.

Boîte de dialogue Valeurs de dataProvider

Cliquez sur le signe plus pour ajouter un élément au DataProvider. Cliquez sur le signe moins pour supprimer un élément. Cliquez sur la flèche vers le haut pour déplacer vers le haut un élément sélectionné dans la liste ou cliquez sur la flèche vers le bas pour déplacer vers le bas un élément sélectionné dans la liste. L’illustration suivante affiche la boîte de dialogue Valeurs permettant de créer une liste de noms d’enfants incluant également leurs anniversaires.

Boîte de dialogue Valeurs incluant des données

Le tableau que vous créez se compose de paires de champs d’étiquette et de valeur. Les champs d’étiquette sont label et data et les champs de valeur représentent les noms des enfants, ainsi que leurs anniversaires. Le champ d’étiquette identifie le contenu qui apparaît dans la liste, dans ce cas les noms des enfants. Le composant ComboBox obtenu a l’aspect suivant :

Composant ComboBox alimenté par le DataProvider

Lorsque vous avez terminé d’ajouter des données, cliquez sur OK pour fermer la boîte de dialogue. Le tableau du paramètre dataProvider inclut désormais les éléments que vous avez créés.

Afficher le graphique à sa taille d'origine

Paramètre dataProvider avec des données

Vous pouvez accéder aux valeurs d’étiquettes et de données que vous avez créées à l’aide d’ActionScript pour accéder à la propriété dataProvider du composant.

Vous pouvez créer un DataProvider en créant les données dans un tableau ou un objet XML et en affectant l’objet en tant que paramètre value au constructeur DataProvider.

L’exemple suivant remplit un composant List, qui est une colonne unique de lignes, avec les noms de plusieurs enfants et leurs anniversaires. Cet exemple définit la liste dans le tableau des éléments et la fournit en tant que paramètre lorsqu’il crée l’occurrence de DataProvider ( new DataProvider(items) ), puis l’affecte à la propriété dataProvider du composant List.

import fl.controls.List; 
import fl.data.DataProvider; 
 
var aList:List = new List(); 
var items:Array = [ 
{label:"David", data:"11/19/1995"}, 
{label:"Colleen", data:"4/20/1993"}, 
{label:"Sharon", data:"9/06/1997"}, 
{label:"Ronnie", data:"7/6/1993"}, 
{label:"James", data:"2/15/1994"}, 
]; 
aList.dataProvider = new DataProvider(items); 
addChild(aList); 
aList.move(150,150);

Le tableau se compose de paires de champs d’étiquette et de valeur. Les champs d’étiquette sont label et data et les champs de valeur représentent les noms des enfants, ainsi que leurs anniversaires. Le champ d’étiquette identifie le contenu qui apparaît dans la liste, dans ce cas les noms des enfants. Le composant List obtenu a l’aspect suivant :

Composant List alimenté par un DataProvider

La valeur du champ de données est disponible lorsque l’utilisateur sélectionne un élément dans la liste en cliquant sur son entrée pour déclencher un événement change . L’exemple suivant ajoute un composant TextArea ( aTa ) et un gestionnaire d’événements ( changeHandler ) à l’exemple précédent pour afficher l’anniversaire de l’enfant lorsqu’un utilisateur sélectionne un nom dans la liste.

import fl.controls.List; 
import fl.controls.TextArea; 
import flash.events.Event; 
import fl.data.DataProvider; 
 
var aList:List = new List(); 
var aTa:TextArea = new TextArea(); 
var items:Array = [ 
{label:"David", data:"1/19/1995"}, 
{label:"Colleen", data:"4/20/1993"}, 
{label:"Sharon", data:"9/06/1994"}, 
{label:"Ronnie", data:"7/6/1993"}, 
{label:"James", data:"2/15/1994"}, 
]; 
aList.dataProvider = new DataProvider(items); 
 
addChild(aList); 
addChild(aTa); 
 
aList.move(150,150); 
aTa.move(150, 260); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
 
function changeHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
};

Désormais, lorsqu’un utilisateur sélectionne le nom d’un enfant dans la liste, la date de son anniversaire s’affiche dans le composant TextArea, comme cela est indiqué dans l’illustration suivante. Cette opération est effectuée par la fonction changeHandler() lorsqu’elle définit la propriété text du composant TextArea ( aTa.text ) sur la valeur du champ de données dans l’élément sélectionné ( event.target.selectedItem.data ). La propriété event.target est l’objet qui a déclenché l’événement, soit l’objet List dans le cas présent.

Affichage du champ de données du DataProvider d’un composant List

Vous pouvez inclure des données autres que du texte dans un DataProvider. L’exemple suivant inclut des clips dans un DataProvider qui affecte des données à un composant TileList. Il crée le DataProvider en appelant la méthode addItem() pour ajouter chaque élément après avoir créé le clip, une zone colorée.

import fl.data.DataProvider; 
import flash.display.DisplayObject; 
 
var aBox:MovieClip = new MovieClip(); 
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++) { 
    drawBox(aBox, colors[i]);    // draw box w next color in array 
    dp.addItem( {label:colorNames[i], source:aBox} ); 
} 
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();        

Vous pouvez également utiliser des données XML (au lieu d’un tableau) pour remplir un objet DataProvider. Par exemple, le code suivant stocke des données dans un objet XML intitulé employeesXML , puis transmet cet objet en tant que paramètre de valeur de la fonction constructeur DataProvider() :

import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aDg:DataGrid = new DataGrid(); 
addChild(aDg); 
 
var employeesXML:XML =  
    <employees> 
        <employee Name="Edna" ID="22" /> 
        <employee Name="Stu" ID="23" /> 
    </employees>; 
 
var myDP:DataProvider = new DataProvider(employeesXML); 
 
aDg.columns = ["Name", "ID"]; 
aDg.dataProvider = myDP;

Vous pouvez fournir des données en tant qu’attributs des données XML, comme dans le code précédent, ou en tant que propriétés des données XML, comme dans le code suivant :

var employeesXML:XML =  
    <employees> 
        <employee> 
            <Name>Edna</Name> 
            <ID>22</ID> 
        </employee> 
        <employee> 
            <Name>Stu</Name> 
            <ID>23</ID> 
        </employee> 
    </employees>;

Le DataProvider dispose également d’un ensemble de méthodes et de propriétés vous permettant d’y accéder et de le manipuler. Vous pouvez utiliser l’API du DataProvider pour ajouter, supprimer, remplacer, trier et fusionner des éléments dans un DataProvider.