Expression Lab

Si has pasado un rato en Expression Lab aprendiendo sobre Blend y SketchFlow, seguramente has llegado a un punto en el que quieres aprender más y llevar el uso de estas herramientas a un nivel superior.

Sabiendo que la destreza y maestría en el uso de una herramienta no llegan solos, en esta ocasión comparto algunos trucos y consejos sobre SketchFlow y Blend 3 que seguramente te ayudarán a domar esta herramienta y a hacer tu trabajo más fácil. ¡Empecemos!

1. Conectando pantallas en SketchFlow Map

El procedimiento normal para crear pantallas en SketchFlow Map es el de hacer drag and drop de el botón “Create a Connected Screen” lo cual genera una ventana unida a la original tal como muestra esta imagen:

Pero qué sucede cuando creamos una pantalla directamente presionando el botón   y nuestra pantalla no está ligada a ninguna otra y queremos conectarla con alguna de ellas?

Muy fácil! Seleccionando la ventana que quieras conectar, haz un drag and drop sobre la otra ventana a la cual quieres conectar la primera y listo! Verás que como por arte de magia aparece una flechita blanca conectando ambas pantallas, donde la dirección del puntero marca la dirección del flujo (si sale de una pantalla ‘x’ hacia otra pantalla ‘y’ o si viene de ‘y’ a ‘x’). Incluyo el ejemplo:

2. Scroll para ventanas de SketchFlow

Si has estado jugando lo suficiente en SketchFlow como para haber llegado a probar tus aplicaciones Silverlight en el browser, te habrás dado cuenta que en caso de que tus pantallas sean más grandes que el espacio disponible en el SketchFlow player no puedes ver la totalidad de tu interfaz / aplicación a menos que utilices el zoom para hacer todo más chico, con lo que todo pierde legibilidad.

En este ejemplo tengo una pantalla con medidas 1024 x 900 tal como puedes ver en la imagen:

debido a que mi monitor no es tan grande, al correr mi aplicación la misma no entra dentro del SketchFlow Player, ocultándome partes de la interfaz:

quedando como tarea el solucionar quie podamos ver todos los contenidos sin tener que hacer un zoom  out.

Tenemos dos opciones:

La primera, ocurrenciade la casa, consiste en utilizar uno de los behaviors incluídos en Blend, MouseDragElementBehavior, para lograr que podamos mover la ventana y así poder observar todos sus contenidos.

Lo que tenemos que hacer es agregar el behavior MouseDragElementBehavior a “LayoutRoot” con tal de que podamos mover este elemento y así observar todos sus contenidos:

Dejaremos las opciones del behavior tal como se ve en el panel Properties de la imagen de arriba y presionaremos F5 para ver nuestra aplicación en el browser:

Como podrás ver, el “Drag” ya se puede realizar, el problema es que al mover hacia la izquierda o derecha nuestra pantalla, termina siendo “enmascarada” y no se despliega correctamente. El motivo es que la misma está dentro del UserControl que tiene medidas definidas (no automáticas). Para solucionar esto regresaremos a Blend y haremos lo siguiente:

presionamos los botones que resalté en la imagen con tal de que las medidas sean Automáticas tanto para la altura como  para el ancho. Una vez hecho esto podemos correr de nuevo nuestra aplicación (F5) y sorpresa:

No es lo mismo que verlo en vivo a una imagen pero bueno, el resultado es claro: ya podemos ver por completo nuestra ventana, moverla de un lado al otro sin que se corte o enmascare y sin tener que hacer el alejamiento con el zoom. Las contras de esto vienen cuando utilizamos botones y se registra el click al seleccionarlos (lo que genera que el behavior “piense” que se le está llamando a él) – algo complicado de explicar y que entenderás mejor poniéndolo en práctica :)

2. La segunda opción viene de una conversación con Kirupa (si eres seguidor de buenos blogs TIENES que saber quién es Kirupa), y consta de utilizar el ScrollViewer con el que podamos hacer scroll hacia arriba, abajo e izquierda y derecha.

Este método no lo he probado a pesar de haber visto algunos ejemplos… si alguien se anima a hacerlo y compartir, será más que bienvenido!

