De component DataGrid gebruiken

Een lokale gegevensaanbieder met een component DataGrid gebruiken:

In dit voorbeeld wordt een DataGrid gemaakt om het rooster van een softbalteam weer te geven. Het voorbeeld definieert het rooster in een Array ( aRoster ) en wijst deze toe aan de eigenschap dataProvider van de DataGrid.

1. Selecteer in Flash Bestand > Nieuw en selecteer vervolgens Flash-bestand (ActionScript 3.0).

2. Sleep de component DataGrid van het deelvenster Componenten naar het werkgebied.

3. Voer in Eigenschapcontrole de instantienaam aDg in.

4. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe:

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

   De functie functie bldRosterGrid() stelt de grootte van DataGrid in en stelt de kolomvolgorde en de grootte van de kolommen in.

5. Selecteer Besturing > Film testen.

In een toepassing kolommen opgeven en sorteren toevoegen voor een component DataGrid

U kunt op elke kolomkop klikken om de inhoud van DataGrid op basis van de waarden van de kolom in aflopende volgorde te sorteren.

In het volgende voorbeeld wordt de methode addColumn() gebruikt om instanties van DataGridColumn aan een DataGrid toe te voegen. De kolommen vertegenwoordigen de namen van spelers en hun scores. In dit voorbeeld wordt bovendien de eigenschap sortOptions ingesteld om de sorteeropties voor elke kolom op te geven: Array.CASEINSENSITIVE voor de kolom Naam en Array.NUMERIC voor de kolom Score. Het wijzigt vervolgens de grootte van DataGrid door de lengte op het aantal rijen in te stellen en de breedte op 200.

1. Selecteer in Flash Bestand > Nieuw en selecteer vervolgens Flash-bestand (ActionScript 3.0).

2. Sleep de component DataGrid van het deelvenster Componenten naar het werkgebied.

3. Voer in Eigenschapcontrole de instantienaam aDg in.

4. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe:

   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. Selecteer Besturing > Film testen.

Een componentinstantie DataGrid maken met ActionScript

In het volgende voorbeeld wordt met ActionScript een DataGrid gemaakt en aangevuld met een Array van spelernamen en scores.

1. Maak een nieuw Flash-document (ActionScript 3.0).

2. Sleep een component DataGrid van het deelvenster Componenten naar het deelvenster Bibliotheek van het huidige document.

   Hiermee voegt u de component aan de bibliotheek toe, maar de component wordt hierdoor niet zichtbaar in de toepassing.

3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe:

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

   Deze code maakt een instantie DataGrid en past vervolgens de grootte van het raster aan en positioneert deze.

4. Maak een array, voeg gegevens aan de array toe en identificeer de array als de gegevensaanbieder voor 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. Selecteer Besturing > Film testen.

Een DataGrid met een XML-bestand laden

Het volgende voorbeeld gebruikt de klasse DataGridColumn om kolommen voor DataGrid te maken. Het vult de DataGrid door een object XML door te geven als de parameter value van de constructor DataProvider() .

1. Gebruik een teksteditor om een XML-bestand te maken met de volgende gegevens en sla het bestand op onder de naam team.xml in dezelfde map waarin u het FLA-bestand opslaat.

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

2. Maak een nieuw Flash-document (ActionScript 3.0).

3. Dubbelklik in het deelvenster Componenten op de component DataGrid om deze aan het werkgebied toe te voegen.

4. Voer in Eigenschapcontrole de instantienaam aDg in.

5. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe:

   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. Selecteer Besturing > Film testen.