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.
-
En Flash, seleccione Archivo > Nuevo y, a continuación, seleccione Archivo de Flash (ActionScript 3.0).
-
Arrastre el componente DataGrid del panel Componentes al escenario.
-
En el inspector de propiedades, introduzca el nombre de instancia
aDg
.
-
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.
-
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.
-
En Flash, seleccione Archivo > Nuevo y, a continuación, seleccione Archivo de Flash (ActionScript 3.0).
-
Arrastre el componente DataGrid del panel Componentes al escenario.
-
En el inspector de propiedades, introduzca el nombre de instancia
aDg
.
-
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;
-
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.
-
Cree un nuevo documento de Flash (ActionScript 3.0).
-
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.
-
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.
-
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;
-
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()
.
-
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>
-
Cree un nuevo documento de Flash (ActionScript 3.0).
-
En el panel Componentes, haga doble clic en el componente DataGrid para añadirlo al escenario.
-
En el inspector de propiedades, introduzca el nombre de instancia
aDg
.
-
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;
}
-
Seleccione Control > Probar película.
|
|
|