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

Flex States: Modifier le Style d'un Composant

En utilisant le tag <mx:SetStyle>, vous pouvez modifiez le style d'un composant en définissant son état. On modifie le style quand on veut changer l'apparance (comme la couleur ou la police d'écriture) d'un composant lorsqu'il change d'état. Le tag <mx:SetStyle> a les mêmes attributs que le tag <mx:SetProperty>:

• "target": référence vers l'objet auquel vous voulez appliquer la modification de style
• "name": nom du style à modifier
• "value": spécifie la valeur à appliquer au style à modifier

L'exemple suivant utilise 3 boutons pour basculer entre 3 états. Chaque état modifie la couleur des CheckBox pour mettre en valeur les groupes de transports (terre, air et marin). Par exemple, quand l'utilisateur clique sur le bouton Terre, les labels voiture, train et moto vont être affichée avec une police rouge.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal"
    verticalAlign="middle"
     viewSourceURL="srcview/index.html">
	<mx:states>
		<mx:State name="terreState">
			<mx:SetStyle target="{auto}" name="color" value="0xFF0000" />
			<mx:SetStyle target="{train}" name="color" value="0xFF0000" />
			<mx:SetStyle target="{moto}" name="color" value="0xFF0000" />
		</mx:State>
		<mx:State name="airState">
			<mx:SetStyle target="{helico}" name="color" value="0xFF0000" />
			<mx:SetStyle target="{avion}" name="color" value="0xFF0000" />
		</mx:State>
		<mx:State name="marinState">
			<mx:SetStyle target="{bateau}" name="color" value="0xFF0000" />
			<mx:SetStyle target="{sousmarin}" name="color" value="0xFF0000" />
		</mx:State>
	</mx:states>
	<mx:VBox id="vbox">
		<mx:HBox>
			<mx:Button id="terre" label="Terre" click="currentState='terreState'"/>
			<mx:Button id="air" label="Air" click="currentState='airState'"/>
			<mx:Button id="marin" label="Marin" click="currentState='marinState'"/>
		</mx:HBox>
		<mx:CheckBox id="helico" label="Helicoptère"/>
		<mx:CheckBox id="moto" label="Moto"/>
		<mx:CheckBox id="auto" label="Auto"/>
		<mx:CheckBox id="avion" label="Avion"/>
		<mx:CheckBox id="train" label="Train"/>
		<mx:CheckBox id="bateau" label="Bateau"/>
		<mx:CheckBox id="sousmarin" label="Sous-marin"/>
	</mx:VBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application