Nous allons effectuer maintenant une mise en pratique avec la création d'un prototype d'une application de vente d'albums de music. Le prototype sera relativement simple mais permettra d'aborder la plupart des fonctionnalités présentées précédemment.

Le prototype sera composé de sept écrans :

• Un écran « accueil » présentant l'application au visiteur
• Un écran « connexion »
• Un écran « mon profil » permettant à l'utilisateur de modifier ses informations personnelles
• Un écran « musique » offrant la fonctionnalité de recherche et l'affichage des nouveautés du mois
• Un écran « artiste » affichant les informations concernant un artiste
• Un écran « album » affichant les informations concernant un album
• Un écran « achat » permettant le paiement

Dans la fenêtre de nouveau projet, choisissez un projet de type Silverlight Sketchflow Application et donnez-lui le nom « MusicStorePrototype ».

Les paramètres du projet SketchFlow sont éditables via le menu Project --> SketchFlow Project Settings. Vous pouvez y modifier le nom du projet apparaissant dans le lecteur SketchFlow, cacher certains panneaux du lecteur et modifier le nom associé à un tag visuel.

L'espace de travail par défaut (design) est composé de différentes zones décrites ci-dessous :

1. Panneau SketchFlow Map, dédié à la carte de navigation du prototype.
2. Surface de design
3. Panneaux des propriétés, des ressources et des données
4. Panneau des animations SketchFlow
5. Panneaux des composants, de l'arborescence du projet et d'édition des états
6. Panneau permettant de visualiser la structure hiérarchique des éléments présents sur la surface de design
7. Panneau des outils

Sur la carte de navigation, un premier rectangle bleu représentant un écran du prototype est déjà présent. Renommez-le « Accueil » en double cliquant dessus.

Placez le curseur de la souris dans le coin bas gauche du rectangle afin de faire apparaitre un menu. Cliquez sur l'icône la plus à gauche du menu et commencez un drag and drop.

Un nouveau rectangle apparaît au niveau du pointeur. Relâchez le curseur afin de finir le drag and drop. Un nouvel écran a été créé, renommez-le « Musique ». Une flèche partant de l'écran « Accueil » et allant vers l'écran « Musique » indique qu'une navigation est définie depuis l'écran « Accueil » vers l'écran « Musique ».

Pour pouvoir naviguer depuis l'écran « Musique » vers l'écran « Accueil » il faut créer un nouveau lien de navigation dans l'autre sens. Placez la souris au-dessus du rectangle « Musique » afin de faire apparaitre le menu et commencez un drag and drop avec la deuxième icône (en partant de la gauche).

Une flèche apparait au niveau du curseur. Relâchez le curseur au-dessus de l'écran « Accueil » afin de créer le lien.

Via un clic droit, vous avez la possibilité de changer la couleur des rectangles et des flèches afin de mieux les différencier et de les regrouper de façon logique.

Continuez à créer des écrans de la même manière afin d'obtenir la carte finale suivante :

Lancez l'exécution du prototype via la touche F5 ou le menu Project --> Run Project afin de le visualiser au sein du lecteur SketchFlow.

Le lecteur est composé de deux parties. Celle de droite sert à afficher les écrans du prototype et celle de gauche contient différents panneaux permettant d'interagir avec le prototype.

Le bouton MAP permet de visualiser la carte de navigation. Un double clic sur un rectangle affichera l'écran correspondant dans le lecteur.

L'onglet NAVIGATE affiche la liste des écrans vers lesquels il est possible de naviguer depuis l'écran courant. Cette liste est construite à partir des liens de navigation définis dans la carte de navigation.

Par exemple, une fois sur l'écran « Musique », le lecteur ne nous propose de naviguer que vers les écrans « Accueil », « Info album », « Info artiste » et « Mon compte ».

L'onglet FEEDBACK permet à l'utilisateur de commenter le prototype. Vous avez à votre disposition un stylo, un marqueur (et une gomme pour effacer) et différentes couleurs pour dessiner par-dessus le prototype. De plus, une zone de saisie permet d'écrire des commentaires. L'utilisateur a la possibilité d'exporter ses commentaires et dessins dans un fichier externe.

