Desde hace poco podemos hacer uso del que será la nueva versión de Flash Builder. El objetivo de este tutorial es mostrar algunas de las nuevas características que la Beta de Flash Builder “Burrito” nos brinda. Sin embargo, durante el desarrollo de esta aplicación, aprenderemos a desarrollar aplicaciones que hagan uso de la API de Flickr, para lo cual necesitaremos primeramente, conseguir nuestro api key que al igual que en pasadas ocasiones, será la que nos permita acceder al servicio.

Después de haber accedido a nuestra cuenta de usuario en Flickr (o de habernos registrado en caso de no contar con una), entraremos al menú “Tú” para seleccionar “Tus aplicaciones” y así acceder al menú que nos permite el registro de una nueva aplicación que hará uso del servicio de Flickr.

A continuación nos encontraremos con lo siguiente…

Aún no has creado ninguna aplicación. ¿Por qué no creas la primera?

Donde al dar clic sobre la pregunta, seremos enviados a la siguiente pagina que nos muestra dos opciones. La primera es obtener un Api Key, y comenzar el desarrollo de nuestra aplicación. La segunda opción es publicar una aplicación de nuestra autoría. Nosotros seleccionaremos la primera opción.

La documentación de la API la encontraremos aquí: http://www.flickr.com/services/api/.

Existen dos tipos de Api keys, una No Comercial y una Comercial. Elegiremos la que nos convenga y seguiremos adelante con el desarrollo. De modo que al terminar el registro de nuestra aplicación, obtendremos dos claves, nuestro api key y la clave secreta de nuestra aplicación.

Con esto ya podemos comenzar el desarrollo de nuestra aplicación en la versión beta Flash Builder “Burrito”, la cual podemos descargar aquí: https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder_burrito.

Habiendo creado nuestro proyecto en Flex( tal como lo hacemos con Flex 4), solo que ahora nos encontraremos con algunos cambios en el menú.

Como podremos ver, ahora podemos crear proyectos para dispositivos móviles desde FB, además de tener la posibilidad de crear proyectos compatibles con Flash Catalyst (ahora el flujo de trabajo ha sido mejorado).

Desde ahora podemos probar el nuevo SDK “Hero” pues ya viene integrado por defecto en esta versión Beta de Burrito. Sin embargo los demás cambios en esta interfaz no son tan relevantes, en el segundo paso “Server Settings” nos encontraremos con la opción de seleccionar con qué tipo de servidor estaremos trabajando (en esta ocasión no seleccionaremos ninguno), son los mismos tipos de servidores con que hemos estado habilitados a trabajar desde FB 4.

Al dar clic en “Next” podremos ver como automáticamente es creado este proyecto en el Package Explorer aun sin haber dado clic a finalizar, esto hace más rápido el proceso de creación del proyecto y compilación.

El tercer apartado es “Build Path” donde importamos los swc que vamos a utilizar, podemos descargarlo aquí: http://code.google.com/p/as3flickrlib/. Habiendo descargado el swc, basta importarlo a nuestro proyecto para entonces sí, poder comenzar con el desarrollo de la aplicación.

En la vista de diseño arrastraremos hasta nuestra aplicación un Form, para después arrastrar dentro de este mismo un label, un textInput y un botón (debemos tener algo como la siguiente imagen). Los Form son de los nuevos componentes spark con que nos encontramos en esta versión beta, los cambios son visibles al momento en que arrastramos un componente dentro de estos form.

Las nuevas características de este componente (Form), son las que podemos observar en la imagen anterior. Ahora podemos crear formularios más fácilmente sin la necesidad de liarnos tanto al momento de diseñarlos.

Debemos obtener algo así después de modificar el valor de las labels que automáticamente nos genera dentro de cada formItem.

Crearemos un pequeño skin para nuestro TextInput, solo basta con ir a File -> New -> MXML Skin para acceder al menú que nos permitirá seleccionar en que folder o paquete se creara este nuevo skin, además del tipo de componente al cual queremos estilizar.

A continuación tendremos un archivo mxml que contiene los estilos del componente. Esta nueva versión de FB trae un code hinting bastante mejorado, el cual ahora nos muestra los diferentes componentes de los cuales podemos disponer para aplicar este skin, tal cual estuviéramos usando el code hinting para buscar entre las propiedades de un objeto, esto nos ayuda a disminuir los errores que podamos cometer al momento de definir el HostComponent.

Ya en nuestra aplicación, crearemos un bloque de Script, para definir nuestras variables a utilizar, asi como también nuestras funciones.

Estas son las librerías que vamos a necesitar:

Comenzaremos declarando las siguientes variables:

De esta forma solo nos falta agregar el panel que contendrá estas fotografías dentro de un dataGrid.

De esta forma al ejecutar nuestra aplicación, visualizaremos nuestra aplicación de la siguiente forma. Ahora cada vez que queramos buscar las fotos de un usuario basta ingresar su nombre en el textInput y ejecutar la función de búsqueda (En este ejemplo buscamos las fotos del buen @yacaFX).