Una de las mas importantes y novedosas características incluidas en las versiones preview de Flash Builder Burrito, y Flash Catalyst Panini, se encuentra la posibilidad de realizar Round Trip Editing o Edición de ida y vuelta entre ambas herramientas. La brecha existente entre Diseñadores y Desarrolladores se hace cada vez mas pequeña con este flujo de trabajo. El propósito de este tutorial es mostrar el flujo de trabajo actual en ambas herramientas.

1.- Comenzaremos creando un nuevo proyecto en Burrito, que sea compatible con Panini. Esta es una de las nuevas funciones de Flash Builder, que en esta versión preview podemos probar.


No tenemos tantas opciones como cuando creamos un proyecto de Flex ya sea de escritorio o web. Esto debido a que no podremos añadirle interacción a un servidor, ni agregar librerías (swc) que se vayan a utilizar en nuestro proyecto. La estructura de nuestro proyecto es muy estricta, de modo que una de las nuevas funciones, estará todo el tiempo monitoreando los componentes que queremos utilizar y nos avisara si podrán ser editados en Panini o si no es compatible.

Nuestro código no es muy diferente al que obtenemos por defecto al crear un proyecto de Flex.

Diferencias del código inicial:

2.- Cambiaremos a la vista de diseño y arrastraremos hasta nuestra aplicación un TextInput, un Button y una List (todos estos son compatibles con Panini). Al guardar nuestro proyecto, en la ventana de Problems visualizaremos un aviso como el siguiente: List will not be fully editable in Flash Catalyst: Expected: property dataProvider. Lo cual significa que podremos editar solo ciertos elementos de nuestra lista. El código de estos componentes debería estar así:

3.- Exportaremos nuestro proyecto y lo abriremos en Flash Catalyst.
Ya dentro de Panini crearemos dos estados mas y renombraremos el predeterminado, de modo que tengamos un estado llamado uno, otro llamado dos y un tercero llamado tres.

4.- Importaremos a nuestro proyecto una imagen. para ello vamos a File -> Import -> Image y la seleccionamos.

Esta imagen sera visible solo en los estados dos y tres. Sus valores serán los siguientes: x= 212, y=15. Nuestro TextInput sera reemplazado por uno de los nuevos componentes de Panini, Search, al cual modificaremos algunos de sus estilos en sus dos estados propios (unfocused, focused).

5.- Lo mismo haremos para nuestro botón.

6.- Editaremos nuestra List. de modo que sus propiedades para cada elemento sean las siguientes:
Rectangle: width=532 height=477
Repeated Item: witdh=515 height=474
Vertical Scrollbar: width=15 heigth=476
La Horizontal Scrollbar estara oculta, y editaremos el Repeated Item.

Para terminar en Panini agregaremos efectos de transición entre nuestros tres estados, para lo cual haremos visibles nuestros componentes solo para los estados dos y tres, el estado uno quedara vació y tendrá una transición que nos envié al estado dos, una vez se allá terminado de cargar la aplicación. De este modo podemos agregar los efectos que deseemos a nuestros componentes al momento en que aparezcan en nuestra aplicación.

Descargar proyecto hasta este punto. RoundTripEditing.fxp
7.- Importaremos de vuelta este proyecto a Flash Builder Burrito. Si no se volverá a editar algún componente en Panini, podemos entonces modificar algunas de las propiedades de nuestro proyecto. En caso de que se requiera una edición futura en Panini, no se deberán modificar estas propiedades, de lo contrario el proyecto sera incompatible y no se podrá abrir en Flash Catalyst.

8.- Modificaremos algunas propiedades de nuestro proyecto. Seleccionándolo desde el Package Explorer iremos a la sección Flash Catalyst y deseleciconaremos el ComboBox presente, y de esta forma desactivaremos la función que todo el tiempo esta monitoreando las modificaciones que realizamos a nuestro proyecto y nos informa si sigue siendo compatible o no.

Y por ultimo, dentro de la sección Build Path seleccionaremos: “MX + Spark” puesto que varios de los componentes que podamos usar siguen estando dentro del paquete MX.

Ademas de que aquí mismo podemos agregar nuestras librerías SWC al proyecto sin problemas, y seguir con el tutorial Integración de Flickr con Flash Builder Burrito y así agregar la funcionalidad restante a esta aplicación con la cual podremos buscar fotografías de Flickr en esta interfaz mas interactiva, y a la cual podemos estilizar aun mas desde Flash Catalyst Panini.
Si te gusto este tutorial no olvides inscribirte al Diplomado Flex de Activ donde aprenderás a dominar diferentes herramentas como Flash Builder y Flash Catalyst de la tecnología Flex.