Un primer contacto con Flex

Flex es un lenguaje de programación orientado a RIA (Rich Internet Applications), basado en la tecnología y el runtime de Flash. Este lenguaje nos permitirá crear aplicaciones web ricas en interfaces dinámicas y funcionales, con una infinidad de posibilidades.

Para el ejemplo que aquí se expone, se realizará una pequeña tabla que muestre los valores de un XML, los cuales estarán contenidos en un fichero. En un caso real, lo haríamos sobre una respuesta HTTP, tipo Web Services.

Esta tabla o matriz contendrá funcionalidades extra, tales como ordenar por una determinada columna, cambiar una columna de posición o hacer scrolling a través de los datos.

En primer lugar crearemos un fichero llamado "categorias.xml", el cual almacenaremos (para el ejemplo) en la raíz del disco duro "C:". Su contenido será el siguiente

<?xml version="1.0" encoding="ISO-8859-1"?> <category-list> <category> <id>01</id> <name>Flores de interior</name> <title>Flor interior</title> <image></image> </category> <category> <id>02</id> <name>Flores de exterior</name> <title>Flor exterior</title> <image></image> </category> <category> <id>03</id> <name>Arbustos de interior</name> <title>Arb. interior</title> <image></image> </category> <category> <id>04</id> <name>Arbustos de exterior</name> <title>Arb. exterior</title> <image></image> </category> <category> <id>05</id> <name>Aromaticas</name> <title>Aromaticas</title> <image></image> </category> <category> <id>06</id> <name>Arboles hoja caduca</name> <title>Arbol caduca</title> <image></image> </category> <category> <id>07</id> <name>Arboles hoja perenne</name> <title>Arbol perenne</title> <image></image> </category> <category> <id>08</id> <name>Cactus</name> <title>Cactus</title> <image></image> </category> </category-list>

Para crear la aplicación en Flex, podemos utilizar Flex Builder (es de pago, pero se puede utilizar durante 60 días), o bien utilizando el SDK y un editor cualquiera (como Java).

Flex Builder permite utilizar MXML y ActionScript, ambos combinados, en un mismo fichero, cuya extensión es ".mxml". MXML es un lenguaje en formato XML, específico para las aplicaciones de Adobe.

Las primeras líneas del código serán:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

La primera línea es la típica que indica que el fichero está en formato XML. La segunda identifica dicho fichero como una aplicación MXML. Asimismo, indica que la disposición (layout) de los objetos que se dibujarán será absoluta, es decir, por coordenadas X,Y desde la esquina superior izquierda.

Toda aplicación en Flex comienza con esta línea, y acabará por está otra:

</mx:Application>

Para cargar el fichero XML, se utilizará la siguiente sentencia:

<mx:XML id="myXML" source="c:/categorias.xml" />

Por defecto, el formato será "e4x", el cual permitirá realizar operaciones directas, de una forma sencilla, sobre el xml, principalmente la navegación. Gracias a este formato, podremos acceder directamente al nodo del cual deseamos extraer la información (category), y ello se indica mediante la siguiente línea:

<mx:XMLListCollection id="goCategoryList" source="{myXML.category}" />

Con ésta, se crea una lista de colección XML, llamada "goCategoryList", que se extrae a partir del objeto "myXML", accediendo al nodo "category".

A continuación se crea la tabla con la información contenida en esta lista de colección:

<mx:DataGrid x="10" y="113" dataProvider="{goCategoryList}" width="645" id="gridCategories" editable="false" enabled="true"> <mx:columns> <mx:DataGridColumn id="ID" dataField="id" headerText="ID" width="15"/> <mx:DataGridColumn id="Name" dataField="name" headerText="Name" width="50"/> <mx:DataGridColumn id="Title" dataField="title" headerText="Title" width="50"/> <mx:DataGridColumn id="Image" dataField="image" headerText="Image" width="50"/> </mx:columns> </mx:DataGrid>

El objeto "mx:DataGrid" representa una tabla o matriz, que Flex ya tiene prefabricada con las funcionalidades descritas anteriormente. En la construcción de la tabla, se puede definir de dónde provienen los datos (dataProvider), que en este caso se especifica la lista de colección XML. También se puede indicar si es editable o no (se pueden introducir campos para entradas de datos), la posición de la tabla en el área de trabajo (X e Y), el alto y el ancho (height y width), si está activo o no (enabled), así como el nombre o identificador del objeto table (id).

Dentro de este objeto se debe definir el conjunto de columnas que integrará la tabla, a través del objeto "mx:column". Este objeto contendrá el detalle de cada columna, a través del objeto "mx:DataGridColumn". Este objeto designa un nombre o identificador para la columna (id), el texto de la cabecera de la columna (headerText), y se asocia el nombre del nodo XML del campo a la columna (dataField).

El código completo es el siguiente:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:XML id="myXML" source="c:/categorias.xml" /> <mx:XMLListCollection id="goCategoryList" source="{myXML.category}" /> <mx:DataGrid x="10" y="113" dataProvider="{goCategoryList}" width="645" id="gridCategories" editable="false" enabled="true"> <mx:columns> <mx:DataGridColumn id="ID" dataField="id" headerText="ID" width="15"/> <mx:DataGridColumn id="Name" dataField="name" headerText="Name" width="50"/> <mx:DataGridColumn id="Title" dataField="title" headerText="Title" width="50"/> <mx:DataGridColumn id="Image" dataField="image" headerText="Image" width="50"/> </mx:columns> </mx:DataGrid> </mx:Application>

El resultado final es el siguiente:




Espero que este primer ejemplo os anime a iniciaros en este fascinante mundillo de las aplicaciones RIA, especialmente con Flex.