Ajouter

Tutorial – Skinning dans Flash Builder 4 (Flex Gumbo) – Part 1

Posté le 27 septembre 2009 à 1:53 | Tags: Flash Builder 4 Beta, SkinnableContainer, Skinning

Adobe a changé de manière significative le système de gestion des skins dans Flash Builder 4 pour donner au développeurs de grandes possibilités de créer des composants avec des skins personnalisés sans avoir à s'engouffrer dans de la création via Flash ou autre application de graphisme.

Dans Flex 3, pour créer un container panel avec des bords arrondis (rounded corners) et un background en dégradé, on devait passer en général via Flash, 9-slice scaling, export du SWC et quelques CSS embêtant pour que ça marche. Ou encore passer par des classes complexes en AS3 directement dans Flex Builder. Maintenant, nous pouvons dessiner tout nativement en MXML avec un minimum d'efforts. Cela comprend aussi le type de dessin vectoriel, donc un seul composant suffit pour toutes les tailles.

Le coeur de ce nouveau système de skinning réside dans les composants Spark. Chaque composant vous permet de spécifier un type de skin en utilisant les attributs de styles skinClass. Dans ce tutorial, vous allez créer un skin personnalisé pour le composant SkinnableContainer.

Cliquez ici pour télécharger la source de ce Tutorial Flash Builder 4

1. SkinnableContainer 

C'est une classe de base pour tous les composants de type container de Spark. 

Un container est à la base un composant (component) normal qui a une zone (area) que les développeurs peuvent utiliser pour ajouter des sous-composants (sub-components) comme par exemple un bouton, un label, etc… l'element le plus proche dans Flex 3 est le Canvas, qui n'existe d'ailleurs plus dans Flex 4.

Le skin par défaut pour le SkinnableContainer est minime, en réalité il contient uniquement un container area qui est nécessaire pour l'ajout des composants. nous allons commencer par ajouter un SkinnableContainer pour notre application test en le glissant depuis le tree de la bibliothèque de composants ou encore en écrivant directement sa syntaxe dans Flash Builder :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<s:Application 
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo" 
  minWidth="1024" minHeight="768">
 
 <s:SkinnableContainer x="10" y="10" width="300" height="250" />
 
</s:Application>

Si vous lancez l'application maintenant, vous verrez un écran blanc car le skin par défaut ne contient aucun élément graphique.

2. Création de la class de skin & application au SkinnableContainer

Maintenant nous devons créer le skin de notre Class MXML. Créez un nouveau dossier nommé : « skins » et ajoutez y un nouveau composant MXML nommé : SimplePanelSkin.mxml. Soyez sur que ce composant ai bien pour base spark.components.supportClasses.skin comme ci-dessous :

Nous avons maintenant besoin de dire à notre composant SkinnableContainer dans le fichier principal de l'application d'utiliser notre classe personnalisée. Pour ce faire, nous avons juste à appliquer l'attribut skinClass au composant :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<s:Application 
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo" 
  minWidth="1024" minHeight="768">
 
 <s:SkinnableContainer x="10" y="10" width="300" height="250"
  skinClass="skins.SimplePanelSkin"/>
 
</s:Application>

3. Ajout du groupe de contenu (contentGroup)

Si vous lancez l'application maintenant, vous recevrez une erreur en la démarrant car celle-ci requiert la partie du skin « contentGroup » qui n'est actuellement pas présente dans notre composant de SimplePanelSkin.mxml (cf. Adobe Life Docs). Donc, nous voyons que la partie contentGroup est obligatoire dans notre classe de skin. Nous allons donc l'ajouter simplement dans notre fichier SimplePanelSkin.mxml :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<s:Skin 
  xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/halo" 
  width="400" height="300">
 
    <!-- Content area -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0">
    	<s:layout>
    		<s:BasicLayout/>
    	</s:layout>
    </s:Group>
 
</s:Skin>

Notez que nous avons donné un id au « Group element » qui a pour valeur   »contentGroup » – le système de skinning Spark regarde si celui est présent et sait donc ou ajouter les sous-contenus. Nous spécifions aussi qu'il utilise le « BasicLayout layout system« . Ceci autorise les développeurs à mettre des sous contenus avec n'importe quelle position (x,y). Nous pouvons alternativement utiliser un Titre, des types Horizontal ou Vertical layout si nous le voulons pour automatiser la position des sous-composants (sub components).

