Arbeiten mit der DataGrid-Komponente

Verwenden eines lokalen Datenproviders mit der DataGrid-Komponente

Im folgenden Beispiel wird ein Datenraster erstellt, um die Mitgliederliste eines Softballteams anzuzeigen. Die Mitgliederliste wird in einem Array ( aRoster ) angezeigt, das der Eigenschaft dataProvider der DataGrid-Komponente zugewiesen wird.

1. Wählen Sie in Flash „Datei“ > „Neu“ und dann „Flash-Datei“ (ActionScript 3.0).

2. Ziehen Sie die DataGrid-Komponente vom Bedienfeld „Komponenten“ auf die Bühne.

3. Geben Sie im Eigenschafteninspektor den Instanznamen aDg ein.

4. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein:

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

   Die Funktion bldRosterGrid() legt die Größe des Datenrasters fest sowie die Reihenfolge der Spalten und deren Größen.

5. Wählen Sie „Steuerung“ > „Film testen“.

Definieren der Spalten und deren Sortierung für eine DataGrid-Komponente in einer Anwendung

Beachten Sie, dass der Benutzer den Inhalt eines Datenrasters nach den Werten einer Spalte sortieren kann, indem er auf die Überschrift der betreffenden Spalte klickt.

Im folgenden Beispiel werden einer DataGrid-Komponente mit der addColumn() -Methode DataGridColumn-Instanzen hinzugefügt. Die einzelnen Spalten repräsentieren die Namen der Spieler und deren Punkte (Scores). In dem Beispiel wird zudem die Eigenschaft sortOptions so eingestellt, dass sie die Sortieroptionen für jede Spalte angibt: Array.CASEINSENSITIVE für die Spalte „Name“ und Array.NUMERIC für die Spalte „Score“. Die Größe des Datenrasters wird angepasst, indem die Länge (length) auf die Anzahl der Zeilen gesetzt wird und die Breite (width) auf 200.

1. Wählen Sie in Flash „Datei“ > „Neu“ und dann „Flash-Datei“ (ActionScript 3.0).

2. Ziehen Sie die DataGrid-Komponente vom Bedienfeld „Komponenten“ auf die Bühne.

3. Geben Sie im Eigenschafteninspektor den Instanznamen aDg ein.

4. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein:

   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. Wählen Sie „Steuerung“ > „Film testen“.

Erstellen einer DataGrid-Komponenteninstanz mithilfe von ActionScript-Code

Im folgenden Beispiel wird mithilfe von ActionScript ein Datenraster erstellt und mit einem Array an Spielernamen und Punkten gefüllt.

1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

2. Ziehen Sie die DataGrid-Komponente vom Bedienfeld „Komponenten“ in das Bedienfeld „Bibliothek“ des aktuellen Dokuments.

   Hierdurch wird die Komponente der Bibliothek hinzugefügt, sie wird jedoch nicht in der Anwendung angezeigt.

3. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein:

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

   Dieser Code erstellt die DataGrid-Instanz und legt dann Größe und Position des Rasters fest.

4. Erstellen Sie ein Array, fügen Sie dem Array Daten hinzu, und legen Sie das Array als Datenprovider für das Datenraster fest:

   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. Wählen Sie „Steuerung“ > „Film testen“.

Laden einer XML-Datei in ein Datenraster

Im folgenden Beispiel werden mithilfe der DataGridColumn-Klasse die Spalten des Datenrasters erstellt. Das Datenraster wird ausgefüllt, indem als value -Parameter des Konstruktors DataProvider() ein XML-Objekt übergeben wird.

1. Erstellen Sie mithilfe eines Texteditors eine XML-Datei mit den folgenden Daten und speichern Sie sie unter team.xml in demselben Ordner, in dem später die FLA-Datei gespeichert wird.

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

2. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

3. Doppelklicken Sie im Bedienfeld „Komponenten“ auf die DataGrid-Komponente, um sie der Bühne hinzuzufügen.

4. Geben Sie im Eigenschafteninspektor den Instanznamen aDg ein.

5. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein:

   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. Wählen Sie „Steuerung“ > „Film testen“.