Adobe^® Flex^™ Tutorial

Traduction de l'article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.

Flex 4 introduit une nouvelle syntaxe MXML pour les States. Celle-ci est plus "inline", permettant de faire des modifications sur les States en fonction du contexte. Voici les grandes différences de la syntaxe Flex 4 par rapport à Flex 3:

• Seuls des states sont définis sans le tableau "states"
• Dans la nouvelle syntaxe des states, vous ne pouvez pas utiliser AddChild ni RemoveChild. A la place, vous devez définissez si un composant fait partie d'un state en utilisant les attributs includeIn et excludeFrom.

Dans l'exemple Flex 3 suivant, les States sont utilisées pour inclure un Button et supprimer un TextInput, seulement quand le "currentState" du document est "submitState". Cette approche peut être très lourde avec des states complexes:

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>

<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

Voici le même exemple en Flex 4 en utilisant includeIn et excludeFrom:

<s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

Les tags SetProperty, SetStyle et SetEventHandler ont été remplacés par la nouvelle syntaxe par point, qui vous permet de préciser un attribut MXML avec un identifiant de State.

Dans le code Flex 3 suivant, le code définit une propriété, un style et un event pour un Button dans l'état submitState:

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
    </mx:State>
</mx:states>

<mx:Button id="submitButton" />

Voici à quoi ressemble le même code dans Flex 4:

<s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>

<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>

Un composant ne peut plus être dans un état undefined ou null. Par défaut, le premier state déclaré est le State initial du composant. La nouvelle syntaxe est disponible quand vous utiliser le namespace MXML 2009. Vous ne pouvez pas mélanger l'ancienne et la nouvelle syntaxe. L'ancienne syntaxe est uniquement disponible avec le namespace MXML 2006.

De plus, chaque composant supporte maintenant un ensemble de states définis dans la classe de skin, ce qui rend plus simple l'application des changements visuels en fonction du state du composant. Par exemple, si vous regardez la skin du Spark Button, vous trouverez les states suivants:

<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>

La classe ButtonSkin définit ce qui se passe visuellement pour un SparkButton dans chacun de ces states.

Voir la spécification sur les States Flex 4.

• Flex Transition: Programmer des Transitions en ActionScript (Move, Resize…), avec exemple AS3
• Flex States: Modifier l'écouteur d'événement (Event Handler) d'un composant
• Flex States: Modifier la propriété d'un composant
• Flex Transition: Créer des Transitions en MXML (Move, Resize…), avec exemple
• Flex States: Modifier le Style d'un Composant