Crear un flujo de aplicación

El panel Mapa SketchFlow es un editor gráfico en el que puede definir la estructura, el flujo, navegación y composición de una aplicación.

Use el panel Mapa SketchFlow para centrarse en la estructura de la aplicación y, la mesa de trabajo, para centrarse en el contenido de pantallas individuales.

Pantallas de navegación

Cada pantalla del prototipo se representa con un nodo en el panel Mapa SketchFlow. Puede conectar una pantalla a otra usando una conexión de navegación que implique la navegación entre pantallas. Cuando se ejecuta un prototipo en el Reproductor SketchFlow, las conexiones entre nodos de navegación simulan la navegación entre pantallas en el panel Navegación.

También se muestran las pantallas de componentes en el panel Mapa SketchFlow. Para obtener más información, vea "Pantallas de componentes", más adelante en este tema.

Mapa SketchFlow

La navegación entre pantallas en SketchFlow se puede definir de varias formas. Puede crear nuevas pantallas conectadas a partir de pantallas existentes en el panel Mapa SketchFlow. Puede conectar dos pantallas no conectadas en el panel Mapa SketchFlow. O bien, puede hacer clic con el botón secundario en un objeto de una pantalla y definir la navegación usando el comando Desplazarse a del menú contextual.

Para agregar una nueva pantalla de navegación conectada al mapa SketchFlow

  1. Cuando se crea un nuevo proyecto SketchFlow, se crea un nuevo archivo denominado "Pantalla 1.xaml". Aparece en el panel Mapa SketchFlow como un nodo y en el panel Proyecto como un elemento UserControl .

    [!NOTA]

    Para abrir un nuevo proyecto SketchFlow, vea Crear un proyecto de prototipo.

    Mueva el puntero sobre el primer nodo (Pantalla 1) en la esquina superior izquierda del panel Mapa SketchFlow.

    [!NOTA]

    Si no está visible el panel Mapa SketchFlow, en el menú Ventana, haga clic en Mapa SketchFlow o presione MAYÚS+F12.

    El nodo se resalta y aparece el nombre del archivo XAML asociado en un recuadro de información sobre herramientas. También aparece un menú visual en la parte inferior del nodo:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(es-es,Expression.40).png

  2. Mueva el puntero sobre el icono izquierdo en el menú visual. Comience a arrastrar el icono. Aparece un nuevo nodo "fantasma" que sigue al puntero.

  3. Termine de arrastrar el icono de pantalla de navegación hasta donde desea que esté la nueva pantalla. Ahora puede asignar un nombre a la pantalla escribiendo directamente en el cuadro de texto. Si no se cambia el nombre de la nueva pantalla, el nodo nuevo se denominará "Pantalla x ", donde " x " es el siguiente número en la serie de nombres de pantalla numerados que aparecen en el flujo de la aplicación.

    [!NOTA]

    Para cambiar el nombre, haga clic con el botón secundario en el nodo y elija Cambiar nombre, o bien, haga clic en el nodo, presione MAYÚS+F2 y escriba el nombre nuevo directamente en el nodo.

  4. Para dibujar algo en la nueva pantalla, haga doble clic en el nodo en el panel Mapa SketchFlow para seleccionar la ficha de documento asociada.

La conexión entre nodos implica navegación entre esos nodos. También puede crear nodos de navegación que no tengan definida una conexión de navegación.

Para agregar una nueva pantalla de navegación no conectada al mapa SketchFlow

  1. Haga clic con el botón secundario en el panel Mapa SketchFlow y haga clic en Crear pantalla.

    [!NOTA]

    Si no está visible el panel Mapa SketchFlow, en el menú Ventana, haga clic en Mapa SketchFlow o presione MAYÚS+F12.

    [!NOTA]

    Para cambiar el nombre, haga clic con el botón secundario en el nodo y elija Cambiar nombre, o bien, haga clic en el nodo, presione MAYÚS+F2 y escriba el nombre nuevo directamente en el nodo.

  2. Para dibujar algo en la nueva pantalla, haga doble clic en el nodo en el panel Mapa SketchFlow para seleccionar la ficha de documento asociada.

    tip noteSugerencia:

    Como alternativa, en la barra de herramientas Mapa SketchFlow, haga clic en Crear pantallaEe341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(es-es,Expression.40).png.

Para conectar dos pantallas de navegación no conectadas

  1. En el panel Mapa SketchFlow, mueva el puntero sobre el nodo desde el que desea conectar.

    [!NOTA]

    Si no está visible el panel Mapa SketchFlow, en el menú Ventana, haga clic en Mapa SketchFlow o presione MAYÚS+F12.

    El nodo se resalta y aparece el nombre del archivo XAML asociado en un recuadro de información sobre herramientas. También aparece un menú visual en la parte inferior del nodo:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(es-es,Expression.40).png

  2. Mueva el puntero sobre el icono Conectar una pantalla existenteEe341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(es-es,Expression.40).png en el menú visual, que es el segundo por la izquierda. Comience a arrastrar el icono para crear una nueva conexión de navegación. Aparece una flecha que sigue al puntero.

  3. Termine de arrastrar la flecha hasta la pantalla con la que desea conectar. Para quitar la conexión, haga clic con el botón secundario en la flecha y elija Quitar.

    tip noteSugerencia:

    Como alternativa, haga clic y arrastre el nodo sobre el nodo con el que desea conectar.