3.- Lorem Ipsum y  Sample Data

Siendo diseñador o desarrollador, en este caso da por igual, seguramente estás familiarizado con el famoso Lorem Ipsum: Más de una vez en un proyecto, sea para web o para escritorio, es necesario simular textos en una tabla, en una lista, control, etc. o también simular datos devueltos por servicios, bases de datos, etc. Si lo has hecho una vez, coincidirás conmigo sobre que es algo engorroso.

Sample Data es una nueva herramienta en Blend: Nos permite generar datos de ejemplo con tal de ser utilizados en controles como listas, tablas y otros elementos de la interfaz.y obviamente para simular información que en la aplicación final vendría desde una base de datos a la cual o no tenemos acceso o todavía no ha sido creada.

Para crear Sample Data hay que ir al panel Data y realizar los siguientes pasos:

Definimos el nombre de la colección de datos:

Importante: Podemos optar por activar los datos de ejemplo para cuando corramos la aplicación o no, debido a que es posible utilizar Sample Data solamente mientras trabajamos en Blend y utilizar datos reales una vez que la aplicación está corriendo.

A continuación podrás ver la colección de datos “NombreColeccionDatos” que contiene ya dos propiedades por defecto: Property1 y Property2

las cuales podemos renombrar y modificar el tipo de datos que representan:

Tal como se ve  en la imagen, podemos seleccionar diferentes tipos de datos como Nombres, Direcciones, Precios, etc. con lo cual no tendremos que generarlos manualmente.

Consejo de Oro: Si los datos que te despliega no son de tu agrado (Aaberg Jesper, Adams Terry, etc), puedes modificar los archivos que contienen los datos de ejemplo. Los puedes encontrar en \Program Files\Microsoft Expression\Blend 3\SampleDataResources\en\

4.- Transiciones entre ventanas de SketchFlow

Tal como habrás visto en alguna demo o lo habrás utilizado en tu trabajo, SketchFlow tiene SketchFlow Animations, que sirven para simular comportamientos de módulos, usuarios, etc. pero no funciona como una herramienta para generar interpolaciones entre ventanas en una aplicación.

Para crear interpolaciones entre ventanas hay un secreto que debes saber y que te será de mucha utilidad si quieres transiciones diferentes a las comunes (por corte).

Teniendo al menos dos ventanas conectadas entre sí en el SketchFlow Map:

Seleccionaremos la línea curveada (con punta de flecha), que une a ambas ventanas y haremos click con el botón derecho del mouse. Ahí se nos presentan las siguientes opciones:

y bueno, creo que el resto es historia… puedes seleccionar la transición que más te guste y listo!

5. Organizando la interfaz de Blend

Al trabajar en una aplicación SketchFlow es común que tengamos muchos paneles abiertos que hacen que nuestro campo de juego sea reducido y no ttengamos tanto espacio para trabajar. El secreto aquí es saber cómo podemos organizar nuestra interfaz según el trabajo que estemos realizando:

En Blend puedes seleccionar entre dos Workspaces predefinidos: Design y Animation en el menú Window > Workspaces, o más fácil, puedes presionar la tecla F6 cada vez que quieras cambiar entre uno y el otro. Si no te gustan éstos puedes

Sí… qué bien! pero ninguno de los 2 me convence! Blend te permite acomodar los paneles de la manera que más te guste de manera muy fácil y guardarlos (así los puedes usar en todos tus proyectos y no solo en uno). Basta con seleccionar las pestañas de cada Panel para moverlo y acomodarlo donde gustes. Aquí va una pequeña demo:

Finalmente no podría quedar fuera la tecla TAB: al presionarla ocultas todos los paneles para despegar un poco la superficie de trabajo; también puedes lograrlo presionando F4. Obviamente al presionar de nuevo cualquiera de las dos teclas los paneles se vuelven a mostrar.

Espero que estos consejos te hayan sido útiles y que te simplifiquen el trabajo en Expression Blend y SketchFlow.Pronto compartiré algunos más.

Y bueno, ya para cerrar… tienes algún consejo o truco que hayas descubierto usando Blend y SketchFlow? Crees que hay algo que falta por aquí?

Espero sus comentarios y sugerencias.
Daniel