Utilisation du composant DataGrid

Utilisation d’un fournisseur de données local avec un composant DataGrid

Cet exemple crée un composant DataGrid pour afficher l’effectif d’une équipe sportive. Il définit l’effectif sous la forme d’un tableau ( aRoster ) et l’attribue à la propriété dataProvider du composant DataGrid.

1. Dans Flash, choisissez Fichier > Nouveau, puis Fichier Flash (ActionScript 3.0).

2. Faites glisser le composant DataGrid du panneau Composants vers la scène.

3. Dans l’Inspecteur des propriétés, entrez le nom d’occurrence aDg .

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

   import fl.data.DataProvider; 
    
   bldRosterGrid(aDg); 
   var aRoster:Array = new Array(); 
   aRoster = [ 
           {Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},  
           {Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"}, 
           {Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"}, 
           {Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"}, 
           {Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"}, 
           {Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"}, 
           {Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"}, 
           {Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"}, 
           {Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"}, 
           {Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"}, 
           {Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"}, 
           {Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"}, 
           {Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: "Palo Alto, CA"}, 
   ]; 
   aDg.dataProvider = new DataProvider(aRoster); 
   aDg.rowCount = aDg.length; 
    
   function bldRosterGrid(dg:DataGrid){ 
       dg.setSize(400, 300); 
       dg.columns = ["Name", "Bats", "Throws", "Year", "Home"]; 
       dg.columns[0].width = 120; 
       dg.columns[1].width = 50; 
       dg.columns[2].width = 50; 
       dg.columns[3].width = 40; 
       dg.columns[4].width = 120; 
       dg.move(50,50); 
   };

   La fonction bldRosterGrid() définit la taille du composant DataGrid, ainsi que l’ordre des colonnes et leurs tailles.

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

Définition de colonnes et ajout d’un tri pour un composant DataGrid dans une application

Notez que vous pouvez cliquer sur le titre de n’importe quelle colonne pour trier le contenu du composant DataGrid dans l’ordre décroissant des valeurs de cette colonne.

L’exemple suivant fait appel à la méthode addColumn() pour ajouter des occurrences de DataGridColumn à un composant DataGrid. Les colonnes représentent les noms des joueurs et leurs scores. L’exemple règle également la propriété sortOptions afin de définir les options de tri pour chaque colonne : Array.CASEINSENSITIVE pour la colonne Nom et Array.NUMERIC pour la colonne Score. Il définit une taille appropriée pour le composant DataGrid en fixant la longueur au nombre de lignes et la largeur à 200.

1. Dans Flash, choisissez Fichier > Nouveau, puis Fichier Flash (ActionScript 3.0).

2. Faites glisser le composant DataGrid du panneau Composants vers la scène.

3. Dans l’Inspecteur des propriétés, entrez le nom d’occurrence aDg .

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

   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.events.DataGridEvent; 
   import fl.data.DataProvider; 
   // Create columns to enable sorting of data. 
   var nameDGC:DataGridColumn = new DataGridColumn("name"); 
   nameDGC.sortOptions = Array.CASEINSENSITIVE; 
   var scoreDGC:DataGridColumn = new DataGridColumn("score"); 
   scoreDGC.sortOptions = Array.NUMERIC; 
   aDg.addColumn(nameDGC); 
   aDg.addColumn(scoreDGC); 
   var aDP_array:Array = new Array({name:"clark", score:3135}, {name:"Bruce", score:403}, {name:"Peter", score:25}) 
   aDg.dataProvider = new DataProvider(aDP_array); 
   aDg.rowCount = aDg.length; 
   aDg.width = 200;

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

Création d’une occurrence du composant DataGrid à l’aide d’ActionScript

Cet exemple crée un composant DataGrid à l’aide de ActionScript et le remplit d’un tableau contenant les noms et les scores des joueurs.

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

2. Faites glisser le composant DataGrid du panneau Composants vers le panneau Bibliothèque du document en cours.

   Cette opération permet d’ajouter le composant à la bibliothèque, mais elle ne permet pas de le rendre visible dans l’application.

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

   import fl.controls.DataGrid; 
   import fl.data.DataProvider; 
    
   var aDg:DataGrid = new DataGrid(); 
   addChild(aDg); 
   aDg.columns = [ "Name", "Score" ]; 
   aDg.setSize(140, 100); 
   aDg.move(10, 40);

   Ce code crée l’occurrence de DataGrid, puis dimensionne et positionne la grille.

4. Créez un tableau, ajoutez-y des données et identifiez-le comme fournisseur de données du composant DataGrid :

   var aDP_array:Array = new Array(); 
   aDP_array.push({Name:"Clark", Score:3135}); 
   aDP_array.push({Name:"Bruce", Score:403}); 
   aDP_array.push({Name:"Peter", Score:25}); 
   aDg.dataProvider = new DataProvider(aDP_array); 
   aDg.rowCount = aDg.length;

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

Chargement d’un composant DataGrid avec un fichier XML

L’exemple suivant emploie la classe DataGridColumn pour créer les colonnes du composant DataGrid. Il remplit le composant DataGrid en transmettant un objet XML comme paramètre value du constructeur DataProvider() .

1. Par le biais d’un éditeur de texte, créez un fichier XML contenant les données suivantes et enregistrez-le sous le nom team.xml dans le dossier dans lequel vous enregistrerez le fichier FLA.

   <team> 
       <player name="Player A" avg="0.293" /> 
       <player name="Player B" avg="0.214" /> 
       <player name="Player C" avg="0.317" /> 
   </team>

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

3. Dans le panneau Composants, double-cliquez sur le composant DataGrid pour l’ajouter sur la scène.

4. Dans l’Inspecteur des propriétés, entrez le nom d’occurrence aDg .

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

   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.data.DataProvider; 
   import flash.net.*; 
   import flash.events.*; 
    
   var request:URLRequest = new URLRequest("team.xml"); 
   var loader:URLLoader = new URLLoader; 
    
    
   loader.load(request); 
   loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); 
    
   function loaderCompleteHandler(event:Event):void { 
    
       var teamXML:XML = new XML(loader.data); 
    
       var nameCol:DataGridColumn = new DataGridColumn("name"); 
       nameCol.headerText = "Name"; 
       nameCol.width = 120; 
       var avgCol:DataGridColumn = new DataGridColumn("avg"); 
       avgCol.headerText = "Average"; 
       avgCol.width = 60; 
        
       var myDP:DataProvider = new DataProvider(teamXML); 
        
       aDg.columns = [nameCol, avgCol]; 
       aDg.width = 200; 
       aDg.dataProvider = myDP; 
       aDg.rowCount = aDg.length; 
   }

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