Etats d'affichage

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

Les états d'affichage, également appelés view states, permettent de créer différentes vues pour un même conteneur. Il est ensuite possible de visualiser chacune d'elle en passant d’un état à un autre, sans pour autant recharger la page Web entière.

 

Les changements entre deux états peuvent concerner l'existence des composants du conteneur ou la valeur des propriétés des composants enfants.

 

Les états sont particulièrement utiles lorsque vous désirez modifier ou remplacer une partie de l'écran suite à une action de l'utilisateur sans recharger la page Web.

 

En guise d'exercice pour ce chapitre, nous allons reprendre le formulaire réalisé dans le chapitre Conteneurs d'agencement et modifier le code pour intégrer deux états, contenant deux formulaires différents:

  • l'état Login contiendra un champ nom et un champ de mot de passe, ainsi qu'un bouton de validation,
  • l'état Registrer contiendra en plus un champ de confirmation du mot de passe.

Le passage d'un état à l'autre se fera à l'aide d'un bouton. Le texte du bouton de validation du formulaire devra varier en fonction de l'état courant.

etat_login etats_6

Création d'un nouvel état

 

Partons donc du formulaire de login ci-dessous, qui sera notre état initial :

etat_login

 

 
 
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Nous avons déjà rencontré ce code dans ce tutoriel, notamment dans les chapitres Premiers composants et Conteneurs d'agencement. Nous ne nous y attarderons donc pas beaucoup.

 

Notez simplement que nous avons choisi d'utiliser un Panel pour contenir l'ensemble des composants de notre application, c'est-à-dire un composant mx:Form pour les champs de saisie et un composant s:ControlBar pour les boutons de gestion du formulaire.

 

Dans le ControlBar, nous utilisons le composant Spacer, que nous n'avions pas encore abordé dans ce tutoriel : il permet d'occuper de la place dans le conteneur. En indiquant une largeur de 100%, nous nous assurons de la disposition suivante :

  • le bouton "Nouveau compte" est déclaré en premier dans la ControlBar, il sera donc aligné sur la gauche,
  • le Spacer, inséré juste après, prendra toute la place possible dans le conteneur (c'est-à-dire toute la largeur excepté la taille des deux boutons),
  • le bouton "Connexion" se placera après le Spacer, et donc totalement aligné à droite de la ControlBar, puisque la taille du Spacer est à 100%.

 

 

Création d'un état en mode Design

 

L'état Register sera basé sur l'état Login, mais devra inclure un champ de saisie supplémentaire. Pour créer ce nouvel état, il faut passer en mode design dans Flash Builder. Cliquez ensuite sur l'icone Nouvel état de la vue Etats à droite de l'interface :

 

etats_2

 

Une nouvelle fenêtre s'ouvre alors, demandant les informations suivantes:

  • Nom : nous créons ici l'état Register,
  • Créer en tant que : nous pouvons choisir de copier un état existant pour le modifier ensuite, ou partir d'un état vierge ; nos deux états étant ici très similaires, nous allons créer un doublon de l'état existant Etat1,
  • Etat de départ : l'état Login sera l'état de départ, c'est-à-dire l'état affiché par défaut : laissons donc cette case décochée.

etats_3

En cliquant sur OK, nous obtenons deux états, pour l'instant identiques : Register que nous venons de créer, et , qui est l'état d'origine et que nous allons renommer Login. Pour ce faire, choisissons la ligne Modifier après un clic droit sur le nom dans la vue Etats :

etats_4

 

Nous pouvons alors renommer l'état et spécifier qu'il sera l'état de départ. Si nous revenons maintenant en mode source, nous obtenons le code suivant :

 
 
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
currentState="Login">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

Notons que deux états ont bien été créés, nommés Login et Register (lignes 10 et 11), et que l'état initial est Login, comme l'indique la propriété currentState du conteneur (ligne 7).

 

Modification de l'état Register

 

Pour l'instant, nos deux états sont identiques. Nous voulons ajouter le code suivant dans le formulaire :

 

Pour indiquer que ce composant FormItem ne doit être inclus que dans l'état Register, nous utilisons la propriété includeIn, dont la valeur est le nom de l'état concerné :

 

Si aucune propriété includeIn n'est précisée, les composants seront intégrés à tous les états.

 

Notez qu'il existe également une propriété excludeFrom, qui indique qu'un composant ne doit pas être présent dans l'état spécifié.

 

Pour vérifier que l'inclusion a été correctement effectuée, repassons en mode design. En cliquant sur les noms Login et Register dans la vue Etats à droite de l'interface, nous pouvons vérifier que le champ de confirmation du mot de passe n'est présent que dans l'état Register :

etats_5

 

 

Voyons maintenant la propriété titre du panel.

Pour l'instant, le titre est "Connexion". Dans l'état Register, nous voudrions que cette propriété ait la valeur "Création". Pour spécifier une propriété uniquement sur un état, il faut utiliser la syntaxe suivante:

label = "valeur par défaut pour tous les états"
label.nom-de-l-etat = "valeur particulière pour l'état nom-de-l'état"
/>

Dans notre cas, la déclaration du panel devient alors :

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Enfin, modifions les labels des boutons de validation et de changement d'état dans la controlBar :

 
 
 

 

Là encore, l'effet des modifications peut être vérifié en mode design, en basculant d'un état à l'autre à l'aide de la vue Etats. Alors que l'état Login est toujours le même, l'état Register est désormais le suivant :





Passage d'un état à l'autre

 

Pour changer d’état, nous utiliserons la propriété currentState du conteneur, à laquelle nous donnerons pour valeur le nom du nouvel état. Pour revenir vers l'état de départ, le caractère vide peut également être utilisé, à la place du nom.

 

Dans notre exemple, le bouton "Nouveau Compte" doit faire passer le conteneur dans son état "Register", lors d'un clic de l'utilisateur. Nous allons donc lui ajouter une propriété click, qui contiendra le comportement à avoir lors d'un clic sur le bouton. Nous ajouterons la chaine de caractères .Login pour préciser que ce comportement ne doit s'appliquer que lorsque l'application est dans l'état Login :

 
Faisons de même pour le bouton "J'ai déjà un compte" ; le code de la controlBar devient alors le suivant :
{code class="brush:xml;"}
 
 
click.Login="currentState='Register'"
click.Register="currentState='Login'"/>
 
 
 

A la ligne 3, nous spécifions à l'aide de la propriété click qu'un clic sur le bouton doit induire le passage à l'état nommé "Register". Ligne 4, nous utilisons la même propriété pour revenir à l'état initial, nommé "Login".

Nous aurions également pu utiliser une chaine de caractères vide pour valeur de la propriété currentState, cela aurait eu le même effet puisque Login est l'état initial. Toutefois, le nommage explicite de l'état rend le code plus lisible et est donc préférable.

 

 

 

 

Exécutez l'application pour tester le passage d'un état à l'autre : les boutons assurent bien le changement de vue que nous attendions.

 

Le passage d'un état à un autre change la vue affichée de façon soudaine. Pour fluidifier la navigation, il est possible de définir des effets de transitions.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.