Transitions entre états

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Flex

Nous avons vu au chapitre précédent différents effets visuels applicables à un composant : déplacement, redimensionnement, rotation, etc.

Dans ce chapitre, nous allons mettre en application cet apprentissage pour définir une transition entre deux états d'affichage, de manière à atténuer le changement soudain d'affichage.

 

Une transition regroupe un ensemble d'effets à appliquer lors du passage à un état donné ou depuis un état donné.

Mise en place d'une transition

 

Pour définir une transition, nous utilisons le composant <s:Transition>, dont les propriétés fromState et toState permettent de paramétrer les cas dans lesquels doit s'appliquer la transition.

Une transition, comme un effet visuel, est un composant non visuel, et doit donc être placé entre des balises <fx:Declarations>.

Ainsi, nous définirons la transition depuis l'état "Register" vers l'état "Login" de cette manière :

<s:states>
      <s:State name="Login"/>
      <s:State name="Register"/>
</s:states>
 
<fx:Declarations>
      <s:Transition fromState="Register" toState="Login">       
               <!-- Définition des effets à appliquer lors du changement d'état -->
      </s:Transition>
</fx:Declarations>

Si les propriétés fromState ou toState ne sont pas précisées, la transition s'appliquera depuis tous les états existants ou lors du passage vers n'importe quel état.

 

 

Si la transition n'implique qu'un seul effet, celui-ci peut être défini directement à l'intérieur des balises de transition. Le code ci-dessous assurera le redimensionnement le composant dont l'identifiant est loginPanel grâce à la propriété target. La propriété duration permet de faire varier la durée de l'effet.

<s:Transition fromState="Register" toState="Login">
      <s:Resize target="{loginPanel}" duration="500"/>
</s:Transition>

 

Transition à plusieurs effets

 

Une transition peut également cumuler plusieurs effets, qui se déclenchent simultanément ou les uns à la suite des autres (séquence d'effets). Pour ce faire, il faut englober les balises d'effets dans une balise indiquant le comportement à avoir: <s:Parallel> (déclenchement simultané) ou <s:Sequence> (déclenchement séquentiel), comme illutré ci-dessous.

<s:Transition toState="Register">
      <s:Parallel>
            <s:Resize target="{loginPanel}" duration="500"/>
            <s:Wipe direction="down" target="{passConfirmItem}" duration="100"/>
      </s:Parallel>
</s:Transition>

 

 

Définir plusieurs transitions

 

our définir plusieurs transitions, il faut les encapsuler dans des balises <s:transitions>. Ainsi, nous pouvons définir les transitions suivantes pour nos états Login et Register :

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="400" height="300" currentState="Login">
 
      <s:states>
            <s:State name="Login"/>
            <s:State name="Register"/>
      </s:states>
 
      <s:transitions>
            <s:Transition toState="Register">
                  <s:Parallel>
                        <s:Resize target="{loginPanel}" duration="500"/>
                        <s:Wipe direction="down" target="{passConfirmItem}" duration="100"/>
                  </s:Parallel>
            </s:Transition>
            <s:Transition fromState="Register" toState="Login">
                  <s:Resize target="{loginPanel}" duration="500"/>
            </s:Transition>
      </s:transitions>
 
      <!-- Panel principal -->
      <s:Panel id="loginPanel" title="Connexion" title.Register="Création">
            <!-- Champs de saisie du formulaire -->
            <mx:Form id="loginForm">
                  <mx:FormItem label="Login">
                        <mx:TextInput id="login"/>
                  </mx:FormItem>
 
                  <mx:FormItem label="Mot de passe">
                        <mx:TextInput id="pass" />
                  </mx:FormItem>
 
                  <mx:FormItem label="Confirmation" id="passConfirmItem" includeIn="Register">
                        <mx:TextInput id="passConfirm" />
                  </mx:FormItem>
            </mx:Form>
 
            <!-- Panneau inférieur contenant les boutons -->
            <s:controlBarContent>
                  <s:Button label="Nouveau compte" label.Register="J'ai déjà un compte"
                             click.Login="currentState='Register'"
                             click.Register="currentState='Login'"/>
                  <mx:Spacer width="100%"/>
                  <s:Button label="Connexion" label.Register="Enregistrement"/>
            </s:controlBarContent>
      </s:Panel>
</s:Application>

 

 

Nous savons maintenant comment réaliser l'interface graphique de l'application et appliquer des effets visuels pour améliorer le rendu.

Nous pouvons désormais apprendre à dynamiser notre interface, à l'aide du langage ActionScript et de la gestion des évènements liés à l'utilisateur.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.