Revenons au sein d'Expression Blend afin d'ajouter du contenu à l'écran « Accueil ». Affichez l'onglet Assets et faites un drag and drop des composants graphiques nécessaires afin d'obtenir le résultat suivant :

Les indications en rouges contiennent les noms des contrôles utilisés.

Les trois boutons du haut composent un menu de navigation que l'on retrouvera sur la plupart des écrans du prototype. Un lien permettra de naviguer vers l'écran d'authentification.

Effectuez un clic droit sur le lien « S'authentifier » et sélectionnez le menu NavigateTo puis l'écran « Connexion ».

Ce menu permet de rapidement mettre en place et configurer le behavior NavigateToScreenAction. Notez que ce menu propose une première liste comportant les écrans vers lesquels il a été défini un lien de navigation (Connexion, Mon compte, Musique) depuis l'écran courant et une deuxième liste comportant les écrans restants.

Si l'on regarde la composition de l'écran dans l'onglet Objects and Timeline on s'aperçoit qu'Expression Blend a rajouté ce behavior :

Ce dernier a aussi été configuré afin qu'il se déclenche suite au clic (évènement par défaut) sur le lien et qu'il navigue vers l'écran « Connexion » :

Ouvrez maintenant l'écran « Connexion ». Celui-ci sera constitué d'un logo et d'une zone permettant la saisie des identifiants de l'utilisateur.

Dans les sources de la solution vous trouverez le fichier musicstore.design. Il s'agit d'un document créé avec Expression Design et contenant le logo du prototype.

Expression Design est capable de faire de l'export au format XAML. Le XAML généré peut être contrôlé via les options. Dans notre cas il s'agit de s'assurer que le code généré sera compatible Silverlight (et ne contienne pas d'éléments propres à WPF par exemple). Pour cela, dans les options d'Expression Design, vérifiez que le format du presse-papier est positionné sur Silverlight (la version 4 d'Expression Design peut générer du XAML pour Silverlight 3 ou 4).

Sélectionnez le dessin en entier puis utilisez le menu Edit --> Copy XAML afin de récupérer dans le presse-papier la version XAML correspondante.

Retournez dans Expression Blend et cliquez sur la surface de design de l'écran « Connexion ». Utilisez la commande « coller » afin d'y insérer le logo créé dans Expression Design.

Nous allons maintenant utiliser la fonctionnalité Data Store afin de créer une variable d'application qui stockera le login que l'utilisateur aura saisi sur l'écran de connexion. Cela permettra de retrouver et d'afficher son login sur les autres écrans du prototype.

Dans le panneau Data, commencez par créer un nouveau Data Store.

Puis une propriété appelée « Username » :

Nous allons maintenant lier la propriété Text du contrôle TextBox à la propriété Username du Data Store. Il suffit pour cela d'effectuer un drag and drop depuis le panneau Data vers le contrôle « Textbox » :

Expression Blend affiche une bulle indiquant l'opération qu'il s'apprête à effectuer.

Ainsi, la valeur saisie dans le contrôle Textbox sera affectée à la propriété Username du Data Store et nous pourrons garder en mémoire le login entré par l'utilisateur.

Revenons quelques instants sur l'écran « Accueil ». Celui-ci contient trois boutons constituant le menu de l'application qui va se retrouver sur différents écrans. Plutôt que de faire des copier/coller de ces boutons sur les écrans nous allons créer un composant réutilisable facilitant la maintenance et l'utilisation du menu (l'équivalent d'un « UserControl »).

Sélectionnez les composants du menu puis faites un clic droit et sélectionnez Make Into Component Screen :

Donnez un nom au nouveau contrôle créé :

Les boutons sont maintenant regroupés au sein d'un composant séparé.

Refaites les mêmes manipulations que pour le bouton « S'identifer » afin que l'on puisse naviguer vers l'écran correspondant en cliquant sur un bouton du menu.

L'organisation de la carte de navigation a également changé. Un nouveau rectangle vert à bords arrondis a été ajouté. Une flèche en pointillés indique le ou les écrans sur lesquels est utilisé le composant.

Si vous revenez sur l'écran « Accueil » vous noterez que le menu est entouré par une bordure rayée jaune avec un point d'exclamation au-dessus.

