Usare il componente DataGrid

Usare un fornitore di dati locale con un componente DataGrid:

Nell'esempio viene creato un componente DataGrid per visualizzare la lista dei giocatori di una squadra di softball. La lista viene definita in un Array ( aRoster ) che viene assegnato alla proprietà dataProvider di DataGrid.

1. In Flash, selezionate File > Nuovo, quindi selezionate File Flash (ActionScript 3.0).

2. Trascinate il componente DataGrid dal pannello Componenti allo stage.

3. Nella finestra di ispezione Proprietà, inserite aDg come nome di istanza.

4. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente:

   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 funzione bldRosterGrid() imposta le dimensioni del componente DataGrid e definisce l'ordine delle colonne e le relative dimensioni.

5. Selezionare Controllo > Prova filmato.

Specificare le colonne e aggiungere l'ordinamento di un componente DataGrid in un'applicazione

Potete fare clic sull'intestazione di una colonna per ordinare il contenuto del componente in ordine decrescente in base ai valori di tale colonna.

Nell'esempio seguente viene usato il metodo addColumn() per aggiungere le istanze DataGridColumn a un componente DataGrid. Le colonne rappresentano i nomi dei giocatori e i relativi punteggi. Nell'esempio viene anche impostata la proprietà sortOptions per specificare le opzioni di ordinamento per ciascuna colonna: Array.CASEINSENSITIVE per la colonna Name e Array.NUMERIC per la colonna Score. Le dimensioni di DataGrid vengono definite nel modo appropriato impostando la lunghezza in base al numero di colonne e la larghezza su 200.

1. In Flash, selezionate File > Nuovo, quindi selezionate File Flash (ActionScript 3.0).

2. Trascinate il componente DataGrid dal pannello Componenti allo stage.

3. Nella finestra di ispezione Proprietà, inserite aDg come nome di istanza.

4. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente:

   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. Selezionare Controllo > Prova filmato.

Creare l'istanza di un componente DataGrid mediante ActionScript

Nell'esempio seguente viene creato un componente DataGrid mediante ActionScript che viene compilato con un Array di nomi di giocatori e punteggi.

1. Create un nuovo documento Flash (ActionScript 3.0).

2. Trascinate il componente DataGrid dal pannello Componenti al pannello Libreria del documento corrente.

   In questo modo, il componente viene aggiunto alla libreria, ma non è visibile nel documento.

3. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente:

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

   Questo codice crea l'istanza DataGrid, quindi ridimensiona e posiziona la griglia.

4. Create un array, aggiungete i dati e identificate l'array come fornitore di dati per il componente 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. Selezionare Controllo > Prova filmato.

Caricare un file XML in un componente DataGrid

Nell'esempio seguente viene usata la classe DataGridColumn per creare le colonne del componente DataGrid, che viene compilato passando un oggetto XML come parametro value della funzione di costruzione DataProvider() .

1. L'uso di un editor di testo crea un file XML con i seguenti dati e lo salva come team.xml nella stessa cartella in cui verrà salvato il file 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. Create un nuovo documento Flash (ActionScript 3.0).

3. Nel pannello Componenti, fare doppio clic sul componente DataGrid per aggiungerlo allo stage.

4. Nella finestra di ispezione Proprietà, inserite aDg come nome di istanza.

5. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente:

   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. Selezionare Controllo > Prova filmato.