Ajouter

Présentation des States dans Flash Builder 4 (Flex 4/Gumbo)

Dans Adobe Flash Builder 4 Beta (Flex 4 Beta), le management des states au niveau du MXML a été largement amélioré comparé aux versions Flex 3 / Flex 2. En résultat, vous vous rendrez compte que les States sont beaucoup plus fléxibles et accéssibles.
Adobe Flash Builder 4 met en avant une syntaxe des States beaucoup plus « inline », c'est à dire un management au coeur même des composants de l'application, qui vous permettra d'attribuer certains paramètres de states spécifiques à un composant directement dans celui-ci.

La différence principale entre Flex 3 et Flex 4 (Flash Builder 4) se résume en quelques points principaux :

1. Tableau de States (états) et attributs includeIn, excludeIn

A. les states (mx:State) sont les seuls composants qui peuvent maintenant se trouver dans le tableau des States mx:states

B. Dans la nouvelle syntaxe, vous ne pouvez pas utiliser les classes Addchild et RemoveChild, vous avez juste à définir les rôles de certains composants dans une state en ajoutant à ce composant les attributs : includeIn pour inclure le composant dans la state ou excluseFrom pour l'en exclure.

Illustration simplifiée du nouveau fonctionnement des States dans Flex 4 en comparaison à Flex 3

Dans l'exemple suivant de Flex 3, les states sont utilisées pour ajouter un bouton (composant mx:Button) et supprimer un champ de texte (composant mx:TextInput) uniquement quand nous sommes dans l'état (currentState) : « validationFormulaire ». Ce type de construction de code peut s'avérer très compliquée à gérer avec plus de paramètres :

 MXML | 
 Copier le code
 
<mx:states>
    <mx:State name="validationFormulaire" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="Envoyer" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>
 
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

Voici maintenant le même exemple en version simplifiée dans Flash Builder 4 (Flex 4) via l'utilisation des attributs : includeIn et excludeFrom :

 MXML | 
 Copier le code
 
<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>

2. « Syntaxe à point » des States dans Flash Builder 4

Les tags SetProperty (définir une propriété), SetStyle (définir un style css), et SetEventHandler (définir un évenement), ont été remplacés par une nouvelle syntaxe, la « syntaxe à point« , qui permet d'attribuer des valeurs spécifiques aux composants MXML directement dans ceux-ci en fonction de l'état (State) ou l'on se trouve.

Illustration de la nouvelle « syntaxe à point » des States dans Flex 4 en comparaison à Flex 3

Dans l'exemple ci-dessous, nous allons voir comment étaient gérées les attributions de propriétés / styles / évenements dans Flex 3 :

 MXML | 
 Copier le code
 
<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" />  

Au niveau de Flash Builder 4, voici ce que donne ce même code, la préférence de code entre Flex 3 et Flex 4 est indiscutable :

 MXML | 
 Copier le code
 
<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"/>

On peut voir ci-dessus que seul les deux balises de définition des noms de State sont présentes dans le tableau mx:states, les propriétés sont ensuite directement implémentées dans le composant, avec par exemple la définition de deux déclenchements différents pour l'évenement (Event) « Click » dans le cas ou de l'état (State) submitState ou clearState.

3. Un composant ne peut pas être défini dans une State inéxistante

Par défault, la première State (état) déclarée dans l'application est la State « initial » du composant.
La nouvelle syntaxe est disponible quand un document utilise les références de langage MXML 2009 (MXML 2009 language namespace).
Vous ne pouvez pas faire un mix entre les anciennes gestion de states et les nouvelles.
L'ancienne syntaxe est uniquement disponible avec la référence de langage MXML 2006.

4. Nouveaux supports de states prédéfinis dans Flash Builder 4 (Flex 4, Flex Gumbo)

Chaque composant a maintenant un jeu de states défini dans la classe de son propre skin, qui rend particulièrement simple les changements visuels ou de certaines propriétés d'un composant.

Illustration des states du composant Spark Button (bouton Spark) dans Flex 4

 MXML | 
 Copier le code
 
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states> 

La classe ButtonSkin (ButtonSkin class) défini tous les états visuels d'un composant Spark Button dans chacuns de ses états (State)

Source de l'article : Differences between Flex 3 and Flex 4 beta de Joan Lafferty

Autre(s) source(s) proche(s) de ce sujet :

1. Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo
2. Création d'états « View States » dans un « Custom Component »