Lector RSS con Flex

Uno de los ejemplos más claros, usados y útiles cuando se inicia con Adobe Flex, es la creación de un lector de noticias RSS, se usa para aprender a manipular archivos XML desde Flex con el objeto HTTPService.

Primero que todo debemos crear un nuevo proyecto de Adobe AIR (New, Flex Project, Application Type:Desktop Application (runs in Adobe AIR)), también es posible crear un proyecto para la Web, la única diferencia radica en que la ejecución se haría con el Flash Player y no con el runtime de Adobe.

Inicialmente, ponemos un panel cuyos constraints, estén distribuidos de esta manera:

Escribimos "Lector RSS" como titulo al panel, en el interior debemos ubicar un DataGrid, al cual le vamos a poner los mismos constraints que al panel, solo que le vamos a dejar un espacio 133 desde la base del panel hasta el pie del Datagrid, en el ID lo llamamos noticiasDg y ahora vamos a revisar la vista de código.

Ahora, vamos a usar uno de los elementos mas poderosos de la programación con Flex, que permite ahorrar decenas de lineas de código y realmente, aumenta la eficiencia en la lectura de XML, estoy hablando del objeto HTTPService, este objeto, se encarga de recorrer el XML, "parsearlo" (formatearlo) y almacenarlo como si todo hiciera parte de un objeto. Sigamos, después de la etiqueta (si están haciendo un proyecto web, se maneja ), vamos a colocar esto:

(<) mx:HTTPService

id="noticias"

url="http://feeds.feedburner.com/UnDaParaHablar?format=xml"

showBusyCursor="true"

result="cursorManager.removeBusyCursor();"

/>

Esta es la manera mas sencilla de manejar el objeto HTTPService, esta es la explicación de los atributos:

Id: es el nombre del objeto para llamarlo en el código.

URL: se refiere a la direccion de la que estamos extrayendo el XML (recuerden que si es web, siempre debe tener http://), en este caso esta es la dirección de este blog.

ShowBusyCursor: muestra un reloj en lugar del puntero del mouse cuando el objeto HTTPService está procesando información.

result: este atributo, nos permite ejecutar una acción determinada cuando se termine la carga del XML y el código cursorManager.removeBusyCursor();, remueve el reloj del puntero cuando.

Ahora, vamos a configurar el DataGrid, para que reconozca la información del XML que se almacena en noticias (recordemos que es el id del HTTPService), para esto, nos dirigimos a la etiqueta de noticiasDg y ponemos el atributo dataProvider="{noticias.lastResult.feed.entry}":

top="10" left="10" bottom="133" right="10"

dataProvider="{noticias.lastResult.feed.entry}" id="notDg">

Ponemos las llaves en: dataProvider = " {} ", porque estamos utilizando un objeto implicito, es decir, estamos manejando algo que posiblemente no este, estas llaves {} nos permiten manejar datos, que solo se verán en tiempo de ejecución. Como se pueden dar cuenta, estamos usando como proveedor de datos a noticias (el httpservice), usamos la propiedad lastResult, para obtener la última actualización del XML que estamos solicitando y lo que sigue, es la ruta de los nodos del XML.

Para poder ver el resultado, vamos a mostrar la información, para esto, nos dirigimos a las etiquetas y borramos la ultima, solo vamos a usar dos columnas y las dos que quedan las vamos a dejar de este modo:

headerText="Titulo" dataField="title"/>
headerText="Fecha" dataField="published"/>

headerText, es el encabezado de la columna en el dataGrid y dataField es el nombre del nodo que nos brindara la información que queremos, se pueden dar cuenta en la estructura del xml.

Finalmente, vamos a la etiqueta applicationComplete="cargar();", cargar, es una función debemos hacer, así que creamos el bloque script y la función de esta manera:

private function cargar():void{

noticias.send();
}

noticias.send(), envía la petición del XML a la url especifcada, pueden probarlo con Ctrl+F11 y esto debe ser suficiente para que se cargue el XML. Esto es todo, para esta primera parte, la segunda parte la escribiré dentro de poco.