Flex UIComponent – Les évènements standard des Composants Flex
La classe flash.events.Event est la classe de base pour tous les évènements d'une application Flex. Cependant, de nombreux objets évènement sont des instances de sous-type d'Event (c'est-à-dire des classes qui héritent/extends d'Event). Par exemple, les évènements liés à la souris (click, mouseOver, etc.) sont de type MouseEvent.
Les objets évènement ont toujours une propriété "type" qui indique le type d'évènements que l'objet représente. Par exemple, un évènement click propage un objet dont la propriété "type" est click. Les objets évènement ont aussi des propriétés "target" qui référencent l'objet qui a propagé l'évènement. Dans certains cas, le target peut être un autre objet que celui pour lequel vous avez enregistré le listener. Cela se produit quand l'objet pour lequel vous avez enregistré l'évènement contient des composants enfant qui propagent aussi le même évènement. Si vous voulez être sur d'obtenir une référence vers l'objet pour lequel le listener est enregistré, utilisez la propriété "currentTarget".
Flex Effect: Démarrer un effet avec un trigger (flex trigger event)
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é.
Flex Effect: Déclencher un effet en utilisant la méthode play() en ActionScript
Déclencher les effets manuellement
Vous pouvez utiliser la méthode play() d'un effet pour le déclencher manuellement. Pour qu'un effet soit joué, vous devez avoir une cible, à laquelle sont appliqués les paramètres. Par exemple, si vous avez crée un effet Move, qui est supposé déplacer le composant de -100 par rapport à sa position actuelle, vous devez dire quel composant utilisent en tant que cible. Vous pouvez le faire en utilisant la propriété target.
moveEffect.target = textInput;
Vous pouvez ensuite utiliser la méthode play() pour démarrer la lecture de l'effet:
moveEffect.play();
L'exemple suivant utilise un effet de déplacement et l'applique à 4 champs de saisie à leur création.
<?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:Script>
<![CDATA[
private function applyEffect(event:Event):void {
moveEffect.target = event.currentTarget;
moveEffect.play();
}
]]>
</mx:Script>
<mx:Move id="moveEffect" xFrom="-100"/>
<mx:VBox>
<mx:TextInput id="textInput1" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput2" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput3" creationComplete="applyEffect(event)"/>
<mx:TextInput id="textInput4" creationComplete="applyEffect(event)"/>
</mx:VBox>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Dans cet exemple, chaque champ de saisie semble glisser depuis la gauche.
Flex States: Overrides (AddChild, SetProperty, SetEventHandler) en ActionScript
Ajout et Suppression de Composant en ActionScript
Vous pouvez ajouter et supprimer des composants en MXML grâce aux tages <mx:AddChild> et <mx:RemoveChild>. Ils correspondent aux classes mx.states.AddChild et mx.states.RemoveChild.
Lorsque vous voulez ajouter des composants enfants en utilisant la classe AddChild, vous devez d'abord construire une nouvelle instance:
var addChild:AddChild = new AddChild();
En utilisant le MXML, vous insérez insérez le tag <mx:AddChild> directement. En ActionScript, vous devez assigner une référence au composant à la propriété "target" de l'objet AddChild.
var button:Button = new Button();button.label = "Exemple"; addChild.target = button;
Mes projets (Open Source)
Autres
