AJDev.net

Ya luego de la primera entrega donde se explicaba un poco la teoría que encierra el SketchFlow pues le daremos inicio a la parte practica de este tutorial.

Como les comente anteriormente el SketchFlow viene dentro del Expression Blend 3 por si no tienes una suscripción MSDN puedes descargarlo de este sitio: http://cut.ms/JTL

1. Simularemos una solicitud de un cliente en donde requiere que se muestre una lista de productos con fotos y su respectiva descripción, además de ver una ventana de inicio, una de login, una que mencione a la empresa. Con esto podemos comenzar :)

2. Ya luego de tener Expression Blend 3 instalado vamos a crear nuestra primera demostración y para ello seleccionaremos la plantilla “Aplicación SketchFlow de SilverLight 3” al Cual llamaremos “Prototipo” y trabajaremos con el lenguaje C# como se muestra en la imagen:

3. Este abrirá una Solución con dos proyectos, además de que adaptara nuestro espacio de trabajo a la creación de prototipos como se muestra a continuación:

4. Comenzaremos a diseñar nuestra ventana de Inicio por tanto la pantalla que nos muestra de inicio Expression Blend lo renombraremos y la llamaremos “Inicio” así que en el Mapa SketchFlow que se encuentra en la parte inferior de nuestro entorno de trabajo seleccionaremos el recuadro azul y le daremos botón derecho-> Cambiar Nombre:

Nota: El panel Mapa SketchFlow es una representación visual del flujo de la aplicación, empezando por la primera pantalla y siguiendo por la interacción del usuario hasta la acción final. Tomado de la Ayuda de Expression Blend 3.

5. Debemos agregar nuevas pantallas a nuestro Proyecto de Prototipo, si se percataron cuando pasaban en puntero del mouse por encima de nuestro componente en el Mapa SketchFlow se despliega unas opciones que definiré a continuación:

	Crear pantalla (Con este crearemos el resto de las pantallas)
	Conectar una pantalla existente
	Crear e insertar una pantalla de componentes
	Cambiar Etiqueta Visual

6. Ahora necesitamos ubicar los controles que mantendrá el estilo de dibujo con lápiz, es decir, como si estuviéramos dibujando los controles con un lápiz en el papel. Estos se encuentra en la pestaña Activo –> SketchFlow-> Estilos->SketchFlowStyles.

7. Pantallas a crear con sus respectivos controles:

Así quedaran nuestras 2 primeras pantallas:

7. Ahora para nuestra ventana de productos bien sabemos que no tenemos la data del cliente para simular sus productos por tanto en muchas ocasiones nosotros nos creamos una base de datos prueba, a ver quien no ha agregado valores como estos:

Producto: djkfgjfhjsdgfhuew (hasta donde alcance las teclas pisadas :))

Descripción: jkdhfajhgfygfd (hasta donde alcance las teclas pisadas :))

Imagen: La misma ruta de imagen de siempre

Si bien es rápido hacerlo para ganar tiempo no precisamente queda estético jejej no creen. Así que Expression Blend nos brinda el poder de agregar una base de datos de prueba basada en un archivo xml donde podemos ganarle a la productividad y mostrar un prototipo mas decente y mas acorde a lo que desea nuestro cliente.

Para ello nos ubicamos en la pestaña Datos y definiremos una base de datos de Prueba:

Crearemos tres Item:

Productos una cadena de tipo Nombre (Esto colocara solo nombres)

Descripción será una cadena de tipo Lorem Ipsum (Esto es un texto aleatorio larga)

Imagen será de tipo Imagen y en el boton examinar le pueden dar una ruta física de carpeta donde contenga imágenes algo así como la carpeta Mis Imágenes de lo contrario lo pueden dejar vacio y Expression Blend le agregara las imágenes por usted.

Ahora ubicándonos en nuestra pantalla Productos y teniendo la pestaña de Datos activa arrastraremos la Colección de Datos al ListBox:

8. Crear la navegación, en nuestra pantalla de inicio colocamos un control de tipo HyperLinkButton-Sketch al cual luego de darle clic debe redireccionarnos a la pantalla de login para ello nos ubicaremos encima de el y le daremos botón derecho del mouse-> Desplazarse a->Login:

Al igual que el inicio en la venta login le indicaremos al Button-Sketch que se re direccione a la ventana Productos.

9. Guardamos lo que hemos creado y nos dirigimos al Menú Archivo->Exportar a Word. y alli veremos la documentación del prototipo que hemos creado.

