Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Styles: Utilisation des CSS et des sélecteurs (Class / Type)

Vous pouvez utiliser les CSS pour définir des styles pour vos composants. Bien que vous pouviez utiliser les CSS à l'exécution, nous allons voir comment ils sont utilisés à la compilation Flex.CSS est une méthode standard pour appliquer des styles à travers des plate-formes, langages et frameworks. La syntaxe des CSS en Flex est identique à celle utilisée pour le HTML.

Par exemple, voici un sélecteur de classe pour une application Flex, écrit en CSS:

.example {
	color:red;
}

Bien que la syntaxe des CSS dans Flex soit identique à celle utilisée pour le HTML, toutes les propriétés HTML ne sont pas disponibles dans Flex.

Quand vous définissez des CSS pour une application RIA Flex, vous avez deux options de base: feuilles de styles externes ou définitions de style locales. Dans les deux cas, le CSS est compilé dans l'application donc ces options sont fonctionnellement identiques. Cependant, il y a des avantages aux deux méthodes. Les feuilles de style externes (External Stylesheets) vous permettent de faire une meilleure distinction entre la mise en page (layout MXML) et le style (documents CSS externes). De plus, quand utilisez des feuilles CSS externes, vous pouvez définir les styles à un endroit et les utiliser à l'intérieur d'un document MXML sans avoir à les redéfinir. De l'autre côté, les définitions locales sont plus pratiques quand vous voulez utiliser seulement un fichier MXML.

Une feuille CSS externe est un fichier texte que vous compilez dans une application Flex en utilisant l'attribut "source" du tag MXML Style.

La code suivant est un exemple de tag Style qui compile une CSS externe nommée styles.css. Les styles définis dans ce document sont ensuite disponibles dans le document MXML dans lequel le tag Style apparaît.

<mx:Style source="styles.css"/>

Si vous voulez utiliser des définitions locales, vous pouvez simplement placer le code CSS dans la balise Style comme ceci:

<mx:Style>
	.example {
		color:red;
	}
</mx:Style>

Que vous utilisiez des CSS externes ou locales, vous pouvez définir les mêmes sélecteurs de style, de type ou de classe. Les sélecteurs de classe commencent toujours par un point suivi du nom de la classe comme dans l'exemple précédent. L'exemple précédent définit uniquement un style pour un sélecteur. L'exemple suivant en défini deux:

<mx:Style>
	.example {
		color:red;
		font-style: italic;
	}
</mx:Style>

Quand vous voulez appliquer un sélecteur de classe à un composant, vous devez fixer la propriété styleName du composant. La valeur de styleName devra être le nom de la classe en question sans le point. L'exemple suivant fixe la propriété styleName d'un bouton avec la classe de l'exemple précédent:

<mx:Button label="Exemple" styleName="example"/>

Si vous voulez utiliser la propriété styleName d'un composant en utilisant Action Script, utiliser cette syntaxe:

button.styleName="example";

L'autre type de sélecteur est appelé sélecteur de type, est il est automatiquement appliqué à tous les composants du type spécifié par le nom du sélecteur. Par exemple, vous pouvez définir un sélecteur de type appelé Button, et il sera automatiquement appliqué à tous les boutons:

Button {
	color:red;
}

Les sélecteurs de classe sont toujours prioritaires par rapport aux sélecteur de type. L'exemple suivant définit un sélecteur de type (Button) et un sélecteur de classe. Dans ce cas, le texte sera en italique car c'est le sélecteur de type qui le définit comme tel. Cependant, puisque le sélecteur de classe définit la couleur comme vert, le bouton sera vert et non pas rouge:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	>
	<mx:Style>
		Button {
			color: red;
			font-style:italic;
		}
		.example {
			color: green;
		}
	</mx:Style>

	<mx:Button label="Exemple" styleName="example"/>

</mx:Application>

Ni les CSS externes, ni les CSS locales ont une priorité particulière. Si vous utilisez les deux dans un document, vous verrez que l'ordre dans lequel elle apparaissent dans le document détermine lequel prend le dessus. Si on prend par exemple pour illustrer cela, avec une CSS externe styles.css contenant uniquement ce sélecteur de classe:

.example {
	color:red;
	font-style: italic;
}

L'exemple suivant utilise cette feuille CSS externe mais aussi une définition locale du même sélecteur. Dans ce cas, le bouton à un label vert en italique car la définition locale prend le dessus car elle apparaît après l'inclusion de la CSS externe dans le code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	>
	<mx:Style source="styles.css"/>
	<mx:Style>
		.example {
			color: green;
		}
	</mx:Style>

	<mx:Button label="Exemple" styleName="example"/>

</mx:Application>

Si vous inversez l'ordre des tags Styles, vous verrez que le label du bouton est maintenant rouge.

Propriétés de Style

En Flex, tous les noms de propriétés de style doivent être capables d'être traitées comme variables. C'est pour cette raison qu'il est nécessaire pour tous les noms de propriétés de style de suivre les même règles que pour les variables. Ce qui veut dire qu'elles ne doivent contenir que des caractères alphabétiques ou numériques. Notamment, les variables de peuvent contenir de tiret. Cependant, le CSS traditionnel supporte les propriétés contenant un tiret (font-family par ex.), et pour cette raison, Flex le supporte aussi. En fait, Flex va convertir cette valeur avec tiret en une valeur normée. Par exemple, si vous voulez fixer le nom de la police, vous devez utiliser la propriété de Style font-family ou fontFamily en CSS. Cependant, vous ne pouvez pas pas utiliser de valeur avec des tirets en ActionScript quand vous utlisez setStyle() ou des style inline.