Ajouter

Création d'états « View States » dans un « Custom Component »

Tutorial : Si un composant a plusieurs vues (view states), vous devez définir les states dans le code du composant, et non dans l'application principale. Vous pouvez définir des vues (view states) dans le composants indépendamment des vues (view states) de l'application principale.

L'exemple suivant vous montre une utilisation d'un composant qui intègre deux différentes vues (States) : la vue « Login » et la vue « Register ». La vue de départ (currentState) du composant est la vue « Login » :

Attention : il est préférable de disposer du SDK 4.0.0.10007 ou supérieur pour reproduire cet exemple

Code du composant personnalisé (Custom Component) :

 MXML | 
 Copier le code
 
<?xml version="1.0"?> 
<!-- http://www.flash-builder-tutorial.fr/2009/09/11/creation-de-view-states-dans-un-custom-component -->
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    title="Login" title.Register="Register"> 
 
    <!-- Les propriétés des states sont définies ici --> 
    <s:states> 
        <s:State name="Login"/>    
        <s:State name="Register"/> 
    </s:states> 
 
    <mx:Form id="loginForm"> 
        <mx:FormItem label="Username:"> 
            <s:TextInput/> 
        </mx:FormItem> 
        <mx:FormItem label="Password:"> 
            <s:TextInput/> 
        </mx:FormItem> 
        <!-- Ajout d'un control TextInput pour l'enregistrement -->           
        <mx:FormItem id="confirm" label="Confirm:" includeIn="Register"> 
            <s:TextInput/> 
        </mx:FormItem>            
        <mx:FormItem direction="horizontal">            
            <!-- Utilisation du LinkButton pour le passage en état Register-->                   
            <!-- avec exclusion de ce bouton quand on est dans la state Register-->                   
            <mx:LinkButton id="registerLink" 
                includeIn="Login" 
                label="Need to Register?" 
                click="currentState='Register'"/> 
            <!-- Ajout d'un Link Button pour retourner en State Login -->           
            <mx:LinkButton label="Return to Login" 
                includeIn="Register" 
                click="currentState=''"/> 
            <mx:Spacer width="100%" id="spacer1"/> 
            <!-- Définition du label du bouton login pour la state Login et Register--> 
            <s:Button id="loginButton" 
                label="Login" label.Register="Register" /> 
        </mx:FormItem>            
    </mx:Form> 
</s:Panel>

Vous pourrez utiliser ce composant personnalisé en utilisant le code principal de l'application ci-dessous :

 MXML | 
 Copier le code
 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.flash-builder-tutorial.fr/2009/09/11/creation-de-view-states-dans-un-custom-component -->
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo" 
	minWidth="1024" minHeight="768" xmlns:com="com.*">
	<s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:Label text="Login or Register"
        fontSize="14" fontWeight="bold"/>
	<com:CustomPanel/>
</s:Application>

Rendu final (nécessite Flash Player 10) :

Télécharger la source de l'exemple

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

1. Ajouter un Style CSS aux différents états d'un composant Spark Button
2. Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo
3. Présentation des States dans Flash Builder 4 (Flex 4/Gumbo)