Hola a todos nuevamente. Como post de apertura de esta nueva categoría, ‘Aplicaciones AIR’, pretendo enseñaros la creación de aplicaciones básicas basadas en AIR. De vez en cuando me gustaría mostraros alguna cosa un poco más desarrollada, por supuesto, esta y todas las aplicaciones estarán orientadas a la usabilidad dentro de este entorno.

Comentado y aclarado lo anteriormente mencionado, comienzo mostrando este pequeño Widget desarrollado en AIR. Su finalidad es bastante sencilla, está basado en la idea de recoger información de ciertas Web que ofrecen servicio de noticias mediante Feed´s RSS, y los cuales aprovecharemos para crearnos un pequeño entorno el cual recoja esta información, a veces pesada en su método de búsqueda. Con lo cual nos hará más facil la recopilación de cierta información de interes social, y le daremos un toque personal para ajustarlo a nuestro justo.

Pues bien, para empezar hay que decir que la aplicación ha sido desarrollada de una manera limpia y simple, basandome en dos clases MXML. La primera clase contiene las vistas principales de la aplicación y la segunda clase, es un componente Flex que extiende de un Canvas, el cual ha sido creado para el listado de las noticias que recojamos. No os preocupeis, a continuación se explica cada una de las dos clases anteriormente mencionadas.

“ps_feed_rss.mxml”

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="250" height="334" 
	borderColor="#000000" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#191919, #C7B3B3]"
	showStatusBar="false" showTitleBar="true" showGripper="false" title="www.portalscreen.com || Lector RSS"
	creationComplete="init();" usePreloader="true">
 
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import flash.net.navigateToURL;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
 
			[Bindable]
			private var ListaFeeds: ArrayCollection;
			private var obj: Object;
			private var stringFeed:URLRequest = new URLRequest('http://estaticos.marca.com/rss/portada.xml');
			private var _loader:URLLoader;
			[Bindable]
			private var listadoResultado:ArrayCollection ;
 
			private function init():void{
 
				ListaFeeds = new ArrayCollection();
 
				// Agregamos Feeds al ComboBox
				obj = new Object;
					obj.label = "Marca.com | Portada";
					obj.data = "http://estaticos.marca.com/rss/portada.xml";
					ListaFeeds.addItem(obj);
 
				obj = new Object;
					obj.label = "Elpais.com | Deportes";
					obj.data = "http://www.elpais.com/rss/feed.html?feedId=17048";
					ListaFeeds.addItem(obj);
 
				// Inicializamos la carga del primer feed 
				// y creamos listener de respuesta de datos
				_loader = new URLLoader;
				_loader.addEventListener(Event.COMPLETE, finishLoaded);	
				_loader.load(stringFeed);			
 
			}
 
			private function finishLoaded(ev:Event):void{
 
				listadoResultado = new ArrayCollection();
 
				for each ( var dato:* in XML(ev.target.data).channel.item){
					trace('----');
					listadoResultado.addItem(dato);
 
 
				}
 
				resultado.dataProvider = listadoResultado;
 
 
 
			}
 
			private function changeSelected():void{
				stringFeed = new URLRequest(cmbFeed.selectedItem.data);
				_loader.load(stringFeed);
 
			}
 
 
			private function gotoWeb():void{
 
				navigateToURL(new URLRequest('http://www.portalscreen.com'));				
			}
 
 
		]]>
	</mx:Script>
 
	<mx:ComboBox x="9" y="25" id="cmbFeed" width="198" dataProvider="{ListaFeeds}" change="changeSelected()" />
	<mx:Label x="10" y="10" text="Seleccione entrada RSS:" color="#FFFFFF"/>
	<mx:List x="6" y="77" width="237" id="resultado" height="211" itemRenderer="comboRenderer" dataProvider="{listadoResultado}" selectable="false" />
	<mx:Label x="9" y="59" text="Resultados" color="#FFFFFF"/>
	<mx:Label x="126" y="287" text="by Portalscreen.com" color="#FFFFFF" id="web" click="gotoWeb()" mouseChildren="false" buttonMode="true"/>
	<mx:HRule x="10" y="52" width="228" height="2" strokeColor="#1A1A1A"/>
 
</mx:WindowedApplication>

El código habla por sí mismo. El proceso es el siguiente, la función init() crea dos objetos, uno por cada feed que quremos añadir a la lista desplegable que posteriormente nos servirá para decidir que feed queremos visualizar, el siguiente paso es crear la variable que nos realizará la recuperación de los datos XML de noticias, que posteriormete una vez terminada, el Listener de esta variable nos realizará el pintado de las noticias en su correspondiente componente, en este caso se trata de un ComboBox.

El siguiente y último paso es el de crear el Componente ItemRenderer que nos servirá para darle un toque más artístico a la aplicación. En este caso se ha utilizado un componente basado en un Canvas y en él hemos implantado un TextArea para el título de la noticia y un Label que hará de enlace de la noticia hacia la web de su publicación.

“comboRenderer.mxml”

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="218" height="60" backgroundColor="#EBEBEB">
	<mx:Script>
		<![CDATA[
			import flash.net.navigateToURL;
		]]>
	</mx:Script>
	<mx:TextArea x="5" y="5" width="192" height="37" text="{data.title}" textAlign="left" selectable="false" editable="false" borderStyle="none" backgroundAlpha="0.0" fontWeight="bold" color="#2C2C2C"/>
	<mx:Label x="138" y="40" text="Leer +" width="75" textAlign="right" color="#061781" fontWeight="bold"
		mouseChildren="false" buttonMode="true" click="navigateToURL(new URLRequest(data.link));"/>
	<mx:HRule x="9" y="55" width="200"/>
</mx:Canvas>

Para concluir con esta entrada, os facilito una url de Descarga de este ejemplito sobre como crear un lector de Feed´s RSS y una imagen de muestra sobre la aplicación. Un saludo y como siempre, espero que sirva de ayuda para muchos y de referencia para otros.

Descargar Aplicación AIR