Compte-rendu de l’Adobe Designer Developer Experience

image001J’étais hier après-midi (3 juin 2009) à l’Adobe Designer Developer Experience à Paris, qui était l’occasion de découvrir les nouveautés d’Adobe Flash Platform, au travers des dernières évolutions du framework Flex, du Flash Builder (projet Gumbo) et de la Beta d’Adobe Flash Catalyst.
Voici le compte-rendu de mes notes prises à chaud, un peu télégraphique je l’admets.

Pourquoi Flash Catalyst (FC) ?

Actuellement, sur Flex Builder (FB), les flexeurs codent d’abord puis à la fin s’évertuent à skinner via css leur « belle appli » toute grise. Or ce n’est pas la bonne façon de faire.
Les designers font l’inverse, on skinne + ergonomie et enchainements d’abord, on valide avec les user finaux et après on ajoute l’accès aux données, et c’est comme ça qu’il faut développer une RIA.
FC est juste une passerelle pour récupérer les écrans (par ex. calques PS) produits par les designers (sous forme FXG, le nouveau format déclaratif lisible d’échange entre les outils de design de la CSuite et FC). Après import du FXG, FC permet de mapper une widget standard (bouton, liste, scrollbar etc…) sur un composant purement vectoriel importé de l’outil CS4 (on dit : ce rectangle est en fait un bouton etc…), d’ajouter les navigation/enchainements/transitions puis on transforme tout ça en du code (déclaratif) importable par FB (i.e. un fichier .FXP = nouveau format de projet FC et FB). FC ne fait que du déclaratif/descriptif en MXML, pas de code.
La séparation visuel / logique est améliorée par Flex 4 : MVC est poussé au niveau du composant. FC permet de créer un skin de composant. FB d’y ajouter la logique AS.
Tiens au fait, les démos ont montré le workflow académique de dev d’une RIA : PS pour les calques (avec parfois l’aide d’AI) , puis export FXG dans FC, puis export FXP dans FB.
Quid de l’outil Flash Pro ?
Bref, pour résumer, Catalyst est un outil passerelle « super designer » qui génère du mxml pour FB.

Nouveautés FB4 : 3 maitres mots : ultra productif, data-centric, intégration design/dev

  • package explorer avec des vrais packages sans arborescence pénible
  • skinning halo versus sparks (ns mx: vs. s:) (puisque Flex4)
  • génération auto de la calback sur le click= » » du tag MXML !🙂
  • génération auto des set/getter (enfin !)
  • refactoring (rename/move) : enfin !
  • templates d’en-têtes (copyright etc..)
  • pomme-i ré-indente le code
  • flex thèmes
  • convertir automatiquement un projet web en Air
  • spark recommandé car tire bénéfice des nouvelles fonctionnalités du player 10 mais du coup en dépend
  • droit admin nécessaire pour flash player ?! -> flash player admin guide
  • mxml = purement visuel donc ce qui ne l’ai pas va dans un tag , par ex. : DateFormatter, http service, remote object
  • code private = code enlevé pendant la compilation (par ex. catalyst génère du code private en prévision du roundtrip FB/FC)
  • api de dessin disponible dans un tag Graphics (ala degrafa) (composant léger)
    o évidemment pas fait pour du dessin intensif (dans ce cas, privilégier import Illustrator)

  • Notion d’état (mx:State) :à l’envers : on part de l’élément et on dit dans quel état il est présent
    o + propriété en fonction du state : syntaxe = nom_prop.nom_etat=valeur
    o + élégant, + lisible, – de code, + support de l’IDE (grise/dégrise en sélectionnant l’état dans une combo)

  • layout d’une application a changé : maintenant tag Layout = objet
    o on peut créer son layout : demo de boutons en cercle

  • index.html template utilise swfobject
  • binding double (two-way)
  • rendu textuel = moteur de rendu TextLayoutEngine et TextLayoutFramework (cf. NY Times)
  • Dans le mode design FB, new Flash component ou new Flash container (.swf)
  • Introspection des services : glisser déposer du service introspécté vers datagrid, form, bouton : on drag/drop le service introspecté vers le widget et ça marche direct. Énorme gain de productivité.
  • datapaging généré (coté client et serveur : demo php mais censé marcher aussi avec BlazeDS)
    o au niveau php, reste à coder les requêtes des functions count() et getItems_paged()
    o clic droit enabling Paging -> wizard
    o résultat : charge on demande de la scroll et charge tout en background

  • + data management = maîtrise du commit (i.e. qd on veut)
  • debug conditionnel
  • point d’arrêt au runtime : runtoline() si oublié de mettre un point d’arrêt avant de lancer l’appli
  • gestion du mode déconnecté : seulement avec LCDS pour l’instant avec commit différé
  • bien comprendre que le passage halo -> spark est gros changement, d’où les évènements préparatifs d’Adobe comme celui-ci.
  • blog tontons flexeurs permettra de donner ses idées
  • Au fait, Certification Flex nouveau en France, via formation Baao

Conclusion : FC va permettre aux designers de livrer leurs travaux sous forme exploitable par des développeurs Flex. Car – et je l’ai constaté sur un projet récemment – il y a en fossé entre les designers Flash et les développeurs Flex (qui sont grosso modo des développeurs Java). C’est donc une bonne chose, si le workflow design -> dev est respecté.
Le pb est que dans la vraie vie de projet d’entreprise, ce n’est pas évident de faire démarrer des protos RIA directement en sous-traitance d’une agence Web/design. Tous les protos fait en avance de phase ou en avant-vente retomberont dans le schéma « dev Flex puis skinning ». Pour ce qui est de FB4, j’attends avec impatience cette version, il y a une réelle amélioration (ensemble de petites de choses mais surtout l’accès aux données !)

2 commentaires pour Compte-rendu de l’Adobe Designer Developer Experience

  1. Salut le blog.
    Très excellent article comme d’habitude. Continuez encore c’est un plaisir de vous relire.
    A très prochainement et une excellente année 2011 !

  2. c est compliqué mais tres interssant

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :