SketchFlow en Microsoft Expression Blend 3

Artículo
10/20/2021

Por Alejandro Hidalgo Fernández

SketchFlow en Microsoft Expression Blend 3

Una de las novedades más interesantes de Blend 3 es Sketch Flow que nos permitirá crear prototipos de las aplicaciones que vamos a realizar. Esta gran utilidad permitirá no sólo crear un prototipo para que los clientes finales den su aprobación, o simplemente para que el equipo conozca el story board general, diseños, estructuración de los elementos dentro de las pantallas, etc.

Lo primero que haremos será crear un proyecto Blend 3 llamado Silverlight 3 SketchFlow Application, en nuestro caso pondremos como lenguaje C# aunque para todo lo que veremos en este tutorial no necesitaremos picar ninguna línea.

La estructura que adopta Expression Blend 3 para este tipo de proyectos tiene algunos elementos a destacar. Por ejemplo, en la parte superior tenemos el panel de animación del SketchFlow que nos permitirá seguir la secuencia de animaciones y crearlas rápidamente. Además nos permitirá como si de un sistema de composición de video, animar las transiciones entre pantallas y estados de los elementos.

Por otra parte, en la zona inferior tenemos el mapa del SketchFlow en el que se mostrarán como se relacionan en forma de árbol unas pantallas con otras o con controles. Si ahora seleccionamos la Screen1 en el árbol nos saldrá un desplegable donde seleccionaremos el primero que es crear una nueva ventana “Screen2”.

Screen 1 lo renombramos a “Welcome” para ello lo seleccionamos en el mapa y con en las opciones del botón derecho seleccionamos Rename. Igual hacemos para Screen 2 y ponemos “Player”.

En la pantalla Welcome seleccionamos en la paleta de controles SketchStyles y tenemos los mismos controles que en Silverlight 3 pero con un estilo SketchFlow, es decir, como si los controles fuesen dibujados a mano. Esto es útil para cuando queremos enseñar un prototipo en una fase muy inicial y no sabemos cómo va a ser el estilo definitivo y sólo queremos enseñar la estructura de nuestra interfaz.

Añadimos un TextBlock y en la propiedad Text ponemos LiveMusic, cambiamos el tipo de letra a una Buxton Sketch a 72pt. Ahora añadiremos en la pestaña States un par de estados, para lo que crearemos dándole al icono con un más un nuevo grupo que llamaremos “LoadingGroup” y luego dos estados “Loaded” y “Loading” con una transición de 2 segundos entre ellos.

Añadimos entonces sobre nuestra pantalla de Bienvenida un botón cuya propiedad “Content” pondremos “Entrar” y un TextBlock en el que pondremos “Cargando…”. Les ponemos opacidad 0 y ahora seleccionamos el estado “Loading”. Veremos que pone que está grabando y ponemos la propiedad “Opacity” de la caja de texto a 100. Luego seleccionamos el estado “Loaded” y ponemos la Opacidad del Botón a 100. Si seleccionamos el botón con el click derecho veremos que al final del desplegable podemos dar unas funcionalidades de las que nos provee SketchFlow para activar un estado o para navegar a otra pantalla de nuestro diagrama. Nosotros escogeremos esta última y diremos que nos lleve a la pantalla “Player”.

Ya podemos probarlo dándole a F5 y veremos una aplicación que nos permite navegar entre nuestras pantallas. Nosotros seleccionaremos el estado “Loaded” y pulsamos el botón y veremos cómo nos lleva a la siguiente pantalla. Desde esta pantalla también podemos añadir comentarios que sirva de feedback.

En la pantalla del reproductor lo que haremos será añadir una serie de controles hasta imitar la forma de un reproductor con una lista de reproducción. Para aligerar esta parte pongo aquí el código:

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ps:SketchCircleSL HorizontalAlignment="Left" Margin="25,14,0,19" Style="{StaticResource Circle-Sketch}" Width="78" Grid.Row="2"/>

<ps:SketchRectangleSL HorizontalAlignment="Right" Margin="0,26,103,28" Style="{StaticResourceRectangle-Sketch}" Width="57" Grid.Row="2" RenderTransformOrigin="2.421,-0.217"/>

<ps:SketchRectangleSL HorizontalAlignment="Right" Margin="0,26,31,28" Style="{StaticResourceRectangle-Sketch}" Width="57" RenderTransformOrigin="2.421,-0.217" Grid.Row="2"/>

<ps:SketchRectangleSLHorizontalAlignment="Right" Margin="0,37,111,38" Style="{StaticResource Rectangle-Sketch}" Width="10" Grid.Row="2" Background="Black"/>

<Path.RenderTransform>

</TransformGroup>

</Path.RenderTransform>

</Path>

<ps:SketchRectangleSL HorizontalAlignment="Right" Margin="0,37,69,38" Style="{StaticResourceRectangle-Sketch}" Width="10" Background="Black"Grid.Row="2"/>

</Grid>

Una vez obtenido el resultado de arriba lo que podemos hacer fácilmente es añadir datos de ejemplo a nuestra Lista de reproducción. Para hacerlo nos vamos a la pestaña Datos y añadimos una nueva colección de ejemplo de datos en el proyecto como se ve en la imagen.

Lo que tenemos que hacer ahora es añadir los datos que queremos tener en la colección. Añadiremos:

- Nombre como un String, y formato Lorem ipsum

- Fecha como un String, y formato Date

- Autor como un String, y formato Name

- Precio como un String, y formato Price

De esta manera se generan colecciones de datos de ese tipo y con ese formato. También podríamos haber creado unas colecciones de imágenes seleccionadas aleatoriamente de una carpeta, números entre unos rangos predefinidos o datos booleanos. En cuanto a las cadenas podemos decir de cuantas palabras las queremos y de que longitud como máximo cada palabra.

Esto es una gran comodidad para crear cantidad de datos de ejemplo rápidamente y ya sólo nos quedaría seleccionar la colección y arrastrarla sobre la lista.

Por último, otras características que trae SketchFlow y que explicaremos brevemente son:

· Component Screen. Nos permite crear componentes que podemos reutilizar dentro de nuestras pantallas. Para crearlos nos vamos al SketchFlow Map y haciendo click derecho le decimos añadir nuevo ComponentScreen. Este será como un control más que podemos añadir, en nuestro caso creamos uno que llamaremos “Author” y lo enlazaremos con la pantalla Welcome. Simplemente pondremos un TextBlock con la propiedad Text=”Desarrolla con MSDN”.

Si vamos a la pantalla de Welcome veremos el control y lo situaremos en la parte inferior derecha.

· Visual Tag. Si seleccionamos un elemento en el SketchFlow Map podemo cambiarle el color con el que es representado, esto sirve para catalogar nuestras pantallas según su funcionalidad o lo que se nos ocurra. Nosotros pondremos la pantalla Player en naranja.

· SketchFlow Animation. Es una manera de crear animaciones fácilmente desde SketchFlow y poder visualizarlas rápidamente desde el visor de SketchFlow. En nuestro caso lo que haremos será añadir una nueva y seleccionaremos los textos de la ventana “Welcome” y cambiaremos el color de la letra a rojo. Si ejecutamos y seleccionamos la animación podemos ver el resultado.

Con esto terminaríamos el tutorial sobre SketchFlow como podeis ver las posibilidades son infinitas tanto para diseñadores como para desarrolladores. Sobre todo para que los diseñadores puedan acordar con los desarrolladores las pantallas y transiciones ahorrando gran cantidad de tiempo en el proyecto.

Código fuente del tutorial

Descargar código fuente y tutorial

SketchFlow en Microsoft Expression Blend 3

Recursos adicionales