Partager via

créer d'un flux d'application

  • Article

Le panneau Carte SketchFlow est un éditeur de graphes qui vous permet de définir la structure, le flux, la navigation et la composition d'une application.

Vous pouvez utiliser le panneau Carte SketchFlow pour vous concentrer sur la structure d'une application et la planche graphique pour travailler sur le contenu des écrans individuels.

Écrans de navigation

Chaque écran d'un prototype est représenté par un nœud dans le panneau Carte SketchFlow. Vous pouvez connecter un écran à un autre à l'aide d'une connexion de navigation afin d'induire la navigation entre les écrans. Lors de l'exécution du prototype dans le lecteur SketchFlow, les connexions entre les nœuds de navigation simulent la navigation entre les écrans dans le panneau Navigation.

Les écrans de composants sont également affichés dans le panneau Carte SketchFlow. Pour plus d’informations, voir « Écrans de composants », plus loin dans cette rubrique.

Il existe plusieurs façons de définir la navigation entre les écrans dans SketchFlow. Vous pouvez créer de nouveaux écrans connectés à partir d'écrans existants dans le panneau Carte SketchFlow. Vous pouvez également connecter deux écrans non connectés dans le panneau Carte SketchFlow. Enfin, vous pouvez cliquer avec le bouton droit sur un objet affiché sur un écran et définir la navigation à l'aide de la commande Naviguer vers du menu contextuel.

Pour ajouter un nouvel écran de navigation connecté au flux d'application

  1. Lorsque vous créez un nouveau projet SketchFlow, un nouveau fichier nommé Screen 1.xaml est créé. Ce fichier apparaît dans le panneau Carte SketchFlow en tant que nœud et dans le panneau Projet en tant que contrôle utilisateur.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Pour ouvrir un nouveau projet SketchFlow, voir Créer un projet prototype.

    Déplacez le pointeur sur le premier nœud (Screen 1) dans le coin supérieur gauche du panneau Carte SketchFlow.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Si le panneau Carte SketchFlow n'est pas visible, cliquez sur Carte SketchFlow dans le menu Fenêtre, ou appuyez sur Maj+F12.

    Le nœud est mis en surbrillance et le nom du fichier XAML associé s'affiche dans une info-bulle. Un menu visuel apparaît également en bas du nœud :

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

  2. Déplacez le pointeur sur l'icône de gauche du menu visuel. Commencez à faire glisser l'icône. Un nouveau nœud « fantôme » apparaît à la suite du pointeur.

  3. Finissez de faire glisser l'icône de navigation vers l'emplacement souhaité pour le nouvel écran. Le nouveau nœud apparaît. Par défaut, il est nommé « Screen 2 ».

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Vous pouvez modifier le nom du nœud en cliquant sur ce dernier avec le bouton droit, puis en cliquant sur Renommer, ou en cliquant sur le nœud, puis en tapant le nouveau nom directement dans celui-ci.

  4. Pour dessiner sur le nouvel écran, double-cliquez sur le nœud dans le panneau Carte SketchFlow afin de sélectionner l'onglet du document associé.

La connexion entre des nœuds implique une navigation entre ces nœuds, mais vous pouvez également créer des nœuds de navigation dépourvus de connexion de navigation.

Pour ajouter un nouvel écran de navigation non connecté au flux d'application

  1. Cliquez avec le bouton droit dans le panneau Carte SketchFlow, puis cliquez sur Ajouter un écran de navigation.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Si le panneau Carte SketchFlow n'est pas visible, cliquez sur Carte SketchFlow dans le menu Fenêtre, ou appuyez sur Maj+F12.
    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Vous pouvez modifier le nom du nœud en cliquant sur ce dernier avec le bouton droit, puis en cliquant sur Renommer, ou en cliquant sur le nœud, puis en tapant le nouveau nom directement dans celui-ci.

  2. Pour dessiner sur le nouvel écran, double-cliquez sur le nœud dans le panneau Carte SketchFlow afin de sélectionner l'onglet du document associé.

    Ee341405.alert_tip(FR-FR,Expression.30).gifConseil :

    Vous pouvez aussi cliquer sur Créer un écranEe341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(FR-FR,Expression.30).png dans la barre d'outils Carte SketchFlow.

Pour connecter deux écrans de navigation non connectés

  1. Dans le panneau Carte SketchFlow, déplacez le pointeur sur le nœud à partir duquel vous souhaitez effectuer la connexion.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Si le panneau Carte SketchFlow n'est pas visible, cliquez sur Carte SketchFlow dans le menu Fenêtre, ou appuyez sur Maj+F12.

    Le nœud est mis en surbrillance et le nom du fichier XAML associé s'affiche dans une info-bulle. Un menu visuel apparaît également en bas du nœud.

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

  2. Déplacez le pointeur sur l'icône Connecter un écran existantEe341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(FR-FR,Expression.30).png dans le second menu visuel à partir de la gauche. Commencez à faire glisser l'icône pour créer une nouvelle connexion de navigation. Une flèche apparaît à la suite du pointeur.

  3. Faites glisser la flèche vers l'écran auquel vous souhaitez effectuer la connexion. Pour supprimer la connexion, cliquez avec le bouton droit sur la flèche et cliquez sur Supprimer.

    Ee341405.alert_tip(FR-FR,Expression.30).gifConseil :

    Vous pouvez aussi cliquer sur le nœud et le faire glisser sur le nœud avec lequel vous souhaitez effectuer la connexion.

