Adobe^® Flex^™ Tutorial

Un trigger se produit à l'intérieur d'une application Flex pour jouer un effet. L'utilisation des triggers permet de créer et d'appliquer des effets entièrement en MXML. Ce n'est pas nécéssairement mieux ou pire que d'utiliser la méthode play(). C'est juste une autre manière d'appliquer des effets.

Dans la terminologie Flex, un trigger combiné avec un effet est appelé un behavior (comportement)

Il existe des triggers standards, disponible pour tous les composants. La liste suivante présente ces triggers communs:

• addedEffect: Le composant a été ajouté à la liste d'affichage
• removedEffect: Le composant a été supprimé de la liste d'affichage
• creationCompleteEffect: Le composant a été crée et initialisé
• focusInEffect: Le composant a reçu le focus
• focusOutEffect: Le composant a perdu le focus
• hideEffect: Le composant a été caché (rendu non-visible)
• showEffect: Le composant a été affiché (rendu visible)
• rollOverEffect: L'utilisateur a passé sa souris sur le composant
• rollOutEffect: L'utilisateur à passé la souris hors du composant
• mouseDownEffect: L'utilisateur a préssé le bouton gauche de la souris au dessus du composant
• mouseUpEffect: L'utilisateur a relaché le bouton gauche de la souris au dessus du composant
• moveEffect: Les propriétés x et/ou y du composant ont changé
• resizeEffect: La hauteur et/ou la largeur du composant ont changé

Vous pouvez assigner l'instance d'un effet à un trigger pour un composant et cet effet sera appliqué automatiquement que le trigger se déclenchera. Lorsque vous utilisez les triggers, vous ne devez pas spécifier un target (cible) à cet effet. Au lieu de cela, le target est automatiquement défini lorsque l'effet est déclenché.

L'exemple suivant utilise des triggers pour appliquer un effet Move à chacun des 4 champs de saisie lorsqu'ils sont crées.

 <?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:Move id="moveEffect" xFrom="-100"/>

	<mx:VBox>
		<mx:TextInput id="textInput1" creationCompleteEffect="{moveEffect}"/>
		<mx:TextInput id="textInput2" creationCompleteEffect="{moveEffect}"/>
		<mx:TextInput id="textInput3" creationCompleteEffect="{moveEffect}"/>
		<mx:TextInput id="textInput4" creationCompleteEffect="{moveEffect}"/>
	</mx:VBox>
</mx:Application>

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

Bien sûr, vous pouvez appliquer les effets aux conteneurs en utilisant les triggers. La portion de code suivant applique l'effet Move au conteneur plutôt qu'au composants enfant.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
	verticalAlign="middle"
	>

	<mx:Move id="moveEffect" xFrom="-100"/>

	<mx:VBox creationCompleteEffect="{moveEffect}">
		<mx:TextInput id="textInput1" />
		<mx:TextInput id="textInput2" />
		<mx:TextInput id="textInput3" />
		<mx:TextInput id="textInput4" />
	</mx:VBox>
</mx:Application>

Parfois, les triggers sont la manière la plus simple d'appliquer un effet. Comme vous avez pu le voir, vous avez eu besoin de moins de lignes de code pour appliquer un effet en utilisant un trigger qu'en utilisant de l'ActionScript. Cependant, les triggers fonctionnement mieux pour l'utilisation d'effets simples. Lorsque vous avez besoin de personaliser l'effet appliqué, il peut devenir plus difficile d'utiliser les triggers, et dans ces cas là, il est plus simple d'utiliser de l'AS3.

• Flex Effect: Les événements dispatchés au cours d'un effet (event effects et tween)
• Flex Effect: Déclencher un effet en utilisant la méthode play() en ActionScript
• Flex Effect: Effets composites en Sequence / Parallel (MXML et AS3)
• Flex Effect: Animation des effets (Pause, Resume, Reverse, Delay et Repeat)
• Flex Effect: Utiliser des effets personnalisés