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

Flex States: Ajouter et Supprimer des Composants

L'utilisation la plus commune des states est l'ajout et la suppression de composants. Vous pouvez utilisez le tag <mx:AddChild> pour ajouter un ou des composants. De la même manière, on utilisera le tag <mx:RemoveChild> pour supprimer un composant. L'exemple suivant défini un état nommé newTextInput qui ajoute un champ texte.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:states>
		<mx:State name="newTextInput">
			<mx:AddChild>
				<mx:TextInput id="textInput"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<mx:Button id="button" label="Ajouter un champ" click="currentState='newTextInput'"/>
</mx:Application>

Le comportement par défaut du tag <mx:AddChild> est d'ajouter un/des composants à l'application ou au composant pour lequel l'état est défini. Cependant, si vous voulez définir un composant cible, utilisez l'attribut "relativeTo". L'exemple suivant ajoute un nouveau bouton comment enfant d'une VBox ayant pour id "vbox".

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
	<mx:states>
		<mx:State name="newTextInput">
			<mx:AddChild relativeTo="{vbox}">
				<mx:TextInput id="textInput"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<mx:VBox id="vbox">
		<mx:CheckBox id="checkbox1" label="One"/>
		<mx:CheckBox id="checkbox2" label="Two"/>
		<mx:Button id="button" label="Ajouter un champ" click="currentState='newTextInput'"/>
	</mx:VBox>
</mx:Application>

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

Lorsque l'on ajouter un composant comme enfant, cette nouvelle instance est ajoutée comme dernier enfant du composant cible par défaut. Par exemple, dans l'exemple précédent, le nouveau bouton est ajouté en dessous des deux CheckBox de l'état de base (base state). Cependant, vous pouvez contrôler où les nouvelles instances sont ajoutées en utilisant l'attribut "position". La valeur par défaut est "lastChild" mais vous pouvez spécifier "firstChild" ajouter la/les nouvelles instance au début du conteneur cible.

Quand vous utiliser "lastChild" ou "firstChild" comme valeur de position, la valeur de cible est par rapport au conteneur auquel vous voulez ajouter le composant. Lorsque vous utilisez "before" ou "after" pour valeur de position, la cible est interprétée comme un enfant du composant auquel vous voulez ajouter le composant. Si vous voulez ajouter un composant enfant immediatement avant ou après un composant existant, vous pouvez spécifier directement l'enfant comme valeur de cible et utiliser la valeur "before" ou "after" pour l'attribut "position".

Pour ajouter le champ texte immédiatement après la première CheckBox, modifier simplement la ligne avec le tag <mx:AddChild pour la remplacer par:

<mx:AddChild relativeTo="{checkbox1}" position="after">

Dans le cas d'une suppression d'un composant avec le tag <mx:RemoveChild>, la manipulation est généralement plus simple que l'ajout de composant. Le tag <mx:RemoveChild> ne requiert qu'un attribut nommé "target". L'attribut "target" permet de spécifier la référence au composant que vous voulez supprimer.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
	<mx:states>
		<mx:State name="noCheckBoxes">
			<mx:RemoveChild target="{checkbox1}"/>
			<mx:RemoveChild target="{checkbox2}"/>
		</mx:State>
	</mx:states>
	<mx:VBox id="vbox">
		<mx:CheckBox id="checkbox1" label="One"/>
		<mx:CheckBox id="checkbox2" label="Two"/>
		<mx:Button id="button" label="Supprimer les CBox" click="currentState='noCheckBoxes'"/>
	</mx:VBox>
</mx:Application>

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