Les nouveautés de Flex 4

Il y a quelque temps est sortie la version bêta de Flex 4. Connue aussi sous le nom de Gumbo, cette nouvelle version n’a plus rien à voir avec les précédentes : possibilité de personnaliser ses composants, simplification des notations … Nous verrons dans ce billet quelques nouveautés de Flex 4 et les raisons d’un changement aussi radical des librairies.

• Les effets
• Dessine moi un bouton … avec spark.
• Les autres nouveautés de Flex 4
• Conclusion
• Pour aller plus loin

Pour visualiser les exemples Flex 4 ci dessous, il vous faudra installer Flash Player 10.

Les effets

Une différence notable avec la précédente version de Flex est la gestion des états qui est maintenant nettement plus simple.
En Flex, il est possible de décrire plusieurs états associés à un composant. Ces états définissent, pour un composant, des éléments à ajouter, des styles ou des propriétés à appliquer. En effet, il est question de manipuler des AddChild, des SetProperty ou encore des SetStyle qui peuvent devenir très vite lourds à gérer. Pour mieux comprendre, prenons un exemple :
Nous allons réaliser une application sur 2 états, l’état blueState qui va colorer le label helloLabel en bleu et l’état redState qui va le colorer en rouge. Pour ce faire, avec Flex 3, nous utilisons les balises SetStyle qui permettent de modifier le style color du label et de le mettre à la couleur voulue.

Avec Flex 4, il n’est plus question de définir des SetStyle ou SetProperty dans les composants. Tout se fait dans les attributs qui peuvent se décliner en fonction des états comme ceci : styleOuPropriete.monEtat. Ainsi color.blueState prendra la couleur bleu lorsque l’on sera dans cet état.D’autre attributs apparaissent également dans les composants graphiques comme includeIn ou encore excludeFrom pour permettre d’exclure ou d’inclure un composant en fonction de l’état courant. De plus, Flex prend maintenant par défaut le premier état lorsqu’on en définit plusieurs pour un composant. C’est la raison pour laquelle nous avons ajouté defaultState comme état par défaut. Avec Flex 4, notre précédent exemple donne donc ceci :

Certes, il s’agit d’un petit exemple. Mais cela pourrait simplifier la gestion des états sur des applications plus élaborées.

Dessine moi un bouton … avec spark.

De nouvelles librairies ont vu le jour dans Flex 4. Commençons par la librairie spark, présente depuis Mai 2009. Elle offre toute une nouvelle génération de composants dont l’architecture est clairement différente de son prédécesseur halo. Cette dernière proposait des composants graphiques sur lesquels il n’était possible que de changer les couleurs et le style du texte : le Flex Style Explorer en est un bon exemple.
La librairie spark, de son côté, propose un nouveau type de composant « skinnable », c’est-à-dire que nous avons d’un côté le dessin représentant un bouton et de l’autre l’objet bouton. De plus, spark intègre la librairie FXG qui fournit tous les composants permettant de faire des dessins vectoriels.
Pour mieux comprendre le fonctionnement, rien de mieux qu’un exemple :
Nous créons d’abord un Skin sous le nom de component.CustomSkin.

    
        [HostComponent("spark.components.Button")]
    

    
        
        
        
    

    
        
          
         
    

    
        
    

Nous définissons le comportement de ce composant grâce au metatag HostComponent, ici il s’agit donc d’un bouton. Nous ajoutons ensuite les états en regardant dans la documentation, nous pouvons voir que Button dispose des états : up, over, down et disabled. Contentons-nous des trois premiers états pour cet exemple. Enfin, on finit par dessiner un bouton qui sera disposé dans un layout qui doit être défini dans tout composant spark. Ce skin est ensuite associé à un bouton dans l’application principale.

Et voici le rendu :

Les autres nouveautés de Flex 4

Support dans l’ASDoc des fichiers MXML
La SDK de Flex 3 ne générait que la documentation associée au code ActionScript 3. Il est maintenant possible dans le SDK 4 de générer de l’ASDoc pour les composants MXML.

Le data binding dans les deux sens
Actuellement, la liaison des données dans un composant avec Flex se fait de la façon suivante :

Dans cet exemple, l’édition dans myText1 modifie le champs myText2 mais l’inverse ne se fait pas. Pour les lier tous les deux il faudrait modifier myText1 comme ceci :

Avec la nouvelle notation que propose Flex 4, il suffit de faire comme ceci :

Et automatiquement les deux composants sont liés.

Conclusion

Toutes ces nouveautés proposées par Adobe ont pour but :

• d’améliorer la productivité du développeur en simplifiant le langage,
• d’avoir plus de liberté sur le design.

La librairie spark propose des composants radicalement différents de ce que l’on peut actuellement utiliser dans Flex 3, mais il est cependant possible d’utiliser les composants de l’ancienne librairie nommée halo. Les habitués ne s’y perdront donc pas.
Mais alors pourquoi autant de changement ? La raison est très simple et se nomme Flash Catalyst. Le nouvel outil d’Adobe sorti en Juin 2009 en version bêta est capable de générer du code Flex à partir de dessins réalisés par la gamme Creative Suite 4.
Flex 4 est toujours en bêta actuellement, une release est prévue pour le dernier trimestre 2009.

Pour aller plus loin

• LiveDocs Flex 4
• Télécharger le SDK