4. Définition des States 

Lancez maintenant l'application, vous allez recevoir un nouveau message d'erreur vous informant que l'état normal (state) n'a pas été défini dans votre composant de skin personnalisé.

Un autre petit tour dans la documentation nous montre qu'il faut ajouter les deux états de states basiques, à savoir : normal et disable. Par ailleurs, nous n'avons pas forcément besoin de définir des skins personnalisés pour chaque states, nous devons juste les définir. Cet ajout est très simple à réaliser, nous allons ajouter un array avec les deux demandées :

 MXML | 
 Copier le code
 
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

Si nous lançons maintenant notre application, nous n'aurons rien, écran blanc / aucune erreur. Nous avons donc défini un skin personnalisé pour un container SkinnableContainer qui est fonctionnel mais sans aucun contenu.

5. Ajout d'éléments graphiques

Amusons-nous maintenant à ajouter un peu de contenu. Nous allons insérer un rectangle gris autour du composant avec des bords arrondis (rounded borders). Soyez sur que ce code apparaisse en dessous du contentGroup :

 MXML | 
 Copier le code
 
<!-- Background -->
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5" >
 <s:stroke>
 <s:SolidColorStroke color="#555555" />
 </s:stroke>
</s:Rect>

Lancez l'application et vous verrez que nous avons maintenant un « border » ! Maintenant, nous allons appliquer un dégradé (gradient) à l'intérieur de border :

 MXML | 
 Copier le code
 
<!-- Background -->
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5" >
 <s:stroke>
 <s:SolidColorStroke color="#555555" />
 </s:stroke>
 <s:fill>
 <s:LinearGradient rotation="90" >
 <s:GradientEntry color="0xeeeeee" />
 <s:GradientEntry color="0xfdfdfd" />
 </s:LinearGradient>
 </s:fill>    		
</s:Rect>

Et un joli drop shadow juste qui va s'afficher juste derrière le contentGroup :

 MXML | 
 Copier le code
 
<!-- Drop shadow -->
<s:filters>
 <s:DropShadowFilter blurX="4" blurY="4" alpha="0.32" 
  distance="3" angle="45" knockout="false" />
</s:filters>

Relativement simple non ? En principe votre composant devrait ressembler à ceci :

Cet exemple vous montre l'étendu de ce que vous pouvez créer à travers le SkinnableContainer. A la base, vous avez la possibilité de dessiner (draw) des « primitives shapes » avec des bords, des remplissages (fills) et des filtres comme dans la majorité des composants Spark (Spark components) Images, Buttons, SimpleText areas etc… nous allons vous rapdiement comment ajouter un peu de contenu.

6. Ajout de sous-composants (sub components)

Rappelez-vous quand nous avons créé notre contentGroup. Comme vous le savez, celui-ci est utilisé pour ajouter des sous-composants (sub components). Nous pouvons par ailleurs ajouter ceux-ci directement dans l'application principale au coeur du SkinnableContainer. Nous allons donc ajouter un bouton et un label, représenté dans le code ci-dessous :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/27/tutorial-flash-builder-4-flex-gumbo-skinning-skinnablecontainer -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" viewSourceURL="srcview/index.html">
 
 <s:SkinnableContainer skinClass="skins.SimplePanelSkin"  x="10" y="10" width="300" height="250" >
 <mx:Label y="70" text="Ceci est un label - Flash-Builder-Tutorial.fr" horizontalCenter="0"/>
 <s:Button y="99" label="Bouton" horizontalCenter="0"/>
 </s:SkinnableContainer>
 
</s:Application>

Et aura si tout c'est bien passé pour vous, le rendu suivant (nécessite Flash Player 10) :

Cliquez ici pour télécharger la source de ce Tutorial Flash Builder 4

Conclusion

Nous avons montré dans ce tutorial comment créer une base MXML de skin pour un composant Spark SkinnableContainer. Comme vous pouvez le voir, c'est une chose relativement simple. Dans les parties futures de ce tutorial, nous verrons comment gérer les stats, les CSS, de créer au final un composant personnalisé Spark (custom Spark Component)

Source du tutorial : Preinvent Blog (en)