Test : Modifier l'aspect d'une application
Configuration requise
Niveau de l'utilisateur
Toutes
<?xml version="1.0" encoding="utf-8"?>
<s:Application ... >
(...)
<s:Button id="biggerBtn" skinClass="BiggerButtonSkin" .../>
(...)
</s:Application>
BiggerButtonSkin.mxml
<?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/mx" xmlns:local="*">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="disabled" />
<s:State name="down" />
<s:State name="over" />
<s:State name="up" />
</s:states>
<local:BiggerButton/>
</s:Skin>
BiggerButton.fxg
<?xml version="1.0" encoding="UTF-8"?>
<Graphic version="1.0"
xmlns="http://ns.adobe.com/fxg/2008"
xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks"
viewHeight= "25" viewWidth= "25">
<Library></Library>
<Group id="Page_1" fw:type="page">
<Group id="State_1" fw:type="state">
<Group id="Layer_1" fw:type="layer">
<Path winding="evenOdd" blendMode="normal" alpha="1">
data="M 2 13 C 2 7 7 2 13 2 C 18 2 23 7 23 13 C 23 18 18 23 13 23 C 7 23 2 18 2 13 Z " >
<fill>
<SolidColor color="#bfb59f" alpha="1"/>
</fill>
<stroke>
<SolidColorStroke color="#403029" weight="3"/>
</stroke>
</Path>
<Path winding="evenOdd" data="M 13 6 L 13 18" blendMode="normal" alpha="1">
<stroke>
<SolidColorStroke color="#403029" weight="2"/>
</stroke>
</Path>
<Path winding="evenOdd" data="M 7 12 L 19 12" blendMode="normal" alpha="1">
<stroke>
<SolidColorStroke color="#403029" weight="2"/>
</stroke>
</Path>
</Group>
</Group>
</Group>
</Graphic>
Didacticiel
Dans ce didacticiel, vous allez créer un habillage de composant avec des éléments graphiques entièrement nouveaux, sans utiliser le code des éléments graphiques d'un habillage parent.
Étape 1 : Créez un nouveau fichier d'habillage pour un contrôle Button.
En mode Création, sélectionnez le bouton de test Bigger de l'état Departments puis, dans la vue Propriétés, cliquez sur le bouton en regard du champ Habillage et sélectionnez Créer un habillage. Dans la boîte de dialogue Création d'un(e) Habillage MXML, nommez l'habillage BiggerButtonSkin et désélectionnez Créer en tant que copie de (voir Figure 16).
Étape 2 : Vérifiez la classe de l'habillage.
Dans BiggerButtonSkin.mxml, passez en mode Source et examinez le code.
Étant donné que vous avez désigné un contrôle Button comme composant hôte, les valeurs des balises HostComponent et states sont déjà définies.
<s:Skin xmlns:fx=http://ns.adobe.com/mxml/2009…>
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="down" />
<s:State name="over" />
<s:State name="up" />
</s:states>
</s:Skin>
Étape 3 : Examinez le code des éléments graphiques.
Copiez le fichier BiggerButton.fxg figurant parmi les fichiers d'exemple de ce module (ZIP, 223 Ko) et collez-le dans le dossier src du projet. Ouvrez le fichier.
Ce fichier a été créé à partir d'un dessin Fireworks, puis via Commandes > Exporter au format FXG. Vous pouvez également créer des fichiers FXG à l'aide d'Illustrator ou de Photoshop.
Le fichier FXG contient du code permettant de créer des éléments graphiques. Vous pouvez copier et coller ce code dans la classe BiggerButtonSkin ou vous contenter de le référencer, comme nous allons le faire plus loin.
Étape 4 : Ajoutez les éléments graphiques à l'habillage.
Après la section states du fichier BiggerButtonSkin.mxml, sélectionnez la classe FXG BiggerButton à l'aide de l'assistant de code (voir Figure 18).
L'assistant de code a automatiquement écrit l'instruction d'affectation de l'espace de nom : xmlns:local="*".
Cette instruction indique au compilateur où trouver cette classe. Vous placez le fichier FXG dans le même dossier que le fichier MXML (package par défaut), de sorte que le caractère * indique simplement de rechercher les fichiers dans ce même dossier.
La classe d'habillage doit se présenter comme suit :
<?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/mx" xmlns:local="*">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="disabled" />
<s:State name="down" />
<s:State name="over" />
<s:State name="up" />
</s:states>
<local:BiggerButton/>
</s:Skin>
Enregistrez le fichier et revenez dans TestDrive.mxml en mode Création. Le bouton Bigger doit y figurer avec le nouvel habillage (voir Figure 19). Placez-le à proximité du bouton Chart Data.
Exécutez l’application. Cliquez sur le bouton Departments, puis sur le bouton Bigger. Les caractères du texte du DataGrid doivent être plus grands ; le bouton fonctionne exactement comme avant, mais son aspect a changé.
Félicitations ! Dans ce module, vous avez appris à modifier l'aspect de l'application à l'aide de fonctions de style et d'habillage.
Pour approfondir vos connaissances, consultez le module de test suivant, qui décrit les composants de représentation graphique Flex.
Pour en savoir plus
Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :
Documentation
- Génération et modification d’habillages pour des composants Spark
- Importation d’illustrations d’habillage pour les composants MX
- Prototyping Flex applications with Fireworks CS4
- Save in FXG format using Illustrator CS4