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

Flex States: Création et application d'états simples

Vous pouvez créer des états aussi bien au niveau de l'application qu'au niveau d'un composant. Le processus de création d'états est le même dans les deux cas. Bien que l'on puisse créer des états en ActionScript, il est bien plus commun et pratique de créer ses states par le biais du MXML.

Création d'états Flex (Flex states)

Chaque application a une propriété states qui permet de définir un tableau d'états. Depuis le MXML, vous pouvez utiliser cette syntaxe pour peupler ce tableau d'états:

<mx:states>
<!-- State elements -->
</mx:states>

Les States sont des instances de la classe mx.states.State, et on crée un nouvel état en utilisant le tag MXML <mx:State>. Lorsque vous créez un nouvel état, vous devez, au minimum, lui spécifier la propriété "name". La propriété "name" d'un état est l'identifiant par lequel il sera référencé.

La portion de code suivante crée un nouvel état dont le nom est exampleState:

<mx:State name="exampleState"></mx:State>

A l'intérieur du tag <mx:State>, vous pouvez spécifier la définition du style. Une définition de style peut consister à:

• Ajouter ou supprimer des composants
• Assigner des propriétés
• Assigner des styles
• Assigner des écouteurs d'evenements (event handler)

Application d'un état Flex

Par défaut, l'état de base (base state) est appliqué à l'application ou au composant. Vous pouvez définir plusieurs états pour chaque application / composant, mais vous ne pouvez appliquer qu'un seul état à la fois. Vous pouvez appliquer un état en utilisant la propriété "currentState".

L'exemple suivant définit un état qui ajoute une CheckBox. Cet état est appliqué quand l'utilisateur clique sur le bouton à l'état de base.

<?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="newCheckbox">
			<mx:AddChild relativeTo="{vbox}">
				<mx:CheckBox id="checkbox" label="New Checkbox" />
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<mx:VBox id="vbox">
		<mx:Button  label="Ajouter" click="currentState='newCheckbox'"/>
	</mx:VBox>
</mx:Application>

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

On peut voir que la valeur de la propriété currentState est une chaine spécifiant le nom de l'état à appliquer. Dans l'exemple précédent, lorsque l'utilisateur clique sur le bouton, la valeur newCheckbox est assigné à la propriété currentState de l'application. Flex cherche ensuite un état dont l'attribut name correspond à newCheckbox et applique cet état. Dans cet exemple, l'état utilise un tag <mx:AddChild> pour créer une nouvelle checkbox à l'instance de VBox.

Si vous voulez revenir à l'état de base, vous pouvez assigner une valeur null ou une chaine vide à la propriété currentState

La propriété currentState est une propriété héritée de la class UIComponent. Cela veut dire que chaque application et chaque composant à sa propre propriété currentState, et peut appliquer des états indépendemment.