Expression Blend indique qu'il est nécessaire de recompiler le projet afin que les changements effectués puissent être reflétés de façon optimale sur la surface de design. Pour cela utilisez le menu Projet --> Build project ou le raccourci clavier Ctrl+ Shift + B.

Il reste maintenant à ajouter le nouveau composant sur les écrans du prototype. Affichez le panneau de la carte de navigation et sélectionnez le composant « Menu ». Tout en maintenant le bouton gauche de la souris enfoncé, faites glisser le composant en direction de l'écran « Mon compte ».

Une fois au-dessus de l'écran, une flèche blanche reliant le composant et l'écran apparait. Vous pouvez alors relâcher la souris.

Recommencez l'opération avec l'écran « Musique ». La carte de navigation devrait maintenant ressembler à ceci :

L'écran « Mon compte » permet à l'utilisateur de modifier ses informations personnelles. Il s'agira d'un formulaire assez simple constitué de quelques zones de saisie, d'une image pour l'avatar et de boutons :

Nous allons créer une nouvelle source de données en utilisant la fonctionnalité Sample Data d'Expression Blend afin d'alimenter le formulaire avec des données d'exemple.

Dans le panneau Data créez un nouveau Sample Data.

Appelez-le « UserDataSource ».

Une nouvelle collection de données est créée. Pour cet écran nous n'utiliserons qu'un seul élément de la collection (nous n'affichons les données que d'un seul utilisateur à la fois).

Reste à définir les propriétés de chaque objet de la source de données. Nous en créerons six (correspondant aux six champs du formulaire) : Address, Avatar, BirthDate, Email, Name et PhoneNumber.

Pour chaque propriété vous pouvez indiquer un type ainsi qu'un format prédéfini. Cela permet à Expression Blend de générer des données correspondant au type et format choisi.

Une fois terminée, la source de données UserDataSource devrait ressembler à ceci :

Vous avez la possibilité de modifier les données générées par Expression Blend. Par exemple, si vous créez une propriété de type image, Expression Blend utilisera des images provenant d'une bibliothèque interne représentant des chaises, ce qui n'est pas l'idéal pour représenter un avatar d'une personne. Vous pouvez alors indiquer un dossier contenant des images qu'Expression Blend va utiliser à la place.

Il nous faut maintenant lier les contrôles de l'écran aux données générées. Dans le panneau Data sélectionnez le noeud « Collection » de UserDataSource et faîtes-le glisser sur la surface de design tout en maintenant la touche Majuscule.

Une bulle d'aide bleue vous indique l'action qui se réalisera lorsque vous aurez relâché la souris. Il s'agit ici de choisir la propriété de la grille racine de l'écran à lier à la source de données.

Relâchez la souris afin de faire apparaitre la fenêtre proposant la liste des propriétés qu'il est possible de lier.

Choisissez la propriété DataContext et validez. Le contexte de données de l'écran est maintenant lié à la source de données (un cadre jaune entoure la collection dans le panneau Data). Reste à lier les différents contrôles.

Dans le panneau Data, sélectionnez la propriété Name et faites la glisser sur la zone de saisie correspondante sur l'écran tout en maintenant la touche Alt appuyée.

Cela va lier la propriété Text de la zone de texte à la propriété Name de l'élément d'index zéro de la collection. Faites de même avec les autres propriétés.

Une fois les liaisons configurées, vous obtiendrez un écran similaire à celui-ci :

L'écran « Musique » permettra à l'utilisateur d'effectuer une recherche sur un artiste ou un album, de visualiser la liste des artistes les plus populaires ainsi qu'un nuage de tags des types de musique les plus appréciés par les visiteurs.

Un contrôle « ItemsControl » permettra d'afficher une liste d'artistes. Nous n'utilisons pas de contrôle « ListBox » car nous n'avons pas besoin de la notion d'élément sélectionné.

Le nuage de tags est obtenu en utilisant un des nouveaux contrôles de type Shapes introduits dans Expression Blend 4. Il suffit ensuite d'insérer des zones de texte par-dessus et contenant des noms de type de musique.

