Desde algún tiempo está disponible en el website de Adobe Labs la versión beta de Adobe Flash Catalyst, que está diseñado para trabajar en conjunto con la nueva versión del ahora rebautizado Flash Builder 4.

El producto surge a partir de una necesidad real de achicar la brecha entre los diseñadores y los desarrolladores. De hecho, en nuestra opinión, si bien Catalyst está focalizado en diseñadores, puede ser utilizado indistintamente por los dos grupos de usuarios, ya que los conceptos que maneja pueden ser entendidos por ambos.

Es muy común que en ambientes de desarrollo RIA se produzca un ida y vuelta constante entre los diseñadores, que envían maquetados en PDFs u otros formatos, y los desarrolladores, que concentran buena parte de su esfuerzo en intentar traducir esos maquetados en pantallas Flex, mediante estilos y demás. Algo para lo que, en la mayoría de los casos, no están preparados.

Entonces, Flash Catalyst viene a subsanar esta deficiencia tecnológica, a través de los siguientes ítems:

• Por un lado, permite importar diseños de manera directa provenientes de Adobe Photoshop o Illustrator. Esta es la capacidad crítica del producto, ya que lo que se verá en pantalla en la aplicación Flex  es idéntico al trabajo del diseñador y no intervendrán otros factores de ambiente.
• La entrada de un proyecto Catalyst, como se dijo antes,  puede ser un proyecto Illustrator. La salida es un proyecto Flex 4, sin lógica de negocio y con la lógica de presentación parcialmente incompleta. La tarea del desarrollador será continuar la aplicación para cerrarla, pero, en la mayoría de los casos, no tendrá que preocuparse por cuestiones de “eyecandy”.
• Presenta conceptos Flex de una manera mucho más amigable para el diseñador. Por ejemplo, los estados y transiciones ahora pueden ser configurados por un diseñador gráfico que no tiene que inmiscuirse en MXML ni en qué ocurre “under the hood”. También los efectos se ven simplificados: pueden configurarse de manera gráfica y las abstracciones de Sequence y Parallel se ven de una manera mucho más clara a través de una línea de tiempo en pantalla.

Dicho esto, hagamos una breve reseña de cómo está compuesta la interfaz de Flash Catalyst:

Vamos a hacer una breve reseña de cómo está formada la interfaz del producto antes de seguir.

Lo primero que nos encontramos cuando abrimos el producto es el área de diseño (3). Acá es donde podemos ver los gráficos vectoriales que o bien dibujamos con las herramientas de wireframing (4) o bien que importamos de Adobe Illustrator.

Al posicionarnos sobre uno o un conjunto de ítems del diseño, podemos ver el Heads-Up Display, el HUD (2), que es el panel a través del cual vamos a dar vida a nuestra pantalla dibujada.

La pantalla de Layers (5) muestra las capas del diseño tal como las definió el diseñador. De esa forma, el diseñador puede realizar algún agrupamiento lógico de los componentes del dibujo desde Illustrator para facilitarse el trabajo y verlo desde Catalyst.

También pueden verse algunos componentes que vienen “de fábrica” (7) y las propiedades del los objetos (6).

Un ejemplo práctico

Sigamos con un ejemplo, el videoclub (revisited). Vamos a hacer un componente Flex que muestre títulos de películas. Arrancamos con un diseño básico:

Acá hacemos un alto para notar que lo anterior es sólo un dibujo (artwork). En la realidad, este artwork sería realizado por un diseñador, pero en nuestro caso boceteamos la aplicación utilizando las herramientas de wireframe que existen en el panel que normalmente está arriba a la derecha. La idea del wireframe es dar la herramienta para dibujar pantallas de manera veloz para un prototipado rápido, en un estadío previo al desarrollo de la aplicación en sí por el diseñador.

Vamos a continuar con el proceso de conversión de un mero dibujo inanimado en un componente Flex utilizable en aplicaciones:

Seleccionamos el rectángulo que queremos que se convierta en un campo de texto y en el HUD lo convertimos a un “Text Input”. Lo que podemos ver a partir de ese momento es que el rectángulo ya no es marcado más como artwork, sino que Catalyst se refiere a él como un TextInput, justo lo que queríamos.

Si presionamos CTRL+ENTER podremos ver la aplicación corriendo. Y en efecto, tenemos una caja de texto 100% funcional!

Ahora vamos a darle vida a la lista de películas, para ello voy a seleccionar todos los objetos  gráficos que voy a hacer entrar en la lista y luego voy a convertirlo a componente desde el HUD.

