Flash Catalyst, Flash Builder, l’avis de Xebia !

Lors du XKE de Février, nous avons eu l’occasion de tester les outils Flash Catalyst et Builder en version beta. Pour ce faire, nous avons décidé de faire un projet et de présenter les facilités et les difficultés que nous avons rencontrées.
Concernant le projet, ce dernier est simple : mettre en place une application permettant de lister des voyages, et à partir d’une image Photoshop, nous allons définir les états/transitions dans Flash Catalyst, et brancher un backend Java avec Flash Builder. Cette série d’articles reprendra ces points avec nos analyses et critiques.
Avant toute chose, nous allons commencer par nous excuser auprès des designers/graphistes : n’étant pas notre coeur de métier, le design et l’ergonomie de l’application pourra peut être heurter la sensibilité de certains de nos lecteurs.

Mise en place de l’image Photoshop/Illustrator

N’ayant que très peu de connaissance de l’univers Photoshop, cette tâche s’est avérée au début périlleuse… Néanmoins, les différents tutoriaux d’Adobe permettent d’acquérir suffisamment de connaissances pour mettre en place une image, dont voici le résultat:

Assez basique, le premier écran listera les voyages, et lorsque l’utilisateur cliquera sur l’un d’eux, une image s’affichera dans le panel de droite. C’est dans cet écran que sera branché notre backend Java. Le menu sera simplement utilisé afin de montrer la mise en place des états/transitions avec Catalyst. Ainsi, les autres rubriques du menu afficheront respectivement une carte, et un descriptif.

Voici notre arborescence de l’image Photoshop créée:

Le principe est simple: l’image est découpée en calque, et ces derniers sont regroupés par fonctionnalités/pages. Ainsi nous retrouvons notre menu (navigation) avec les types d’effets que nous voudrons voir lorsque la souris de l’utilisateur passera sur le texte (ici une image violette), et les différentes pages avec leurs contenus.
Cette organisation est très importante, car par la suite nous l’utiliserons afin de mettre en place les transitions entre pages et créer nos composants.

Flash Catalyst

Une fois l’image importée dans Catalyst, nous constatons que la structure de Photoshop est bien présente et qu’un état a été créé.

Nous allons commencer par créer les transitions entre les différents écrans:

• Sélectionnez le premier état en haut à gauche et renommez le en voyages.
• Sélectionnez pour cet état la page que vous voudrez afficher dans la fenêtre Layers en haut à droite (en l’occurrence voyages page)
• Créez deux autres états (Duplicate State en haut à gauche)
• Répétez l’étape 2 pour les pages opérateurs et XKE.

Animons cette page en créant les boutons:

• Revenez sur l’état «voyages».
• Sélectionnez le texte «Voyages» ainsi que le fond violet.
• La fenêtre Convert to Artwork apparaît, sélectionnez Button.
• Re cliquez sur le texte Voyages et cochez Label dans la fenêtre qui est apparue.

• Dans la fenêtre Layers (en haut à droite), renommez Voyages en Label et voyages over en over (ce sera un composant générique pour les autres boutons du menu).
• Revenez sur la racine de votre projet (nom du projet) et renommez le composant Button en voyages_button par exemple (fenêtre en haut à droite).
• Ajoutez le label Voyages dans les propriétés du composant, et décochez Enabled.

• Sélectionnez le label de «Voyages» et modifier la couleur en noir (dans la fenêtre Properties en bas à droite)

• Copier coller deux fois le composant voyage_button dans la fenêtre Layers (en haut à droite). Ce seront les boutons Opérateurs et XKE.
• Supprimez les composants du layer navigation importés de l’image Photoshop

• Tout comme «Voyages», modifiez les labels pour Opérateurs et XKE (par contre laissez la propriété Enabled cochée).
• Vous devez réaligner les boutons les uns en dessous des autres, car en créant ces composants, Catalyst les a superposés.
• Sur chaque bouton, faire clique droit => Share to State => All States.
• Allez dans les états Opérateurs et xke: alignez les boutons et vérifier la couleur des labels.
• Attention, pour ces états vérifiez également que pour le bouton Voyages, la propriété Enabled est bien cochée.
• Cliquez sur le bouton Voyages, la fenêtre suivante s’ouvre

• Dans Up et Down, désélectionnez voyages over dans la fenêtre layers.

• Cliquez sur le bouton «Voyages» et dans le panneau Interactions (sur la droite), sélectionnez Add Interaction.
• Dans la liste déroulante Choose state, sélectionnez voyages.

• Répétez ces opérations pour les boutons Opérateurs et XKE.
• Allez dans File => Run Project pour tester la navigation.

Passons à la création de la scrollBar verticale ainsi que de son association avec une liste déroulante :

• Sélectionnez les éléments graphiques qui vont composer la scrollBar.
• Une fenêtre est apparue (Convert to Artwork), sélectionnez Vertical scrollBar dans la liste. Ne tenez pas compte du message Component Issues.
• Cliquez sur Edit Parts, et associez les éléments graphiques aux éléments de la scrollBar.

• Un fois le composant terminé, cliquez sur la racine du projet (nom de votre projet) en haut à gauche.
• Sélectionnez le fond gris clair avec le texte San Francisco et dans la fenêtre Convert Artwork, sélectionnez Data List.
• Cliquez sur Edit Parts, et associez le fond gris ainsi que le texte San Francisco à Repeated Item.

• Ajustez la taille de la Data List à celle de la scrollBar.
• Dans la fenêtre du bas, cliquez sur l’onglet Design-Time Data.
• Ajouter des données en cliquant sur Add Row.

• Couper la scrollBar, double cliquez sur la Data List et coller la scrollBar dedans (l’association avec la liste est effectuée à ce moment).
• Allez dans File => Run Project pour tester l’application.

Analyses

A travers la mise en place de cette première partie, nous pouvons effectuer les constats suivants:

• La maîtrise des outils Photoshop et Illustrator est indispensable : créer ses composants graphiques, appliquer des effets nécessitent un travail non négligeable.
• Pour un développeur n’ayant pas de connaissances graphiques, la courbe d’apprentissage peut être assez longue.
• Lors de la mise en place de l’image, il faut anticiper les transitions et effets car l’arborescence des composants est importante pour Catalyst.
• L’outil Catalyst possède de bonnes interactions avec Photoshop et Illustrator:
• l’import d’images Photoshop est bien reconnu
• possibilité de modifier et d’améliorer ses composants à partir de Catalyst dans Illustrator.
• Catalyst permet de créer des états, transitions assez rapidement et facilement
• La création de certains composants n’est pas forcément très intuitive : création d’un composant Button et suppression des «boutons» créés dans Photoshop…

Vous pouvez télécharger l’image et le projet Catalyst sur le SVN de Xebia France