Afin d'alimenter l'écran en données, nous allons créer une source de données Sample Data à partir d'un fichier XML contenant une liste d'artistes et d'albums associés.

Sélectionnez le fichier artistes.xml présent dans les sources du projet. Expression Blend crée une nouvelle source de données Sample Data correspondant à la structure du fichier XML et en importe les données.

Liez l'élément « ItemsControl » (via sa propriété ItemsSource) à la source de données en effectuant un glisser déposer de la collection d'artistes sur le contrôle.

Expression Blend lie la collection d'artistes au contrôle et modifie son « ItemTemplate » afin que celui-ci affiche les trois propriétés d'un artiste, « bio », « image » et « name » au sein de blocs de texte.

Nous allons modifier le template généré afin qu'il corresponde mieux à ce que nous voulons afficher : l'image (et non son url) à gauche et le nom de l'artiste à droite sous la forme d'un lien.

Faîtes un clic droit sur le contrôle « ItemsControl » et choisissez de modifier son « ItemTemplate » courant.

Supprimer les trois blocs de texte présents dans le template.

Ajoutez un contrôle « Image » et un contrôle « HyperlinkButton » au sein d'un « StackPanel » (configuré en affiche horizontal).

Liez ensuite le contrôle « HyperlinkButton » avec la propriété « name » d'un artiste. Pour cela, ouvrez le panneau Data et faîtes un glissé-déposé de la propriété « name » sur le contrôle. Une info bulle bleue apparaît indiquant qu'Expression Blend va lier le contenu du contrôle à la propriété.

Faites de même avec le contrôle Image et la propriété « image ». Cette dernière contient l'URL de l'image et sera liée à la propriété Source du contrôle.

Un clic sur le nom d'un artiste conduira l'utilisateur à l'écran « Info artiste ». Pour cela, faites un clic droit sur le contrôle « HyperlinkButton » et sélectionnez le menu Navigate to --> Info artiste.

Pour quitter le mode d'édition d'un template cliquez sur le premier élément du fil d'Ariane situé en haut de la surface de dessin.

Une fois terminé l'écran « Musique » devrait ressembler à ceci :

L'écran « Info artiste » sera composé de deux états visuels (visual states), « artiste » et « album ». Ceux-ci permettront de visualiser deux types d'informations différentes concernant un artiste au sein d'un même écran.

Une zone de texte pour l'affichage du nom de l'artiste et deux boutons qui serviront à passer d'un état à l'autre seront toujours visibles quel que soit l'état sélectionné.

III-K-1. Création des états visuels▲

III-K-2. Etat visuel « Artiste »▲

III-K-3. Etat visuel « Album »▲

III-K-4. Passage d'un état à un autre▲

L'écran « Achat » permettra à l'utilisateur de valider l'achat d'un album en saisissant son numéro de carte bancaire et son adresse de livraison.

La partie du haut affichera un récapitulatif de l'album sélectionné. Elle sera liée à l'élément 0 de la collection « artistCollection » de la source de données « artistSampleDataSource » (idem que pour l'état visuel « Artist » de l'écran « Info artiste »).

La partie du bas sera pré remplie avec le nom et l'adresse de l'utilisateur courant (présent dans la source de données UserDataSource). La liaison se fait de la même façon qu'avec l'écran « Mon compte ».

Le bouton « Annuler » fera revenir à l'écran précédent.

Le bouton « Valider le paiement » fera naviguer vers l'écran « Musique ».

Nous allons utiliser dans cet écran la fonctionnalité SketchFlow Animation. Cette fonctionnalité permet de créer des pas à pas animés afin d'expliquer comment s'effectue l'interaction utilisateur sur un écran.

Commencez par afficher le panneau SkechFlow Animation.

Cliquez sur le bouton « + » pour créer une nouvelle animation.

Une première frame est automatiquement ajoutée. Le bouton Base permet de revenir à l'état de base de l'écran (mode design normal). Si vous sélectionnez la première frame, Expression Blend entre en mode enregistrement (pour cette frame). Vous pouvez alors ajuster la scène (déplacer un objet par exemple) pour cette première frame. Vous ajoutez ensuite une deuxième frame en cliquant sur le petit « + » en haut à droite de la première frame puis ajustez la scène et ainsi de suite.

