Créer un flux d’application

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é à la carte SketchFlow

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

   Remarque :
   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.

   Remarque :
   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 :

   

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. Vous pouvez maintenant nommer l'écran en tapant directement dans la zone de texte. Si le nouvel écran n'est pas renommé, le nom du nouveau nœud est « Écran x  », où «  x  » correspond au nombre suivant de la série de noms d'écrans numérotés qui apparaît dans le flux d'application.

   Remarque :
   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 ceux-ci, mais il est également possible de créer des nœuds de navigation sans aucune connexion de navigation définie.

Pour ajouter un nouvel écran de navigation non connecté à la carte SketchFlow

1. Cliquez avec le bouton droit dans le panneau Carte SketchFlow, puis cliquez sur Créer un écran.

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

   Remarque :
   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é.

   Conseil :
   Vous pouvez aussi cliquer sur Créer un écran 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.

   Remarque :
   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 :

   

2. Déplacez le pointeur sur l'icône Connecter un écran existant 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.

   Conseil :
   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 de navigation entrantes. Toutefois, les noeuds de composant peuvent avoir des connexions de composition entrantes. 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é à la carte SketchFlow

• Cliquez avec le bouton droit dans le panneau Carte SketchFlow, puis cliquez sur Créer un écran de composants.

Pour ajouter un nouvel écran de composants connecté à la carte SketchFlow

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

   Remarque :
   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.

   

2. Déplacez le pointeur sur l'icône Créer et insérer un écran de composants 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.

Contrôles utilisateur

Un écran de composants est un type de UserControl . Lorsque vous créez un écran de composants, il apparaît dans la carte SketchFlow. Vous pouvez également créer un UserControl qui n'est pas un écran de composants. Les contrôles utilisateur qui ne sont pas des écrans de composants n'apparaissent pas dans la carte SketchFlow.

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

1. Sélectionnez l'objet ou le groupe d'objets à convertir en écran de composants.

   Remarque :
   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 Créer un écran de composants.

3. Dans la boîte de dialogue Créer un écran de composants, dans la zone Nom, tapez le nom du UserControl .

4. Cliquez sur OK.

   Remarque :
   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).

Pour créer un nouveau contrôle utilisateur à partir d'un objet existant

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

   Remarque :
   Pour sélectionner un groupe d'objets, faites glisser autour de lui un contour englobant. Vous pouvez aussi sélectionner directement des objets dans le panneau Ressources.

2. Cliquez avec le bouton droit sur la sélection, puis cliquez sur Créer un UserControl.

3. Dans la boîte de dialogue Créer un écran de composants, dans la zone Nom, tapez le nom du UserControl.

   Pour plus d’informations, voir Créer un contrôle utilisateur vide.

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

   Remarque :
   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 :

   

3. Déplacez le pointeur sur Changer d'étiquette visuelle (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. Cliquez avec le bouton droit sur la connexion que vous souhaitez étiqueter dans le panneau Carte SketchFlow.

   Remarque :
   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.

Copyright © 2011 Microsoft Corporation. Tous droits réservés.