Archivo para la categoría Flex

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

¿Por qué Flex?

¿Por qué, probarlo, aprenderlo, usarlo, trabajarlo?. Quiero centrarme en cuatro características de Flex que para mi en conjunto lo hacen diferente a sus contrapartes en el desarrollo de RIA’s: capacidad de despliegue, poderoso, fácil de aprender y adictivo.

Capacidad de despliegue. El SDK compila archivos de flex que convierte a su vez en archivos .swf (Flash) que luego podemos reproducir en más del 90% de computadores del mundo y que nos quita la preocupación de si se verá bien en Internet Explorer 6 o en Linux o mejor aún, de tener un CD de instalación de nuestra Aplicación!. Nada más que decir.

Poderoso. Flex Builder está construido sobre Eclipse, una herramienta que ya le hereda gran parte de su potencial, a su vez está plenamente integrado con ActionScript 3 lo cual hace que (para mí), el IDE de Flash, ya sea un accesorio. Y por si fuera poco la nueva versión del Flash Player (10) es un 30-40% más rápida que su antecesora que ya era rápida de por sí, lo cual lo hace poderoso tanto en etapa de desarrollo, como en etapas de producción y despliegue.

Fácil de aprender. El entorno de desarrollo es tan amigable que realmente esto puede acelerar el proceso de aprendizaje de la tecnología. Hay que dar muy pocos pasos para ver resultados, resultados que con otras tecnologías tardarían más y resultaría en frustraciones que frenarían este proceso. Que si hay conocimientos en programación básica, lenguajes orientados a objetos (ActionScript, Java, PHP5, C++, Perl, Ruby) y buenas bases de XML, ¡cuanto mejor!.

Adictivo. Flex es divertido de usar, en serio. Antes la labor de desarrollo con ActionScript en el Flash IDE era algo que no quiero, ni puedo decir y si a esto sumamos la gran utilidad de su ayuda “inteligente”, la corrección de código en tiempo real, el “arrastrar y usar” y la excelente sincronía entre los modos diseño/desarrollo del IDE, bueno, todo en conjunto creará una experiencia de la que muy difícilmente podrán rehabilitarse.

, ,

3 Comentarios

Introducción a Flex

En un artículo anterior hablábamos de qué es Flex desde un punto de vista más técnico; sin embargo es bueno contextualizar el porqué es una herramienta muy poderosa, con gran capacidad de despliegue, divertida y adictiva también.

No vayamos a los inicios del Internet, sin embargo tengamos en cuenta que la primera página web era texto. Con un pequeño formato, nada de estilos, solo un título, texto y enlaces. Luego a alguien se le ocurrió que eso era ¡aburrido!, obviamente no ganó el novel de ciencia por eso, pero sí que gano dinero. Así nace el primer navegador que integró todas las tecnologías necesarias para dejar de mostrar texto plano y más bien mostrar esos datos de manera bonita y con imágenes.

Luego vino el uso en masa de servicios que ya existían, sitios web, correo electrónico, chat, en fin, el resto es historia. Pero pasó mucho tiempo para que los sitios web tomaran la forma que hoy tienen; bueno era normal, había que concentrarse en la parte fea, la parte técnica, porque la parte bonita si no tenía una buena plataforma, pues no servía para nada.

Así que en algún momento de la historia del Internet a alguien se le ocurrió que este cuento podía ser además de productivo, algo estéticamente muy bonito, agradable, fácil de usar y otros factores que hicieran de la experiencia del usuario algo acogedor, algo de lo que no tuviera que salirse porque fuera feo sino porque su tiempo no se lo permitía más.

Entonces vino la siguiente revolución, la web 2.0. Y con ella el cambio de muchos conceptos, era el nuevo modelo de desarrollo web, un modelo más incluyente entre los desarrolladores, de mayor colaboración no solo humana sino de los mismos sistemas entre sí, un concepto de desarrollo no pensando de manera cerrada en mi plataforma, mi sistema, mi lenguaje, etc sino en gran medida algo para todos, algo abierto, no restrictivo; y comenzar a ver a Internet no como el medio sino como la plataforma. Y listo, eso quedó claro y comenzó todo ese movimiento web 2.0, comenzamos a ver aplicaciones de gran escala potenciadas por Ajax y en gran parte por Google.

Un tiempo atrás había comenzado otro fenómeno que fue creciendo rápidamente, la tecnología flash y su reproductor el Flash Player que operaba y lo sigue haciendo, como plug-in del navegador. En sus inicios era la manera más práctica de llevar al navegador imágenes vectorizadas con movimiento y además sonido, que luego creció hasta ser el plug-in más ampliamente extendido por el planeta.

Como pasa con toda tecnología, generó fanáticos y detractores de todo tipo, pero hoy es un fenómeno que se mantiene y que nadie puede negar, mucha gente no sabe siquiera que lo tiene instalado en su computador, solo sabe que puede ver videos en youtube.

Con todo ese movimiento web 2.0 en pleno auge y con el potencial que veía Macromedia con la penetración sin precedente del Flash Player, apostaron por la creación de Flex y fue cuando por primera vez acuñaron el término RIA.

En ese entonces la cosa parecía del futuro, tanto así que los costos en licencias, servidores de implementación y hasta la capacitación era prohibitiva para el cristiano promedio y su uso estuvo limitado a enfocarse en la élite, empresas grandes, aplicaciones sofisticadas y desarrolladores exclusivos, sin embargo eso cambió dramáticamente.

Desde la versión 1.5 de Flex se puede evidenciar todo ese cambio de concepción de esta herramienta, afectado de buena manera por las nuevas tecnologías emergentes de eso mismo que ellos llamaban RIA’s y que al estar apoyadas y a veces soportadas por Google eran o gratuitas o de Código Abierto. De esta manera llegamos a lo que es hoy Flex en su versión 3: Un SDK de código Abierto y una herramienta propietaria muy poderosa para desarrollo.

, , ,

5 Comentarios