10. Compilamos nuestro prototipo dándole F5 y veremos nuestro prototipo en la web.

11. Para empaquetar este prototipo y subirlo a un servidor es dirigirnos al Menú Archivo->Empaquetar Proyecto SketchFlow y así podemos enviarle un link al cliente para que empiece a jugar y haga sus comentarios.

12. Para ver como se crean comentarios en el Reproductor de SketchFlow los invito a ver la ayuda de Expression Blend allí explican mas al detalle, pero igual les dejare lo que aparece en la ayuda por si descargan la versión en Ingles:

Para agregar comentarios de texto en el Reproductor SketchFlow

• En el panel Reproductor SketchFlow, haga clic en la ficha Comentarios. Haga clic dentro del cuadro de texto y empiece a escribir.

Para agregar comentarios en el Reproductor SketchFlow

• En el panel Reproductor SketchFlow, haga clic en la ficha Comentarios y realice una de las acciones siguientes:

  • Haga clic en Habilitar comentarios acerca de la tinta . Haga clic en el color y en el tamaño de pincel que desee usar. Ahora puede usar el mouse para dibujar o escribir directamente en la mesa de trabajo.

  • Haga clic en Habilitar comentarios acerca del marcador de resaltado . Haga clic en el color y en el tamaño de pincel que desee usar. Ahora puede usar el mouse para dejar comentarios resaltados directamente en la mesa de trabajo.

   Nota:

  La entrada de lápiz debe estar visible para que los comentarios sean visibles. Si no puede ver los comentarios en el Reproductor SketchFlow, haga clic en Mostrar u ocultar comentarios acerca de la tinta .

Para borrar comentarios en el Reproductor SketchFlow

1. En el panel Reproductor SketchFlow, haga clic en la ficha Comentarios.

2. Haga clic en Borrar comentarios acerca de la tinta y, a continuación, en los comentarios que desea borrar.

Para mostrar u ocultar comentarios en el Reproductor SketchFlow

• En el panel Reproductor SketchFlow, haga clic en la ficha Comentarios y, a continuación, en Mostrar u ocultar comentarios acerca de la tinta .

Para mostrar u ocultar anotaciones en el Reproductor SketchFlow

• En el panel Reproductor SketchFlow, haga clic en la ficha Comentarios y, a continuación, en Mostrar u ocultar anotaciones .

   Nota:

  Si no hay ninguna anotación en el prototipo, la opción Mostrar u ocultar anotaciones estará deshabilitada.

Para exportar comentarios desde el Reproductor SketchFlow

1. En el panel Reproductor SketchFlow, haga clic en la ficha Mostrar opciones de comentarios y, a continuación, en Exportar comentarios.

2. En el cuadro de diálogo Información del autor de los comentarios, agregue el nombre y las iniciales del autor y, a continuación, haga clic en Aceptar.

3. En el cuadro de diálogo Exportar comentarios, busque la ubicación donde desea guardar el archivo y, a continuación, haga clic en Guardar.

Los comentarios están ahora listos para compartirse con el diseñador, quien puede ver los comentarios directamente en el prototipo si abre el archivo .feedback en Expression Blend.

Para ver comentarios del Reproductor SketchFlow en Expression Blend

1. Con el proyecto de SketchFlow abierto, en el menú Ventana, haga clic en Comentarios.

2. En el panel Comentarios, haga clic en Agregar .

3. En el cuadro de diálogo Agregar elemento existente, busque el archivo .feedback y, a continuación, haga clic en Abrir.

El archivo de comentarios aparece ahora en la lista desplegable del panel Comentarios. Los comentarios de texto aparecen directamente en el panel. Puede agregar varios archivos de comentarios y cambiar de uno a otro en la lista desplegable del panel Comentarios. También puede mostrar u ocultar comentarios de entrada de lápiz si hace clic en Mostrar u ocultar comentarios acerca de la tinta. Los comentarios de entrada de lápiz disponibles aparecen directamente en la mesa de trabajo.

Pueden consultar la demo en esta dirección http://cut.ms/JTN .

Mas información sobre SketchFlow Aquí y una interesante pagina dedicada al SketchFlow http://cut.ms/JTP

Archivos Fuentes: http://cut.ms/JTS

Espero que les allá agradado este tutorial que la única intención es conocer esta poderosa herramienta que se que les ahorrara tiempo y aunque no esta a todo nivel pues es un excelente comienzo no creen, mas adelante lanzare otros tutoriales con respecto a la generación de prototipos y como sacarle aun mas el jugo...