Écrans de composants

Tout comme les nœuds de navigation, les nœuds de composant sont affichés dans le panneau Carte SketchFlow. À la différence des nœuds de navigation, toutefois, les nœuds de composant sont dépourvus de connexions entrantes. Ils sont dotés uniquement de connexions sortantes. Les connexions, à savoir les flèches représentant des liens entre les nœuds dans le flux d'application, désignent les écrans dans lesquels apparaît un écran de composants.

Le contenu d'un nœud de composant peut être réutilisé sur plusieurs écrans. Ainsi, vous pouvez créer un nœud de composant contenant un arrière-plan et un autre contenant un menu, par exemple, puis utiliser ces composants sur plusieurs écrans du prototype.

Il existe différentes méthodes pour créer un nœud de composant. La première consiste à ajouter un nouveau nœud de composant directement dans le panneau Carte SketchFlow. La deuxième consiste à sélectionner du contenu sur l'écran et à l'intégrer dans un écran qui apparaîtra en tant que nœud de composant dans la carte SketchFlow.

Pour ajouter un nouvel écran de composants non connecté et l'ajouter au flux d'application

  • Cliquez avec le bouton droit n'importe où dans le panneau Carte SketchFlow, puis cliquez sur Ajouter un écran de composants.

Pour ajouter un nouvel écran de composants connecté et l'ajouter au flux d'application

  1. Dans le panneau Carte SketchFlow, déplacez le pointeur sur le nœud à partir duquel vous souhaitez ajouter un écran de composants connecté.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Si le panneau Carte SketchFlow n'est pas visible, cliquez sur Carte SketchFlow dans le menu Fenêtre, ou appuyez sur Maj+F12.

    Le nœud est mis en surbrillance et le nom du fichier XAML associé s'affiche dans une info-bulle. Un menu visuel apparaît également en bas du nœud.

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

  2. Déplacez le pointeur sur l'icône Créer et insérer un écran de composantsEe341405.91c06759-86fc-4dbf-a8b7-061300304308(FR-FR,Expression.30).png dans le second menu visuel à partir de la gauche. Commencez à faire glisser l'icône pour créer une nouvelle connexion de composants. Une flèche apparaît à la suite du pointeur.

  3. Faites glisser la flèche vers l'écran auquel vous souhaitez effectuer la connexion et relâchez le bouton de la souris.

Pour intégrer un contrôle utilisateur dans un écran de composants

  1. Sélectionnez l'objet ou le groupe d'objets que vous souhaitez convertir en contrôle utilisateur.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Pour sélectionner un groupe d'objets, faites glisser un contour englobant autour du groupe d'objets à inclure.

  2. Cliquez avec le bouton droit sur la sélection, puis cliquez sur Intégrer dans l'écran de composants.

  3. Dans la zone Nom de la boîte de dialogue Intégrer dans l'écran de composants, tapez le nom du contrôle utilisateur.

  4. Facultatif : pour ajouter l'écran de composants au flux d'application, sélectionnez Ajouter à la carte SketchFlow.

  5. Cliquez sur OK.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Pour que l'écran de composants apparaisse dans l'écran de navigation, il peut s'avérer nécessaire de régénérer le projet (F5).

Étiquetage visuel

L'étiquetage visuel peut vous aider à distinguer les différents types d'écrans et de connexions en leur appliquant différentes couleurs dans la carte SketchFlow.

Pour ajouter une étiquette visuelle à un nœud

  1. Déplacez le curseur sur le nœud que vous souhaitez étiqueter dans le panneau Carte SketchFlow.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Si le panneau Carte SketchFlow n'est pas visible, cliquez sur Carte SketchFlow dans le menu Fenêtre, ou appuyez sur Maj+F12.

  2. Le nœud est mis en surbrillance et le nom du fichier XAML associé s'affiche dans une info-bulle. Un menu visuel apparaît également en bas du nœud.

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

  3. Déplacez le pointeur sur l'icône située à droite. Cliquez sur l'icône, puis sur la couleur que vous souhaitez appliquer au nœud.

Pour ajouter une étiquette visuelle à une connexion

  1. Déplacez le curseur sur la connexion que vous souhaitez étiqueter dans le panneau Carte SketchFlow.

    Ee341405.alert_note(FR-FR,Expression.30).gifRemarque :

    Si le panneau Carte SketchFlow n'est pas visible, cliquez sur Carte SketchFlow dans le menu Fenêtre, ou appuyez sur Maj+F12.

    La connexion est mise en surbrillance.

  2. Cliquez sur Étiquette visuelle, puis sur la couleur que vous souhaitez appliquer à la connexion.

Il est également possible de modifier l'étiquetage visuel d'un projet entier en modifiant les paramètres du projet SketchFlow.

Pour plus d’informations, voir Modifier les paramètres de projet SketchFlow.