Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex 4 en un jour - CSS et Thèmes

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 01 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.

CSS

Flex 4 améliore énormément son support du CSS pour mettre en forme une application Flex. Tout d'abord, vous devez spécifier l'espace de noms de la bibliothèque Flex que vous voulez personnaliser en utilisant CSS. Par exemple, voici un fichier CSS qui définit les styles pour un contrôle Halo Button et un contrôle Spark Button:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button {
	color:#ffffff;
}
mx|Button {
	color:#ffffff;
}

Vous pouvez utiliser des classes multiples pour le même composant. Supposons que vous ayez définit deux classes CSS appelées buttonOk et buttonGreen, vous pouvez les appliquer toutes les deux de cette façon:

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/mx";
	.buttonOK {
		font-size: 12;
	}
	.buttonGreen {
		color: #00ff00;
	}
</fx:Style>
<s:Button styleName=”buttonOk buttonGree”/>

Vous pouvez définir et appliquer des styles en utilisant des sélecteurs d'ID:

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/mx";
	#myButton {
		color:#ffffff;
	}
</fx:Style>
<s:Button id=”myButton”/>

Vous pouvez utiliser des sélecteurs de descendance. Par exemple, vous pouvez appliquer un style uniquement sur les boutons d'un conteneur Spark Panel:

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/mx";
	s|Panel s|Button {
		color:#ffffff;
	}
</fx:Style>
<s:Panel>
	<s:Button label="White label"/>
</s:Panel>
<s:Button label="Black label"/>

Vous pouvez utiliser des pseudo sélecteurs:

<fx:Style>
	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/mx";
	s|Button:over {
		color: #000000;
	}
	s|Button:up {
		color: #ffffff;
	}
</fx:Style>
<s:Button label=”My Button”/>

Vous pouvez appliquer une feuille de style à l'exécution en compilant le fichier CSS dans un fichier SWF et charger le fichier SWF en utilisant la méthode loadStyleDeclaration() de la classe StyleManager. Voici les étapes de base pour y parvenir:

  • Créer un fichier CSS; par exemple myStyle.css
  • Dans Flash Builder, choisir le fichier dans l'explorateur de projets et faites un clic droit dessus. Depuis le menu contextuel, sélectionner Compile CSS to SWF. Vous devriez trouver un fichier myStyle.swf à l'intérieur du dossier bin-debug.
  • Lorsque vous voulez charger cette feuilles de styles à l'exécution, vous effectuez un appel comme celui-ci:
    styleManager.loadStyleDeclarations("myStyle.swf");

    Le premier paramètre est le chemin absolu ou relatif vers le fichier SWF et le second paramètre spécifie si la feuille de styles est appliquée immédiatement après son chargement (c'est le comportement par défaut) ou non.

Thèmes Flex

Un thème définit l'apparence d'une application. Il peut définir seulement quelques styles comme la famille de police, la taille de caractères ou alors il peut redéfinir tous les composants Flex d'interface utilisateur, en utilisant un mélange de CSS, images et skins.

Le thème par défaut pour une application Flex 4 est appelé Spark. Ainsi tous les composants Flex d'interface utilisateur ont par défaut ce thème, y compris les composants Halo (Flex 3 components). Vous pouvez changer le thème en utilisant l'argument de thème du compilateur. Si vous utilisez Flash Builder 4, alors vous avez une page de propriétés qui facilite l'application d'un thème à une application, ou l'ajout de nouveaux thèmes.

Flash Builder offre un grand choix de thèmes. Si vous n'êtes pas satisfait d'eux, vous pouvez créer vos propres thèmes. Vous pouvez appliquer de multiples thèmes à un même projet. Cependant, si ces thèmes définissent l'apparence pour le même élément, alors comme avec les CSS, c'est le dernier thème appliqué qui prend le dessus.

Si vous voulez avoir les composants Halo avec l'apparence Flex 3, vous devez utiliser le thème Halo. Veuillez noter que les composants Spark utilisent la même skin que celle définie par le thème Spark.

Si vous voulez voir le code permettant la création d'un thème, aller dans le dossier Flex 4 SDK/frameworks/themes/.

Création d'un thème Flex

En général, les thèmes sont sous la forme d'un fichier SWC. A l'intérieur, vous avez un fichier CSS et des ressources de mise en forme. Les ressources de mise en forme peuvent être des images (JPEG, GIF, PNG) ou des ressources de programmation compilées dans un fichier SWF.

Une autre façon de créer un thème est d'utiliser uniquement un fichier CSS et de l'utiliser sans le compiler dans un fichier SWF. Ou vous pouvez avoir un fichier CSS et un fichier SWF (c'est de cette façon qu'est créé le thème AeonGraphical).

Supposons que vous ayez créé ce fichier CSS (où SpecialButtonSkin et SpecialCheckBoxSkin sont deux classes de skin de programmation que vous avez créées en MXML; ce sont leurs noms de classe):

//mycss.css
@namespace s "library://ns.adobe.com/flex/spark";
s|Button {
	skinClass: ClassReference("SpecialButtonSkin");
}
s|CheckBox {
	skinClass: ClassReference("SpecialCheckBoxSkin");
}
s|panel {
	color:#ff0000;
}

Vous pouvez alors utiliser le compilateur de composants en ligne de commande (compc) avec les options include-file et include-classes pour inclure les ressources images et les skins. Vous utilisez l'option o pour spécifier le fichier SWC de sortie. Voici un exemple:

compc -source-path c:/projects/flex/mytheme
-include-file mycss.css c:/projects/flex/mytheme/mycss.css
-include-classes SpecialButtonSkin SpecialCheckBoxSkin
-o c:/projects/flex/MyTheme.swc

Au lieu de passer tous ces différents arguments dans la ligne de commande, vous pouvez créer un fichier de configuration Flex et le passer comme argument à l'option load-config de la commande compc.

compc –load-config myconfig.xml

Voici un exemple d'un fichier de configuration Flex:

<?xml version="1.0"?>
<flex-config>
	<output>MyTheme.swc</output>
	<include-file>
		<name>mycss.css</name>
		<path>c:/projects/flex/mytheme/mycss.css</path>
	</include-file>
	<include-classes>
		<class> SpecialButtonSkin </class>
		<class> SpecialCheckBoxSkin</class>
	</include-classes>
</flex-config>

Une autre façon de compiler un fichier de thème SWC est de créer un projet Flex Library dans Flash Builder.

Vous pouvez en apprendre plus en suivant ce lien.

Appliquer un thème

Vous pouvez appliquer un thème en utilisant l'option theme du compilateur MXML:

mxmlc -theme="C:\Program Files\Adobe\Flex\sdks\4.0.0\frameworks\themes\Halo\halo.swc" MyApp.mxml

Vous pouvez également le faire en ouvrant la boite de dialogue des propriétés du projet Flash Builder que vous souhaitez personnaliser, et y sélectionner le thème que vous voulez utiliser (si le thème n'est pas proposé, vous devrez d'abord l'importer avant de pouvoir l'appliquer).

Une dernière remarque: Vous ne pouvez pas appliquer un thème en ajoutant simplement le fichier SWC dans le dossier libs. Si vous voulez appliquer des thèmes à l'exécution, voyez le chapitre CSS ci-dessus (en général, on utilise un fichier SWF à la place d'un fichier SWC et on appele la méthode loadStyleDeclarations de la classe StyleManager).







Page précédente | Sommaire | Page suivante