A la découverte de SketchFlow avec Expression Blend 3 (Première Partie)

(Article original sur le blog de Sébastien)

Ces dernier jours je me suis intéressé d’un peu plus prés à SketchFlow, ce fameux outil collaboratif intégré à Expression Blend 3 et qui propose une véritable plate forme commune pour les designers, les développeurs et les utilisateurs afin de concevoir les premières esquisse d’interface graphique d’un projet. Cet outil permet donc de dessiner les premières maquettes et de les finaliser en les mettant en forme, fini donc les interminables échanges de documents Photoshop et Powerpoint entre le client et le développeur. En effet le client peut maintenant apporter directement ses feed-back au fur et à mesure de l’avancement des projets. Cette nouvelle fonctionnalité permet donc une vrai collaboration en temps réel sur la conception d’interface graphique.
Je vais donc dans une série d'article, vous faire part de mes découvertes sur cet outil collaboratif, que j’espère pouvoir utiliser dans les prochaines semaines. Ce premier article sera donc une petite introduction à SketchFlow.

Comme je l’ai dit en introduction, SketchFlow est intégré à Expression Blend 3 et pour pouvoir l’utiliser il suffit de lancer Expression Blend 3 et de créer un nouveau projet de type WPF SketchFlow Application ou Silverlight 3 SketchFlow Application selon vos besoins. Dans l’exemple que je vais présenter, j’utiliserais un projet de type WPF SketchFlow Application :

Avant de commencer à travailler, je vais effectuer quelques réglages sur la disposition de mes fenêtres que je vais sauvegarder dans mes « WorkSpaces » :

Une fois mon espace configuré, je vais pouvoir commencer à travailler avec SketchFlow et je remarque dans un premier temps que Expression Blend ma généré une structure de projet du même type que dans Visual Studio. Un premier écran intitulé « Screen 1.xaml » a été crée, un fichier Stketch.Flow qui correspond aux relations et interactions qui va existaient entre mes différents écran et enfin un fichier « SketchStyles.xaml » qui est ni plus ni moins les styles applicable à mes contrôles :

Une autre fenêtre très importante pour travailler, c’est celle intitulé « SketchFlow Map », et qui va permettre de créer des écrans et la navigation entre ces écrans. Pour créer ou renommer un écran rien de plus simple il suffit d’éditer directement les carrés de couleur bleu dans le diagramme :

Pour créer des liens de navigation entre les écrans il suffit de passer la souris au dessus des carrés de couleur et vous allez voir apparaître des petites icônes qui vont vous permette de créer des liens sur des écrans existant ou de nouveaux écrans :

Vous pouvez également créer des liens de navigation dans les deux sens (bidirectionnelle) :

Passons maintenant à la conception des premières esquisse de mes 2 écrans, qui va en faite être constitué d’un écran d’accueil et d’un écran de visualisation de données. Pour cela je vais me positionner dans l’onglet Assets, SketchFlow->Styles->SketchStyles et je vais ainsi directement accéder à une liste de contrôle avec le style par défaut utilisé dans SketchFlow :

Pour créer mes deux écrans je vais donc tout simplement glisser-déposer des contrôles depuis la boîte d’outil :

Notez pour astuce que vous pouvez vous aider du quadrillage pour pouvoir aligner vos éléments sur l’écran :

Ou encore des outils d’alignement bien pratique quand vous sélectionnez plusieurs objets :

Afin d’embellir un peu mon écran d’accueil je vais insérer une image à mon projet :

Pour insérer mon image sur mon écran il suffit de faire un « drag&drop » de l’image sur ma page :

Je ne vais pas rentrer dans le détail de chaque contrôle disponible car l’outil permet facilement de les exploiter, mais pour vous donner un exemple si vous voulez ajouter des « items » à une « combobox », il suffit de cliquer droit sur le contrôle puis « AddComboBoxItem ».

Voilà nos deux écrans crées, voyons ce que cela donne si j’exécute ma solution grâce au raccourcie F5 (Project->Run Project) :

J’obtiens donc l’exécution de qu’on appelle le « SketchFlow Player » et qui permet de visualiser mes écrans ainsi que leur interactions grâce à l’onglet « Naviguer » sur la gauche. En effet souvenez-vous, j’avais crée précédemment un lien de navigation bidirectionnelle entre mes deux écrans que vous pouvez visualiser dans l’onglet Navigation :

Vous remarquerez également en bas à gauche la possibilité de naviguer sur les différents écrans disponible de la solution :

Je vais maintenant créer une barre de navigation très basique sous forme de ce qu’on appelle un « Component Screen ». Pour cela vous avez plusieurs options, vous pouvez par exemple créer dans l’écran d’accueil la barre de navigation comme ceci :

Puis dans la fenêtre « Object and Timlines », sélectionner les éléments de votre barre de navigation, puis cliquez droit et sélectionnez « Make Into Component Screen » :

Renommez ensuite votre nouveau composant :

On voit donc apparaitre dans l’onglet « SketchFlow Map » un nouveau carré mais qui est cette fois-ci de couleur vert indiquant que c’est un « Component Screen » et qu’il est lié à ma page « Start ». D’ailleurs on peut voir maintenant apparaitre sur l’écran un point d’interrogation qui indique que ces un « Component Screen ».

Pour ajouter cette barre de navigation dans l’autre écran rien de plus simple, il suffit de glisser le carré vert sur ma page « Main » et la barre de navigation est directement crée :

Passons maintenant à la navigation d’un écran à l’autre à l’aide d’un contrôle bouton. Je vais partir de la page d’accueil puis sur le bouton « Entrez » je vais cliquer droit puis choisir « Navigate to » et enfin je vais sélectionner mon deuxième écran « Main » :

Dans mon deuxième écran « Main » je vais créer un bouton intitulé « Retour » et ce coup-ci je vais créer un lien de navigation vers la dernière page consultée :

Exécutons le projet :

On constate donc que l’on peut naviguer d’un écran à l’autre en cliquant sur les boutons de navigation.
Sans rentrer dans le détail je vais faire la même chose avec ma barre de navigation :