Conociendo Expression Blend + SketchFlow para prototipos de Windows Phone (1/2)

Por estos días empecé una aplicación sencilla que llamé Pocket Pillbox, como siempre usé Inkscape para maquetar su estilo Metro base, se los comparto como en el anterior post, por si les da ideas sencillas para sus aplicaciones y no cuentan con un diseñador

Pues bien además de eso quise empezar a planear algunos de sus flujos de navegación y recordé que para esto contamos en las herramientas de Microsoft con el Expression Blend + SketchFlow de la versión Ultimate de Visual Studio o de Expression.

Muchos se asustan con Expression Blend, a mi me pasó, después de aprender a usar un tiempo no lo cambio por nada, eso si, hay que aprender a manejarlo de verdad tanto la herramienta como los conceptos de diccionarios de recursos animaciones y enlaces de datos para organizar correctamente nuestro código y no terminar diciendo como escuché por ahí, que Expression generaba código desordenado, más bien es posible que un desarrollador o diseñador desordenado esté usando la herramienta, y siempre igual estará la opción de manipular el código y será mejor empezar de algo que de cero (en la mayoría de casos).

Lo muy positivo es que si aprendes a usar el Expression para hacer estos prototipos, verás que es tal cual como hacer la

Bueno, para empezar a usar la herramienta para hacer el prototipo de nuestra aplicación Windows Phone, debemos descargar la plantilla desde Codeplex e instalarla. A partir de ese momento podemos empezar a crear nuestro nuevo proyecto en Expression

Si la instalación fue correcta encontraremos en las plantillas de Windows Phone y podremos continuar, asignando un nombre a nuestro proyecto y eligiendo un lenguaje de trabajo.

Como ustedes si están leyendo este post, yo estoy aprendiendo, así que veamos, lo primero que encontré fue el Sketflow Map un espacio en el que podemos ver de manera macro cuales son las rutas disponibles desde cada una de las pantallas.

La otra zona representativa que veremos es nuestro Sketch o área de trabajo que presenta la forma de un Windows Phone.

Desde aquí y para familiarizarse un poco con el asunto, puedes ir al menú Projects, Run Project o presionar F5 y se abrirá un explorador con una aplicación de Silverlight que nos muestra la simulación del teléfono en Sketchs.

Empezando con mi aplicación y siendo que esta es un pivot con los días de la semana, tal cual como un pastillero, para esto debemos ir a los Assets y en los Controles buscar Mockups en donde encontraremos varios controles, Panoramas, Pivots, Mapas, en fin!

Seleccionando el control lo arrastramos hasta la parte inferior donde está el arbol de elementos visuales que tiene nuestra aplicación.

El añadir el pivot nos coloca dos secciones y nosotros podemos añadir más usando el control PivotItem y arrastrándolo igual que en el anterior paso.

Ahora vamos a añadir una barra para los iconos de acción de nuestra aplicación, veremos como Expression nos ayuda controlando que no agreguemos ciertos ítems en un lugar de la jerarquía que no corresponda, por ejemplo un ApplicationBar debe estar dentro del LayoutRoot, así que cuando lo intentamos soltar fuera, veremos algo así.

O así, si intentáramos reemplazar algún elemento superior, veriamos algo así.

Cuando la agregamos en la posición correcta observaremos que la barra queda ubicada en la parte superior del Layout

Así que seleccionando la barra vamos a la zona de propiedades y la anclamos en la parte inferior

Bueno, hasta aquí esta primera parte, en el próximo post añadiremos datos falsos para ver como queda nuestra aplicación, usando Data Samples, no se lo pierdan, ah por cierto, así quedó hasta el momento y podemos ver como se desplaza el Pivot si ejecutamos el proyecto.

Ojalá les empiece a gustar Expression Blend tanto como a mi ;)

Sorey