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

Flex Styles: Instances de Styles et Inline Style

Les instances de Style sont les styles fixés pour une instance spécifique d'un composant. Vous pouvez fixer ces instances de Style en utilisant du MXML ou de l'ActionScript. Fixer les instances de Style en utilisant du MXML est souvent appelé "inline style" car vous spécifiez simplement la valeur d'un attribut dans le tag du composant.Voici un exemple d'une bouton (Button) pour lequel on modifie le style "color":

<mx:Button label="Exemple" color="red"/>

Vous pouvez fixer plusieurs styles "inline" à la fois. Voici le même bouton mais avec d'autres styles en inline:

<mx:Button label="Exemple" color="red" borderColor="yellow" cornerRadius="10" fontStyle="italic"/>

Vous pouvez aussi fixer les Styles en utilisant de l'ActionScript via la méthode setStyle(). La méthode setStyle() est définie dans UIComponent, ce qui signifie que vous pouvez appeler cette méthode pour tous les composants (visuels) Flex. La méthode setStyle() requiert 2 paramètres:

• le nom de la propriété de style à modifier ("color" ou "fontSize" par exemple)
• la valeur de cette propriété

Voici un exemple qui fixe le style color d'un bouton:

button.setStyle("color", "red");

Si vous voulez modifier plusieurs styles à la fois pour un composant, vous devez utiliser la méthode setStyle() plusieurs fois.

L'exemple suivant applique 4 styles à un composant:

button.setStyle("color", "red");
button.setStyle("borderColor", "yellow");
button.setStyle("cornerRadius", "10");
button.setStyle("fontStyle", "italic");

Si vous appliquer des styles en utilisant setStyle(), vous pouvez modifier les styles à l'exécution (Runtime). Cela signifie que vous pouvez utiliser setStyle() pour changer un style même s'il à été défini en inline.

L'exemple suivant fixe le style de couleur à la fois en inline et en AS3. Puisque setStyle() est appelé après que le style inline soit appliqué, le label du bouton apparaîtra en rouge plutôt qu'en vert:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initializeHandler(event)"
	>
	<mx:Script>
		<![CDATA[
			public function initializeHandler(event:Event):void{
				button.setStyle("color", "red");
			}
		]]>
	</mx:Script>

	<mx:Button id="button" label="Exemple" color="green"/>

</mx:Application>

Si vous voulez retrouver la valeur d'un style appliqué à une instance spécifique, vous pouvez utiliser la méthode getStyle(). La méthode getStyle() requiert un paramètre spécifiant le nom du style à récupérer. Cette méthode retourne la valeur courante du Style. L'exemple suivant retrouve la valeur du style "color" du bouton et l'affiche:

<mx:Button id="button" label="Exemple" color="red"/>
<mx:TextInput text="{button.getStyle('color').toString(16)}"/>