Flex Hero nos provee una versión preview de lo que es el nuevo DataGrid del package Spark. El DataGrid ha madurado y trae muchas mejoras, al igual que los demás componentes Spark tenemos la posibilidad de editar su Skin totalmente, aunque en lo que se centrara este tutorial mas bien, es en el uso de ciertas características que han cambiado totalmente de la versión MX a Spark.

1.- Crearemos un nuevo proyecto web en Flash Builder Burrito, que ya incluye Flex Hero; en nuestra vista de diseño arrastraremos un Panel, dentro del cual agregaremos un DataGrid. Dentro del panel Properties modificaremos la posición de nuestro panel dentro de la aplicación.

El titulo de nuestro panel sera: “Adobe Software” y nuestro DataGrid abarcara al 100% el width y el Height de nuestro panel, de modo que si hacemos mas grande nuestro panel, el Datagrid crecerá. Nuestro código deberá estar así:

2.- A nuestro DataGrid le borraremos el contenido y le añadiremos un ID, “dataG“. Definiremos el tag Columns, donde tendremos ademas un ArrayList con cuatro GridColumns.

3.- Dentro de nuestro folder src crearemos otro folder llamado “data“, el cual contendrá un archivo xml dentro del cual se define un objeto llamado soft, el cual a su vez posee cinco propiedades: ID, name, logo, extention y preview. Los datos para cada uno son en especifico los de programas de Adobe, y de los cuales la propiedad logo, apunta hacia un archivo de imagen. Crearemos también un folder llamado images.

Descargar archivos.

4.- Dentro de nuestro bloque Declarations definiremos un HTTPService el cual cargara nuestro archivo logos.xml y nos permitirá acceder a sus atributos.

5.- Dentro de nuestro bloque de Script declaramos una nueva variable Bindable llamada imagenes del tipo ArrayCollection el cual contendrá los datos cargados del archivo xml. Nuestra función result, sera la que asigne esos valores a nuestra variable.

6.- A nuestro tag Application le agregaremos la propiedad CreationComplete la cual ejecutara nuestro HTTPService y nos brindara asi los datos de nuestro archivo logos.xml:

7.- Volviendo con nuestro DataGrid, añadiremos a cada una de nuestras GridColumn la propiedad dataField la cual deberá tener el nombre exacto del atributo que deseamos visualizar de nuestro archivo xml. Por lo cual, nuestro primer GridColumn logo no tendra esta propiedad, pues utilizaremos un itemRenderer para ello, la segunda llamara a extention, la tercera a name y la cuarta a preview.

8.- Nuestro primer GridColumn mostrara las imágenes y por ello le crearemos un itemRenderer. La forma de hacer esto ha cambiado mucho desde la versión MX a esta version Spark, ahora debemos definir un nuevo elemento llamado GridItemRenderer, el cual no es mas que un nuevo archivo de MXML, dentro del cual contendremos los elementos a mostrar en dicha columna. A nuestra columna le añadiremos la propiedad itemRenderer y después de haber creado este nuevo archivo (al cual llamaremos imagen), procederemos a editarlo añadiéndole un elemento Image.

Aplicacion principal:

Archivo Imagen:

9.- A nuestro segundo GridColumn, el cual mostrara la extensión de los archivos manejados por tal programa, le modificaremos algunos estilos haciendo uso del itemRenderer (de la forma en que la versión MX lo usa) y con el componente DefaultGridItemRenderer, al cual aplicaremos un tamaño de letra 18, un color 0X282828, un estilo bold, un alineamiento middle y un tipo de fuente Arial.

Clic para ver en tamaño completo

Haremos lo mismo con nuestro siguiente GridColumn, que sera el que muestre el nombre del programa. Aquí podemos cambiar los estilos y aplicar otros.

10.- A nuestro ultimo GridColumn, que mostrara si el programa se encuentra en versión preview, le crearemos un itemRenderer al igual que a nuestro primer GridColumn, pero este se llamara Demo, y lo que hará es evaluar si el valor contenido en el nodo de nuestro archivo es “true” o “false” y dependiendo de ello, mostrara un CheckBox seleccionado o deseleccionado.

Archivo Demo:

11.- Para finalizar, a nuestro DataGrid le añadiremos la propiedad alternatingRowColors la cual requiere de los colores que queremos tengan cada fila de nuestro componente, ademas de un dataProvider (imágenes).

Ahora, al ejecutar nuestra aplicación, visualizaremos lo siguiente: