Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex 4 en un jour - Composants Spark

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 09 novembre 2010

Cet article est une traduction d'un mini livre nommé Flex 4 in a Day de Mihai Corlan.

Adobe a donné son accord concernant la traduction de ce mini-livre.

Présentation

La plupart des fonctionnalités présentées jusqu'ici peuvent être considérées comme des évolutions: petites améliorations ou ajouts. Les composants Spark représentent eux une fonctionnalité révolutionnaire. La nouvelle architecture des composants (nom de code Spark), introduit par Flex 4, est clairement une rupture avec le précédent modèle de composant de Flex 3 et 2 (nom de code Halo).

En un mot, les composants Spark introduisent une séparation claire entre la logique métier et les données d'un composant et son aspect visuel (skin). Un composant Spark a au moins deux classes.

Une classe (généralement écrite en ActionScript) donne le nom de balise MXML du composant (par exemple, Button) et encapsule le comportement de base du composant: définition des événements diffusés par le composant, des données représentant le composant (pour un bouton cela pourrait être le texte du bouton), et gestion des sous-composants ou des différents états (pour un bouton cela être: haut, bas, au-dessus et désactivé).

Couplé à cette classe il y a une classe de skin qui gère tout ce qui est lié à la façon dont le composant est rendu à l'écran, y compris la mise en page, les animations, le changement d'apparence dans les différents états, les transitions et la représentation des données. Généralement vous créez une classe d'habillage en utilisant les graphiques MXML et/ou FXG.

Du point de vue des outils, vous pouvez utiliser un éditeur de texte pour créer la classe de Skin ou vous pouvez utiliser le nouveau flux de travail introduit avec Flash Catalyst et Adobe Illustrator/Photoshop. Ce flux de travail permet à un concepteur ou à un développeur de créer visuellement les skins à l'aide de ces outils.

Flex 4 nécessite une version minimum de Flash Player 10 afin de faire fonctionner une application Flex (dans Flash Player 10 ont été introduites le nouveau moteur de rendu de texte FTE et Pixel Bender, fonctionnalités utilisées par Flex 4).

Voici une liste de composants Spark:

Si vous regardez la liste ci-dessus, vous remarquerez qu'il n'y a pas un composant Spark pour chaque composant Halo. C'est quelque chose sur lequel Adobe travaille afin de l'intégrer dans les prochaines versions du SDK Flex. En même temps, il n'y aura pas un composant Spark équivalent à chaque composant Halo. Vous disposez encore dans Flex 4 de tous les composants Flex 3 et vous pouvez mélanger, si vous le souhaitez, ces deux ensembles de composants dans le même projet.

Les composants Spark sont des sous-classes de UIComponent (comme les composants Halo). Cependant, une série de nouvelles classes qui héritent de UIComponent ont été introduites et elles forment les classes de base pour tous les composants Spark.

Si vous voulez créer un composant Spark qui doit être personnalisable vous devez créer une sous-classe de spark.components.supportClasses.SkinnableComponent.

Si vous voulez créer un conteneur Spark qui doit être personnalisable vous devez étendre la classe spark.components.SkinnableContainer. Il existe des conteneurs Spark qui ne sont pas personnalisables, comme par exemple le conteneur Group.

Deux autres conteneurs sont importants: DataGroup et SkinnableDataContainer. Ces conteneurs peuvent être utilisés pour afficher des données. Par exemple, si vous voulez créer une liste, vous pouvez utiliser un conteneur SkinnableDataContainer. Si vous ne voulez pas utiliser de skin, vous pouvez utiliser un conteneur DataGroup.

Tous les conteneurs Spark supportent des enfants qui implémentent l'interface IVisualElement. Les composants Spark et Halo et les classes spark.primitives.supportClasses.GraphicElement implémentent cette interface. Ainsi, vous pouvez ajouter à un conteneur Spark: des composants d'interface (Spark ou Halo), des dessins MXML ou FXG.

Pour créer une skin pour un conteneur Spark, vous créerez un fichier MXML contenant un Group dont l'id a pour valeur contentGroup et quelques balises de dessins MXML ou FXG pour créer l'apparence.

Enfin, si vous voulez créer une skin pour un composant Spark, vous devez étendre la classe spark.components.supportClasses.Skin.







Page précédente | Sommaire | Page suivante