04/01/2011

Déclencher des actions sur les transitions entre States

Pour jouer une transition d'un State vers un autre, quand des composants apparaissent, disparaissent ou change de propriétés, il faut connaitre les "effets d'action" qui servent à déclencher au bon moment les bonnes actions.
On compte 4  "effets d'action" :
  1. SetPropertyAction :
    En relation avec SetProperty, il indique quand appliquer une propriété
  2. SetStyleAction :
    En relation avec SetStyle il indique quand appliquer un style.
  3. AddChildAction :
    En relation avec AddChild, il indique quand ajouter un composant
  4. RemoveChildAction :
    En relation avec RemoveChild, il indique quand supprimer un composant
Comment s'en servir ?
Prenons l'exemple d'une Application avec 2 états, celui par défaut et "arrivee".
L'état par défaut a un titre (id="titre"), un canvas (id="cadre"), un bouton (id="go")
Dans l'état "arrivee", "titre" va changer de propriété, "cadre" va se redimensionner avant de disparaitre, "go" va changer de couleur et un nouveau composant  va apparaitre.
Si nous n'utilisions pas les "effets d'action", la transition entre ces 2 états serait un peu 'brutale'.

Voici la construction :
<mx:states>
 <mx:State name="arrivee">
   <mx:SetProperty target="{titre}" name="text" value="nouveau texte"/>
   <mx:SetStyle target="{go}" name="fillColors" value="[#38EF0D, #38EF0D]"/>
   <mx:RemoveChild target="{cadre}"/>
   <mx:AddChild position="lastChild">
     <mx:Canvas width="200" height="42" backgroundColor="#C911E4"/>
   </mx:AddChild>
 </mx:State>
</mx:states>
   <mx:Label text="premier texte" id="titre"/>
   <mx:Canvas width="200" height="42" backgroundColor="#BC0F0F" id="cadre"/>
   <mx:Button label="lancer la transiton" click="currentState='arrivee'"
id="go"/>


Les transitions: 
<mx:transitions>
 <mx:Transition fromState="*" toState="arrivee">
//une succession d'évènement va se produire
  <mx:Sequence>
//je redimensionne
   <mx:Resize target="{cadre}" widthTo="44"/>
//avant de supprimer mon canvas
   <mx:RemoveChildAction target="{cadre}"/>
//fondu sortant
   <mx:Fade alphaFrom="1" alphaTo="0" target="{titre}"/>
//avant de changer le texte
   <mx:SetPropertyAction target="{titre}" name="text"/>
//et de le ré-afficher
   <mx:Fade alphaFrom="0" alphaTo="1" target="{titre}"/>
//je demande a afficher mon nouveau canvas
   <mx:AddChildAction/>
//puis je change la couleur du bouton
   <mx:SetStyleAction target="{go}" name="fillColors"/>
  </mx:Sequence>
 </mx:Transition>
</mx:transitions>

Il suffit de supprimer les "effets d'action" pour s'apercevoir de la différence entre une transition avec ou sans.

Aucun commentaire:

Enregistrer un commentaire