Publié par

Il y a 10 ans -

Temps de lecture 6 minutes

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:

Img1

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:

Img2

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

Img3

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.
Img9
  • 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

Publié par

Publié par Nicolas Jozwiak

Nicolas est delivery manager disposant de 12 ans d’expérience en conception et développement. Son parcours chez un éditeur avant son entrée chez Xebia lui a notamment permis de développer de solides compétences dans le domaine de la qualité et de l’industrialisation (tests, intégration continue, gestion de configuration, contrôle qualité). Bénéficiant d’une expérience très solide de mise en place des méthodes agiles et d’accompagnement d’équipes sur le terrain, il s’attache à mettre à profit quotidiennement son expérience qui est reconnue pour son approche pragmatique, proactive et pédagogique.

Commentaire

2 réponses pour " Flash Catalyst, Flash Builder, l’avis de Xebia ! "

  1. Publié par , Il y a 10 ans

    Article intéressant mais je suis un peu déçu et je vais me montrer sans doute sévère:
    – Catalyst, je crois, n’est pas destiné aux purs développeurs mais aux plutôt au graphistes/designers ou, au mieux, aux développeurs/graphistes, denrée rare aujourd’hui. Il est donc normal que vous ayez eu des difficultés (sans connaissance Photoshop d’autant plus)
    – Dommage que vous n’alliez pas jusqu’à l’intégration avec Flash Builder, l’intégration dans un projet ; cela permetterait de voir l’intérêt de cet outil pour la réutilisation de skins ; bref, quel retour sur investissement pour un Catalyst/Flash Builder versus Illustrator/Flex Builder?

  2. Publié par , Il y a 10 ans

    Bonjour,

    L’article sur l’intégration à Flash Builder est en cours de rédaction. Il sera bientôt publié.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.