Uso del componente DataGrid

Uso de un proveedor de datos local con un componente DataGrid

En este ejemplo se crea un componente DataGrid para mostrar el calendario de un equipo de fútbol. El ejemplo define el calendario en Array ( aRoster ) y lo asigna a la propiedad dataProvider de DataGrid.

1. En Flash, seleccione Archivo > Nuevo y, a continuación, seleccione Archivo de Flash (ActionScript 3.0).

2. Arrastre el componente DataGrid del panel Componentes al escenario.

3. En el inspector de propiedades, introduzca el nombre de instancia aDg .

4. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:

   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 función bldRosterGrid() establece el tamaño de DataGrid y define el orden de las columnas y sus respectivos tamaños.

5. Seleccione Control > Probar película.

Especificar columnas y añadir la ordenación para el componente DataGrid de una aplicación

Debe tenerse en cuenta que se puede hacer clic en cualquier encabezado de columna para ordenar el contenido de DataGrid en orden descendente, según los valores de dicha columna.

En el siguiente ejemplo se utiliza el método addColumn() para añadir instancias de DataGridColumn a un componente DataGrid. Las columnas representan nombres de jugadores y sus puntuaciones. En el ejemplo también se define la propiedad sortOptions para especificar las opciones de orden para cada columna: Array.CASEINSENSITIVE para la columna de nombres y Array.NUMERIC para la columna de puntuaciones. Se da el tamaño apropiado a DataGrid estableciendo la longitud en el número de filas y la anchura en 200.

1. En Flash, seleccione Archivo > Nuevo y, a continuación, seleccione Archivo de Flash (ActionScript 3.0).

2. Arrastre el componente DataGrid del panel Componentes al escenario.

3. En el inspector de propiedades, introduzca el nombre de instancia aDg .

4. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:

   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. Seleccione Control > Probar película.

Creación de una instancia del componente DataGrid mediante código ActionScript

En este ejemplo se crea un componente DataGrid mediante ActionScript, que se llena con una instancia de Array de nombres y puntuaciones de jugadores.

1. Cree un nuevo documento de Flash (ActionScript 3.0).

2. Arrastre el componente DataGrid del panel Componentes al panel Biblioteca del documento actual.

   De este modo, se añade el componente a la biblioteca, aunque éste no se vuelve visible en la aplicación.

3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:

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

   Este código crea la instancia de DataGrid y, a continuación, ajusta el tamaño de la cuadrícula y la coloca en su posición correspondiente.

4. Cree un conjunto, añádale datos e identifíquela como el proveedor de datos de 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. Seleccione Control > Probar película.

Cargar un componente DataGrid con un archivo XML

En el ejemplo siguiente se utiliza la clase DataGridColumn para crear las columnas de DataGrid. Se llena DataGrid pasando un objeto XML como el parámetro value del constructor DataProvider() .

1. Con un editor de texto, cree un archivo XML con los siguientes datos y guárdelo como team.xml en la misma carpeta en la que guardará el archivo 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. Cree un nuevo documento de Flash (ActionScript 3.0).

3. En el panel Componentes, haga doble clic en el componente DataGrid para añadirlo al escenario.

4. En el inspector de propiedades, introduzca el nombre de instancia aDg .

5. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:

   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. Seleccione Control > Probar película.