Luego, Catalyst ya sabe que el conjunto de los componentes que seleccioné forman parte de una DataList. Pero luego hace falta que le cuente qué parte del dibujo representa el ítem de la lista, es decir, su parte variable. Catalyst me va a advertir sobre esto en la sección de Component Issues.

Para ello clickeo en “edit parts” y luego selecciono los elementos que van a formar parte de mi ítem de la lista. Hay que notar que Catalyst cambió de estado, ya no estoy editando la aplicación principal sino que pasé a editar un componente específico. Eso puedo verlo en la barra de arriba (breadcrum bar). Para volver sólo debo hacer click en los ítems predecesores.

Una  vez que hice esto, surge que Catalyst comprendió mi directiva, ya que repitió el ítem muchas veces. Algo que es necesario entender es que la aplicación todavía no llegó a la etapa de desarrollo, por lo que sólo tendrá datos dummies, que pueden editarse en la solapa de “design time data” en el panel inferior derecho, por lo que voy a ingresar nuevas películas aquí.  Adicionalmente, todavía en la edición de la lista, puedo arrastrar un componente VerticalBar y Catalyst hará el vínculo de manera automática.

El resultado es el que sigue:

Antes de seguir  vamos a hacer algo que todavía tenemos pendiente: convertir el panel en un custom component. Para ello seleccionamos todo y en el HUD hacemos Convert Artwork to Component -> Custom/Generic Component. Esa acción tan simple produce que Catalyst nos genere un componente MXML (aunque es transparente para el designer)

Ahora bien, lo que queremos conseguir es que al hacer click en “ver detalle” nuestro componente se expanda hacia la derecha y nos dé un resumen completo de la película.

Tiene sentido entonces que hablemos del concepto de estado, que está en sintonía con los estados de Flex. En la barra superior de states/pages vemos que se listan los estados correspondientes a nuestro custom component.

Renombramos el estado original a “cerrado” y lo duplicamos:

Y al nuevo estado le ponemos “expandido”.

El estado expandido está entonces basado sobre el estado original “cerrado”. Recordemos que un estado siempre se expresa sobre un conjunto de deltas definidos sobre un estado base.

La parte que sigue es interesante porque demuestra cómo el diseñador puede introducirse en la lógica de presentación, hasta cierto punto.

La idea es que al hacer click en “Detalle” se expanda o contraiga el panel dependiendo del estado actual en el que se encuentre. Primero seleccionamos el gráfico y lo convertimos en un botón desde el HUD

Ahora debemos configurar interactions, mediante las cuales expresamos lógica de presentación. Básicamente, quedan así:

Transicionamos a estado Cerrado cuando estamos en estado Expandido y viceversa, y ese es exactamente el efecto que queremos lograr. Presionando CTRL+Enter podemos ver el resultado.

Para finalizar, vamos a agregar un efecto visual al cambio de estado, a través de transiciones. Para ello abrimos el panel de inferior de timelines, y editamos la siguiente configuración:

Las state transitions se dan entre cambios de un estado a otro, y posibilitan la aplicación de efectos sobre los objetos que forman el componente que está transicionando. En este caso, aplicamos un Resize sobre el rectángulo principal.

El resultado final

Algunas conclusiones

• Adobe Flash Catalyst es un producto que seguramente se convierta en una parte importante de los futuros desarrollos RIA porque es una tecnología que llena un vacío que hoy no está cubierto. No solamente permite que el diseñador importe sus trabajos realizados con otra herramienta sino que además permite que se involucre en el desarrollo de la lógica de presentación.
• Genera código Flex 4, no siendo compatible con Flex 3. Esto es, entre otros, porque tiene una dependencia fuerte con la nueva API de containers de Flex 4, Spark.
• Sólo corre con la versión 10 del Flash Player.
• Actualmente no es posible la ida y vuelta (round trip) entre Catalyst y Flash Builder. Entendemos que una vez que se haga la release definitiva esta feature estará disponible.
• El código de presentación generado no es especialmente “lindo”. De todas formas, a partir de ahora, cabe preguntarse si esto es realmente importante, ya que apuntamos a hacer el mantenimiento de la presentación a través de la herramienta. Por otro lado, Catalyst no se mete con la lógica de negocio, la porción en la que nos interesa mantener estándares de calidad altos.

Finalmente, es una herramienta con un gran potencial y esperamos tener novedades pronto. Stay tuned!

Recursos

• Flash Catalyst, http://labs.adobe.com/technologies/flashcatalyst/
• Flash Builder 4, http://labs.adobe.com/technologies/flashbuilder4/