(Article original sur le blog de Sébastien)
Voici donc mon dernier article concernant les découvertes que j’ai pu faire sur l’outil « SketchFlow ». Au programme, je vais commencer par vous parler de la manipulation de données avec l’outil « SketchFlow », puis ensuite je vais vous montrer comment travailler avec des « FeedBack » et enfin je terminerais avec l’export du projet pour pouvoir proposer une application utilisable au client.
Toujours pour rester dans la continuité, je vais compléter l’exemple que j’avais initié dans mon premier article.
Commençons donc à travailler en ajoutant des données à mon projet, et pour cela je vais me positionner sur la fenêtre « Data » et ajouter des données sur lesquelles je vais travailler :
Je renomme le nom de ma source :
Automatiquement, l’outil va me générer une structure de donnée que je vais modifier en fonction de mes besoins. Pour l’exemple je vais créer trois champs : « name, description, image » .
Pour modifier la structure de mes données, il suffit de cliquer sur le bouton d’édition :
Puis modifier le type des mes propriétés :
On remarquera que si je positionne le type de ma donnée sur « Image », automatiquement une bibliothèque d’image par défaut va être inséré dans ma collection de données :
Pour remplacer cette collection d’image par défaut, et proposer mes propres images il suffit d’indiquer le chemin où elles se situent :
Et mes images par défaut sont remplacés :
Enfin si je veut ajouter ou modifier une de mes propriétés, il suffit de les éditer dans la fenêtre « Data » :
Passons maintenant à l’exploitation de mes données, et pour cela je vais alimenter ma « Listbox » que j’avais initialement crée dans mon écran « Main ». Pour l’alimenter il suffit de « drag&drop » la source de donnée sur le composant « ListBox »:
Mes données vont automatiquement apparaitre dans ma « ListBox » :
Je vais maintenant un peut personnaliser le rendu ( « Template » ) de ma « ListBox » en n’affichant que le nom et l’image. Pour cela il suffit de cliquer droit sur « Edit Additional Templates », puis « Edit Generated Items » et enfin « Edit Current ».
Dans la fenêtre « Objects and Timeline », on doit voir apparaitre la structure d’affichage ( « Template » ) de ma « ListBox » que je vais modifier en supprimant la description et en agrandissant un peu mon Image :
Exécutons l’application, afin de s’assurer que les données sont correctement affichées :
Il en me reste plus maintenant qu’à alimenter les données détails qui correspondent en faite aux champs « description » et « image » situés sur la droite de mon écran. Autrement dit à chaque fois que je clique sur un élément de ma « ListBox », il faut que j’affiche l’image et la description correspondante à l’élément sélectionné.
Je vais commencer par alimenter la source mon image, pour cela je clique dessus puis dans les propriétés je vais indiquer la source :
Je vais ensuite indiquer son « DataContext », qui va ici correspondre à l’élément sélectionné de ma « ListBox » :
Je vais passer par une « Custom Expression », pour indiquer que le « DataContext » correspond à l’élément sectionné de ma « ListBox » :
Sans rentrer dans le détails, je vais faire la même chose pour la description de ma donnée. Et enfin j’exécute mon projet afin de m’assurer que les données sont correctement affichées :
Voilà donc pour cette première partie concernant la manipulation des données, je vais maintenant vous parler des « FeedBack » et annotations. Un des grands intérêt de cet outil collaboratif c’est le fait que le client peut directement donner son avis sur les esquisses d’écran réalisés, ceci permet donc une collaboration en temps réel. Cette possibilité lui est offerte à travers ce que l’on appelle les « FeedBack ».
Imaginons dans mon petit exemple que l’on ai oublié d’indiquer une information dans mon écran « main », le client va certainement vite s’en apercevoir il faut donc trouver un moyen pour qu’il puisse nous l’indiquer. Pour cela c’est très simple, il va directement pouvoir le faire dans le « SketchFlow Player ». J’exécute donc le projet et je me positionne sur l’onglet « Commentaire », en bas à gauche :
Et j’ajoute un commentaire :
Je vais ensuite associer à mon commentaire, un élément graphique que je vais dessiner directement sur mon écran à l’aide de l’outil pinceau :
Je vais maintenant exporter mes « FeedBack », en cliquant sur « Exporter les commentaire … » :
A noter qu’il vous sera demandé de renseigner l’auteur du « FeedBack » ainsi qu’un chemin où le sauvegarder. Une fois donc exporté, je vais l’importer dans mon projet, et pour cela il faut se rendre sur la fenêtre « FeedBack » puis ajouter le « FeedBack » que j’ai précédemment exporté depuis le « SketchFlow Player » :
Pour voir apparaitre le « FeedBack » sur l’écran, il suffit de cliquer sur la petite icône en haut à droite et le « FeedBack » apparaîtra :
Pour information on peut rapidement voir quels écrans possèdent des « FeedBack », grâce à la fenêtre « SketchFlow Map » dans laquelle une petite icône à fait son apparition sur l’écran possédant un « FeedBack » :
Me voilà arrivé à la dernière partie de mon « Post », partie concernant l’export de mon projet. En effet il me semble très utile de pouvoir « packager » la solution afin de fournir une application exécutable au client, pour qu’il puisse la consulter et si nécessaire la commenter. Deux modes d’export sont proposés, un sous forme d’un projet « SketchFlow » et l’autre sous forme d’un document « Word ».
Commençons par le premier mode en cliquant sur « fichier -> Package SktechFlow Project » :
Je choisie ensuite un emplacement :
« Expression Blend » va donc automatiquement me construire un projet exécutable :
Si j’exécute « WpfPrototype.exe », j’obtiens l’exécution de mon projet :
Pour ce qui de l’autre mode d’export sous Word, le principe est le même :
Cela va vous générer un jolie document Word que vous pouvez échanger avec le client :
Me voilà donc arrivé à la fin de cet article et de la série d'articles consacré à SketchFlow. J’espère que cela vous servira et vous donnera envie d’approfondir le sujet car comme vous avez pu le voir, il y a matière à faire.
Si vous avez des remarques n’hésitez pas.
En attendant voici le code de l’exemple présenté :
(Article original sur le blog de Sébastien)
Sébastien.
| Suivant > |
|---|
