Uso del componente DataGrid

El componente DataGrid permite mostrar datos en una cuadrícula de filas y columnas, dibujando los datos de un conjunto o un archivo XML externo que se puede analizar en un conjunto de DataProvider. El componente DataGrid incluye desplazamiento horizontal y vertical, compatibilidad con eventos (incluida la compatibilidad con celdas editables) y capacidades de ordenación.

Es posible personalizar y cambiar el tamaño de las características, como la fuente, el color y los bordes de columnas en una cuadrícula. Puede utilizar un clip de película personalizado como procesador de celdas para cualquier columna de una cuadrícula. Los procesadores de celdas muestran el contenido de una celda. Se pueden desactivar las barras de desplazamiento y utilizar los métodos de DataGrid para crear una visualización del estilo de vista de página. Para obtener más información sobre la personalización, consulte la clase DataGridColumn en la Referencia de ActionScript 3.0 para Flash Professional .

Interacción del usuario con el componente DataGrid

Puede utilizar el ratón y el teclado para interactuar con un componente DataGrid.

Si la propiedad sortableColumns y la propiedad sortable de la columna tienen el valor true , al hacer clic en un encabezado de columna, se ordenan los datos según los valores de dicha columna. Para desactivar la ordenación en una columna determinada, hay que establecer su propiedad sortable en false .

Si la propiedad resizableColumns es true , se puede cambiar el tamaño de las columnas arrastrando los divisores de columna en la fila de encabezado.

Al hacer clic en una celda editable, se selecciona dicha celda; al hacer clic en una celda no editable no se altera el estado de la selección. Una celda es editable si sus propiedades DataGrid.editable y DataGridColumn.editable son true .

Para obtener más información, consulte las clases DataGrid y DataGridColumn en la Referencia de ActionScript 3.0 .

Si se selecciona una instancia DataGrid haciendo clic en la misma o utilizando la tabulación, podrá utilizar las teclas siguientes para controlar dicha instancia:

Tecla

Descripción

Flecha abajo

Cuando se edita una celda, el punto de inserción se desplaza al final del texto de la celda. Si una celda no puede editarse, la tecla de flecha abajo permite gestionar la selección tal como lo hace el componente List.

Flecha arriba

Cuando se edita una celda, el punto de inserción se desplaza al principio del texto de la celda. Si una celda no puede editarse, la tecla de flecha arriba permite gestionar la selección tal como lo hace el componente List.

Mayús+Flecha arriba/abajo

Si el componente DataGrid no es editable y allowMultipleSelection es true , selecciona las filas contiguas. Si se invierte la dirección con la flecha opuesta, anula la selección de las filas seleccionadas hasta que pase la fila inicial; a partir de ese momento, se seleccionan las filas en dicha dirección.

Mayús+Clic

Si allowMultipleSelection es true , selecciona todas las filas entre la fila seleccionada y la posición del símbolo actual (celda resaltada).

Ctrl+Clic

Si allowMultipleSelection es true , selecciona filas adicionales, que no necesitan ser contiguas.

Flecha derecha

Cuando se edita una celda, el punto de inserción se desplaza un carácter hacia la derecha. Si una celda no puede editarse, la tecla de flecha derecha no hará nada.

Flecha izquierda

Cuando se edita una celda, el punto de inserción se desplaza un carácter hacia la izquierda. Si una celda no puede editarse, la tecla de flecha izquierda no hará nada.

Inicio

Selecciona la primera fila en DataGrid.

Fin

Selecciona la última fila en DataGrid.

Re Pág

Selecciona la primera fila de una página de DataGrid. Una página consta del número de filas que DataGrid puede mostrar sin desplazamiento.

Av Pág

Selecciona la última fila de una página de DataGrid. Una página consta del número de filas que DataGrid puede mostrar sin desplazamiento.

Retorno/Intro/Mayús+Intro

Si una celda puede editarse, se lleva a cabo el cambio y el punto de inserción se desplaza a la celda de la misma columna, en la fila siguiente (arriba o abajo, en función del sentido de desplazamiento activado).

Mayús+Tabulador/Tabulador

Si DataGrid es editable, selecciona el elemento anterior/siguiente hasta que se alcance el final de la columna; a continuación, se selecciona la fila anterior/siguiente hasta que se alcance la primera o la última celda. Si se selecciona la primera celda, Mayús+Tabulador selecciona el control anterior. Si se selecciona la última celda, Tabulador selecciona el control siguiente.

Si DataGrid no es editable, selecciona el control anterior/siguiente.

Puede utilizar el componente DataGrid como base para los numerosos tipos de aplicaciones basadas en datos. Se puede mostrar fácilmente una vista de datos tabular con formato, aunque también se pueden utilizar las funciones del procesador de celdas para crear interfaces de usuario más sofisticadas y editables. A continuación se presentan usos prácticos del componente DataGrid:

  • Cliente de correo web

  • Páginas de resultados de búsqueda

  • Aplicaciones de hojas de cálculo, como las calculadoras de préstamos y las aplicaciones de impresos de declaración de la renta.

Al diseñar una aplicación con el componente DataGrid, resulta útil comprender el diseño del componente List, ya que la clase DataGrid amplía la clase SelectableList. Para obtener más información sobre la clase SelectableList y el componente List, consulte las clases SelectableList y List en la Referencia de ActionScript 3.0 .

Si se añade el componente DataGrid a una aplicación, se puede hacer accesible a un lector de pantalla añadiendo las líneas de código ActionScript siguientes:

import fl.accessibility.DataGridAccImpl; 
DataGridAccImpl.enableAccessibility();

La accesibilidad de un componente sólo se activa una vez, sea cual sea su número de instancias. Para más información, consulte el Capítulo 18, "Creación de contenido accesible" de Uso de Flash .

Parámetros del componente DataGrid

A continuación se indican los parámetros de edición que se pueden definir para cada instancia del componente DataGrid en el inspector de propiedades o en el inspector de componentes: allowMultipleSelection , editable , headerHeight , horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrolllPolicy , resizableColumns , rowHeight , showHeaders , verticalLineScrollSize , verticalPageScrollSize y verticalScrollPolicy . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase DataGrid en la Referencia de ActionScript 3.0 para Flash Professional .

Creación de una aplicación con el componente DataGrid

Para crear una aplicación con el componente DataGrid, primero debe determinar el origen de los datos. Normalmente, los datos proceden de Array, que puede insertarse en la cuadrícula estableciendo la propiedad dataProvider . También se pueden utilizar los métodos de las clases DataGrid y DataGridColumn para añadir datos a la cuadrícula.

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.