1. Accueil
2. Pôle de développement
3. Pôle de développement Flex
4. Flex en un clin d'œil

Flex en un clin d'œil : Création d'une interface utilisateur simple

Sommaire

• Utilisation de contrôles
• Utilisation de conteneurs
• Mise en forme de composants
• Ajout d'effets
• Création d'états
• Définition de transitions d'état
• Utilisation d'info-bulles
• Contrôle du curseur

---

Définition de transitions d'état

Les états d'affichage permettent de modifier le contenu et l'aspect d'une application, généralement en réponse à une action de l'utilisateur. Lorsque vous modifiez des états d'affichage, Adobe® Flex® applique simultanément toutes les modifications graphiques à l'application concernée. Toutes les modifications d'un état d'affichage étant appliquées simultanément, l'utilisateur peut avoir l'impression que l'application passe soudainement d'un état à l'autre.

Pour éviter cela, vous pouvez définir une transition graphique progressive d'un état à l'autre, dans laquelle les modifications sont opérées sur une certaine période de temps. Les transitions définissent la façon dont apparaît à l'écran un changement d'état d'affichage. Une transition consiste en un ou plusieurs effets regroupés pour être lancés lorsqu'un état d'affichage est modifié.

Les transitions ne remplacent pas les effets. En d'autres termes, vous pouvez toujours appliquer un effet à un composant et l'appeler à l'aide d'un déclencheur ou de la méthode playEffect().

La balise <mx:Transition> permet de créer une transition et de la personnaliser en utilisant ses propriétés fromState, toState et effect . La propriété fromState spécifie l'état d'affichage initial que vous modifiez au moment de la transition, la propriété toState spécifie l'état d'affichage final et la propriété effect fait référence à l'objet Effect à lancer.

Dans les transitions, vous pouvez lancer des effets en parallèle ou en séquence en utilisant les balises <mx:Parallel> et <mx:Sequence> .

L'exemple ci-après définit une transition utilisée à chaque changement d'état et comprend un effet parallèle. Un effet parallèle est également appelé un effet composite, car il contient d'autres effets. Dans cet exemple, l'effet parallèle contient un effet de redimensionnement et un effet de séquence. Les effets enfants d'un effet parallèle s'exécutent simultanément.

L'effet de redimensionnement s'exécute en 500 millisecondes et utilise une fonction de fondu pour faire rebondir le panneau lors de son redimensionnement. L'effet de séquence est également un effet composite. Contrairement à un effet parallèle, les effets enfants d'un effet de séquence s'exécutent les uns après les autres, dans l'ordre dans lequel ils ont été ajoutés. L'effet de séquence de l'exemple ci-après contient deux effets Blur. Un effet Blur floute le composant cible et peut servir à moduler son importance dans l'affichage ou créer une sensation de vitesse.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
    width="340" height="250"
     viewSourceURL="src/DefiningStateTransitions/index.html"
>
    <mx:Script>
        <![CDATA[
            // You need to import easing classes even if 
            // you're going to use them only in MXML.
            import mx.effects.easing.Bounce;
        ]]>

    </mx:Script>

    <!-- 
        Use the transitions property (array) of 
        the Application class to store your transitions. 
    -->
    <mx:transitions>
        <!--
            The "*" indicates that the transition should be applied
            to any changes in the view state. You can set either 
            property to "" to refer to the base view state. 
        -->
       <mx:Transition fromState="*" toState="*">
            <!-- Parallel effects execute in unison --> 
            <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
                <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
                <!-- 
                    Sequence effects execute in turn. The effects
                    in this sequence will only affect the confirm FormItem.
                -->
                <mx:Sequence target="{confirm}">

                    <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0" />            
                    <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1" />            
                </mx:Sequence>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
        
    <!-- The states property of the Application class 
         defines the view states. -->
    <mx:states>
    <!-- 
            The "Register" state is based on the base state. 
            All states are based on the base state by default
            so you can leave out the basedOn property. 
        -->
        <mx:State name="Register" basedOn="">

            <!-- Add a FormItem component to the form. -->

            <mx:AddChild 
                relativeTo="{loginForm}" 
                position="lastChild" 
                creationPolicy="all"
            >
                <mx:FormItem id="confirm" label="Confirm:">

                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>
            
            <!-- Set properties on the Panel container and Button control. -->
            <mx:SetProperty target="{loginPanel}"
            name="title" value="Register"/>

            
            <mx:SetProperty target="{loginButton}"
            name="label" value="Register"/>
            
            <!-- Remove the existing LinkButton control. -->

            <mx:RemoveChild target="{registerLink}"/>
            
            <!-- 
                Add a new LinkButton control to change
                view state back to the login form. 
            -->
            <mx:AddChild relativeTo="{spacer1}" position="before">

                <mx:LinkButton label="Return to Login" click="currentState=''"/>
            </mx:AddChild>

        </mx:State>

    </mx:states>

    <mx:Panel 
        title="Login" id="loginPanel"
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
    >

    <mx:Form id="loginForm">
        <mx:FormItem label="Username:">
            <mx:TextInput/>

        </mx:FormItem>
        <mx:FormItem label="Password:">
            <mx:TextInput/>
        </mx:FormItem>
    </mx:Form>

    
    <mx:ControlBar>
        <!-- 
            Use the LinkButton control to change to
            the Register view state. 
        -->
        <mx:LinkButton 
            label="Need to Register?" id="registerLink"
            click="currentState='Register'"
        />

        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>

    </mx:ControlBar>

    </mx:Panel>
</mx:Application>

Résultat

Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.

Retour au début

---

Pour plus d'informations

Pour plus d'informations sur les transitions d'état, reportez-vous à la section "Using Transitions" du document Flex 2 Developer's Guide*.

À propos de l'auteur