Archivo para la categoría Tutoriales

Tutorial – Cliente RSS en Flex

En el siguiente tutorial aprenderemos a hacer un llamado a un servicio de datos remoto y a darle formato al resultado de ese llamado con la ayuda del modo “Flex Debugging”.

Para este ejemplo usaremos el objeto HTTPService, que nos permite hacer llamados HTTP y recibir respuesta de estos. Opcionalmente este objeto también nos permite enviar parametros (GET o POST) y con esto conseguir una interacción con datos de un servidor.

Para este ejemplo usaremos un servicio web gratuito de la cadena de noticias internacional BBC, sin embargo la gran mayoría de fuentes de noticias proveen datos en formato RSS que será el que usaremos para el ejemplo, así que ustedes pueden probar con la fuente de datos (blogs, noticias, etc) que prefieran.

Este es el código inicial, instanciamos el objeto HTTPService vía MXML, le asignamos la propiedad url a la fuente de datos RSS de nuestra preferencia y controlamos el evento “result” con el método onResult() que declaramos previamente. Luego hacemos el llamado al HTTPService con el click del botón para ver la traza haciendo un breakpoint en el método onResult().

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

<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;

public function onResult(e:ResultEvent):void{
trace(e);
}

]]>
</mx:Script>

<mx:HTTPService id="service" result="onResult(event)" url="http://www.bbc.co.uk/mundo/ciencia_tecnologia/index.xml" />

<mx:Button x="84" y="63" label="Traer Noticias" click="service.send()"/>

</mx:Application>

Con el código inicial en nuestra aplicación, usaremos el modo “debugging” de Flex Builder que nos permitirá rastrear toda la estructura del resultado RSS del HTTPRequest. Para esto asignaremos un breakpoint y conociendo la estructura del RSS asignaremos las variables a las columnas del DataGrid que se encarga del resto por nosotros… Así no más.

Update: Es importante tener en cuenta que para que el modo “Debugging” funcione, el flash player del navegador debe ser la versión debugger también. Esta versión la pueden descargar acá http://www.adobe.com/support/flashplayer/downloads.html. Ahí encontrarán la versión ActiveX control content debugger (Para Internet Explorer) y/o la versión Plugin content debugger (Para firefox o chrome). Como tip les digo que estas versiones se usan solo para desarrollo, sus aplicaciones ya puestas en producción solamente necesitan el Player de serie común y corriente.


, ,

4 Comentarios

ActionScript dentro de Flex (mxml)

La posibilidad del manejo de código ActionScript dentro de un archivo .mxml es una de las posibilidades que hacen de Flex una herramienta tan versátil. Si bien podemos manejar nuestro código de manera externa en archivos .as, el poder ingresar código e interactuar con los objetos que declaramos en .mxml es una posibilidad de por si, muy productiva.

Para esto simplemente trabajamos con el tag <mx:Script> el cual es generado automáticamente por el Builder, luego de cerrar el tag como tal. Esta es la estructura básica:

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

	<mx:Script>
		<![CDATA[

		]]>
	</mx:Script>

</mx:Application>

El siguiente código, ejecuta una función de Alerta definida en ActioScript desde una instancia de un botón declarada en MXML.

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

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;

			public function alerta():void{
				Alert.show("Hola Mundo","Mi Alerta");
			}
		]]>
	</mx:Script>

	<mx:Button id="miBoton" label="Mi Boton" click="alerta()"/>

</mx:Application>

Y de la misma forma, podemos referirnos a la instancia “miBoton” desde ActionScript. El siguiente código tiene exactamente la misma funcionalidad que el anterior. Se agregó la función init que es ejecutada con el controlador de evento creationComplete y que a su vez agrega el listener de click al boton “miBoton”.

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

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;

			public function init():void{
				miBoton.addEventListener(MouseEvent.CLICK,alerta)
			}
			public function alerta(e:MouseEvent):void{
				Alert.show("Hola Mundo","Mi Alerta");
			}
		]]>
	</mx:Script>

	<mx:Button id="miBoton" label="Mi Boton" />

</mx:Application>

, ,

1 Comentario

Tutorial – Introducción a Flex Builder 3

Este primer tutorial es de familiarización con la herramienta. Será un poco básico, sin embargo no sobra comenzar totalmente de cero para quienes no la conocen.

Con el proyecto creado podemos darnos cuenta de la estructura que genera automáticamente el FlexBuilder, la carpeta “src” que contiene nuestro código fuente que luego será compilado y puesto en la carpeta “bin” que será donde queden almacenados los archivos ejecutables.

Con esto ya sabemos crear nuestro entorno de trabajo. Los invito entonces a explorar y probar todos los componentes que tiene flex para ustedes.

, ,

2 Comentarios