Dans le répertoire des sources vous trouverez deux fichiers images click.png et cursor.png. Ajoutez les au projet SketchFlow et insérez les sur l'écran « Achat » mais en dehors de la zone de dessin. Placez-les de telle manière que l'étoile rouge (click.png) soit centrée sur le bout du curseur (cursor.png). Regroupez-les ensuite au sein d'un contrôle « Grid » afin de pouvoir les manipuler plus facilement.

Sélectionnez la première frame dans le panneau SketchFlow Animation. Cachez l'image de l'étoile rouge (via sa propriété Visible) et déplacez la « Grid » contenant l'image du curseur au-dessus du bouton radio « Visa ».

Créez une deuxième frame d'une durée de 0.2 seconde. Rendez visible l'image de l'étoile rouge afin de simuler un clic sur le bouton radio. Saisissez 0.1 seconde comme durée de transition entre les frames 1 et 2.

Ajoutez une troisième frame d'une durée de 0.2 secondes. Cachez l'image de l'étoile rouge et cochez le bouton radio « Visa ». Saisissez 0.1 seconde comme durée de transition entre les frames 2 et 3.

Créez une quatrième frame d'une durée de 1 seconde. Déplacez la « Grid » contenant l'image du curseur afin que celle-ci soit positionnée au-dessus de la zone de saisie du numéro de carte bancaire. Saisissez 0.4 seconde comme durée de transition entre les frames 3 et 4.

Ajoutez une cinquième frame d'une durée de 0.2 seconde. Rendez visible l'image de l'étoile rouge afin de simuler un clic sur la zone de texte. Saisissez 0.1 seconde comme durée de transition entre les frames 4 et 5.

Créez une sixième frame d'une durée de 0.2 seconde et rendez invisible l'image de l'étoile rouge. Saisissez 0.5 seconde comme durée de transition entre les frames 4 et 5.

Ajoutez une septième frame d'une durée de 1 seconde. Saisissez un numéro de carte bancaire dans la zone de texte. Saisissez 0.5 seconde comme durée de transition entre les frames 6 et 7.

Créez une huitième frame d'une durée de 1 seconde. Déplacez la « Grid » contenant l'image du curseur au-dessus du bouton de validation. Saisissez 0.5 seconde comme durée de transition entre les frames 7 et 8.

Enfin, ajoutez une neuvième frame d'une durée de 0.2 seconde. Cachez l'image de l'étoile rouge afin de simuler un clic sur le bouton. Saisissez 0.5 seconde comme durée de transition entre les frames 8 et 9.

Vous pouvez pré visualiser l'animation en cliquant sur le bouton de lecture du panneau SketchFlow Animation.

Lancez l'exécution du prototype via la touche F5 ou le menu Project --> Run Project afin de le visualiser au sein du lecteur SketchFlow, puis naviguez jusqu'à l'écran « Achat ».

Dans le panneau Navigate se trouve un lien permettant à l'utilisateur de lire l'animation créée pour cet écran.

Le prototype terminé, il est maintenant temps de le redistribuer. Tous les fichiers nécessaires à l'exécution du prototype sont inclus dans le package (notamment le lecteur SkechFlow), ce qui permet à n'importe quelle personne (ayant installé le plugin Silverlight ou le Framework .NET complet dans le cas d'un prototype en WPF) de le lire.

III-M-1. Création d'un package▲

III-M-2. Publier sur SharePoint▲

III-N-1. Saisir les retours depuis le lecteur SketchFlow▲

III-N-2. Lire les retours depuis Expression Blend▲

Nous allons ici utiliser la fonctionnalité de génération d'une documentation au format Microsoft Word. Dans le menu File sélectionnez Export to Microsoft Word.

Vous avez la possibilité d'inclure les retours utilisateurs (ceux chargés au sein d'Expression Blend au moment de l'export) dans la documentation générée ou encore d'utiliser un template Word spécifique.

L'export Word contient une table des matières, une liste des figures, une image de la SketchFlow Map et une image de chaque écran avec les annotations et les retours utilisateurs associés.

L'image ci-dessous montre un retour utilisateur (créé dans le chapitre précédent) inclus dans l'export.