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.

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 flujo de la aplicación

  1. Cuando se crea un nuevo proyecto SketchFlow, se crea un nuevo archivo denominado Screen 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.30).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. Aparece el nuevo nodo y se denomina "Pantalla 2" de forma predeterminada.

    [!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 flujo de la aplicación

  1. Haga clic con el botón secundario en el panel Mapa SketchFlow y elija Agregar pantalla de navegación.

    [!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.

    Ee341405.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Como alternativa, en la barra de herramientas Mapa SketchFlow, haga clic en Crear pantallaEe341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(ES-ES,Expression.30).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.30).png

  2. Mueva el puntero sobre el icono Conectar una pantalla existenteEe341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(ES-ES,Expression.30).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 del mouse.

  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.

    Ee341405.alert_tip(ES-ES,Expression.30).gifSugerencia:

    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 entrantes. Los nodos componente tienen solo conexiones salientes. 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 y agregarla al flujo de la aplicación

  • Haga clic con el botón secundario en el panel Mapa SketchFlow y elija Agregar pantalla de componentes.

Para agregar una nueva pantalla de componentes conectada y agregarla al flujo de la aplicación

  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.30).png

  2. Mueva el puntero sobre el icono Crear e insertar una pantalla de componentesEe341405.91c06759-86fc-4dbf-a8b7-061300304308(ES-ES,Expression.30).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 del mouse.

  3. Arrastre la flecha hasta la pantalla con la que desea conectar y suelte el mouse.

Para convertir un elemento UserControl en una pantalla de componentes

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

    [!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. Opcional: para agregar la pantalla de componentes al flujo de la aplicación, seleccione Agregar a mapa SketchFlow.

  5. 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.

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.30).png

  3. Mueva el puntero sobre 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. Mueva el puntero sobre 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.

  • Last updated on