Pantallas de componentes

Los nodos componente, al igual que los nodos de navegación, aparecen en el panel Mapa SketchFlow. Una diferencia importante entre los nodos componente y los nodos de navegación es que los primeros, a diferencia de los segundos, no tienen conexiones de navegación entrantes. Sin embargo, los nodos componente pueden tener conexiones de composición entrantes. Las conexiones, las flechas que implican vínculos entre nodos en el flujo de la aplicación, indican las pantallas en las que aparece una pantalla de componentes.

Un nodo componente alberga contenido que se puede reutilizar en varias pantallas. Por ejemplo, puede crear un nodo componente que contenga un fondo y otro nodo componente que contenga un menú, y usar esos componentes en varias pantallas del prototipo.

Un nuevo nodo componente se puede crear de varias formas. Puede agregar un nuevo nodo componente directamente en el panel Mapa SketchFlow o seleccionar contenido en la pantalla y convertirlo en una pantalla que aparezca como un nodo componente en el mapa SketchFlow.

Para agregar una nueva pantalla de componentes no conectada al mapa SketchFlow

  • Haga clic con el botón secundario en cualquier lugar del panel Mapa SketchFlow y haga clic en Crear pantalla de componentes.

Para agregar una nueva pantalla de componentes conectada al mapa SketchFlow

  1. En el panel Mapa SketchFlow, mueva el puntero sobre el nodo desde el que desea agregar una pantalla de componentes conectada.

    [!NOTA]

    Si no está visible el panel Mapa SketchFlow, en el menú Ventana, haga clic en Mapa SketchFlow o presione MAYÚS+F12.

    El nodo se resalta y aparece el nombre del archivo XAML asociado en un recuadro de información sobre herramientas. También aparece un menú visual en la parte inferior del nodo.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(es-es,Expression.40).png

  2. Mueva el puntero sobre el icono Crear e insertar una pantalla de componentesEe341405.91c06759-86fc-4dbf-a8b7-061300304308(es-es,Expression.40).png en el menú visual, que es el segundo por la derecha. Comience a arrastrar el icono para crear una nueva conexión entre componentes. Aparece una flecha que sigue al puntero.

Elementos UserControl

Una pantalla de componentes es un tipo de UserControl . Al crear una pantalla de componentes, aparece en el mapa SketchFlow. También puede crear un UserControl que no sea una pantalla de componentes. Los controles de usuario que no son pantallas de componentes no aparecen en el mapa SketchFlow.

Para convertir un elemento UserControl en una pantalla de componentes

  1. Seleccione el objeto o grupo de objetos que desea convertir en una pantalla de componentes.

    [!NOTA]

    Para seleccionar un grupo de objetos, arrastre un contorno de selección alrededor del grupo de objetos que desea incluir.

  2. Haga clic con el botón secundario en la selección y elija Convertir en pantalla de componentes.

  3. En el cuadro de diálogo Convertir en pantalla de componentes, en el cuadro Nombre, escriba un nombre para el elemento UserControl .

  4. Haga clic en Aceptar.

    [!NOTA]

    Puede ser necesario volver a generar el proyecto (F5) para que aparezca la pantalla de componentes en la pantalla de navegación.

Para crear un nuevo UserControl a partir de un objeto existente

  1. Seleccione el objeto o grupo de objetos que desea convertir en un UserControl .

    [!NOTA]

    Para seleccionar un grupo de objetos, arrastre un contorno de selección alrededor de éste. También puede seleccionar objetos directamente en el panel Recursos.

  2. Haga clic con el botón secundario en la selección y, a continuación, haga clic en Crear en UserControl.

  3. En el cuadro de diálogo Crear en UserControl, en el cuadro Nombre, escriba un nombre para el UserControl.

    Para obtener más información, vea Crear un control de usuario vacío.

Etiquetado visual

El etiquetado visual contribuye a diferenciar entre tipos de pantallas y tipos de conexiones, ya que aplica diferentes colores a diferentes tipos de pantallas y de conexiones en el mapa SketchFlow.

Para agregar etiquetado visual a un nodo

  1. Mueva el puntero sobre el nodo que desea etiquetar en el panel Mapa SketchFlow.

    [!NOTA]

    Si no está visible el panel Mapa SketchFlow, en el menú Ventana, haga clic en Mapa SketchFlow o presione MAYÚS+F12.

  2. El nodo se resalta y aparece el nombre del archivo XAML asociado en un recuadro de información sobre herramientas. También aparece un menú visual en la parte inferior del nodo:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(es-es,Expression.40).png

  3. Mueva el puntero sobre Cambiar etiqueta visual (el icono de la derecha). Haga clic en el icono y elija el color que desea usar para el nodo.

Para agregar etiquetado visual a una conexión

  1. Haga clic con el botón secundario en la conexión que desea etiquetar en el panel Mapa SketchFlow.

    [!NOTA]

    Si no está visible el panel Mapa SketchFlow, en el menú Ventana, haga clic en Mapa SketchFlow o presione MAYÚS+F12.

    La conexión se resalta.

  2. Haga clic en Etiqueta visual y elija el color que desea usar para la conexión.

También puede cambiar el etiquetado visual de un proyecto entero modificando la configuración del proyecto SketchFlow.

Para obtener más información, vea Modificar la configuración del proyecto SketchFlow.

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.

  • Last updated on