Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex States: Evénements associés aux States (enterState, exitState …)

Quatre événements sont associés aux changement d'états:

• Lorsqu'un changement d'état est appelé, l'application ou le composant contenant l'état dispatch un événement currentStateChanging. Cet event est dispatché avant que l'état ne change vraiment
• Une fois que l'état a changé, l'application ou le composant dispatch un événement currentStateChange. Les deux événements sont de type mx.events.StateChangeEvent. On utilise les constantes CURRENT_STATE_CHANGING et CURRENT_STATE_CHANGE pour ajouter des listeners (écouteurs d'événements). Aucun de ces événements n'est annulable, cela veut dire que vous ne pouvez pas empêcher un changement d'état de se faire en annulant un évenement currentStateChanging, par exemple. De plus, ces deux événements sont utilisés par le framework Flex créant les transitions pour détécter quand une transition doit être effectuée.
• Les évenements (events) enterState et exitState sont déclenchés lorsqu'un état démarre et s'arrête respectivement. Ces deux états sont tous deux de type mx.events.FlexEvent (utilisez les constantes ENTER_STATE et EXIT_STATE pour ajouter des listeners (écouteurs d'événements):
  • L'événement enterState est lancé dès que l'état a commencé sa changement mais avant qu'il soit appliqué à la vue
  • L'événement exitState est lancé dès que l'état va s'arrêter.
• L'événement enterState est dispatché par un objet State quand l'état démarre, et par une application ou un composant lorsqu'il retourne au baseState. L'événement exitState est dispatché par un objet State quand l'état se termine, et par une application ou un composant lorsqu'il retourne au baseState

Ci-desssous, un exemple d'utilisation de ces événements enterState, exitState, currentStateChange. et currentStateChanging.

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal"
	creationComplete="init()"
	 viewSourceURL="srcview/index.html">

	<mx:Script>
		<![CDATA[
			import mx.events.StateChangeEvent;
			import mx.events.FlexEvent;
			private function init():void{
				// ajout des listeners sur l'application pour détecter tous les changements d'état
				application.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, currentStateChange);
				application.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGING, currentStateChanging);
			}
			private function currentStateChange(e:StateChangeEvent):void{
				logTxtArea.text += "currentStateChange\n";
			}
			private function currentStateChanging(e:StateChangeEvent):void{
				logTxtArea.text += "currentStateChanging\n";
			}
			private function exitRegisterState(e:FlexEvent):void{
				logTxtArea.text += "exitRegisterState\n";
			}
			private function enterRegisterState(e:FlexEvent):void{
				logTxtArea.text += "enterRegisterState\n";
			}
		]]>
	</mx:Script>
	<mx:transitions>
		<mx:Transition fromState="*" toState="Register">
			<mx:Sequence targets="{[loginPanel]}">
				<mx:WipeRight duration="3000"  />
			</mx:Sequence>
		</mx:Transition>
		<mx:Transition fromState="Register" toState="*">
			<mx:Sequence targets="{[loginPanel]}">
				<mx:WipeLeft duration="3000"  />
			</mx:Sequence>
		</mx:Transition>
	</mx:transitions>
    <!-- Define one view state, in addition to the base state.-->
    <mx:states>
        <mx:State name="Register" enterState="enterRegisterState(event)" exitState="exitRegisterState(event)" >
            <mx:AddChild relativeTo="{loginForm}" position="lastChild">
                <mx:target>
                    <mx:FormItem id="confirm" label="Confirm:">
                        <mx:TextInput/>
                    </mx:FormItem>
                </mx:target>
            </mx:AddChild>
            <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
            <mx:SetStyle target="{loginButton}"
                name="color" value="blue"/>
            <mx:RemoveChild target="{registerLink}"/>
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:target>
                    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
                </mx:target>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <!-- Define a Panel container that defines the login form.-->
    <mx:Panel title="Login" id="loginPanel"
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

        <mx:Form id="loginForm" >
            <mx:FormItem label="Username:">
                <mx:TextInput/>
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput/>
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar>
            <mx:LinkButton id="registerLink"  label="Need to Register?"
                click="currentState='Register'"/>
            <mx:Spacer width="100%" id="spacer1"/>
            <mx:Button label="Login" id="loginButton"/>
        </mx:ControlBar>
    </mx:Panel>

    <!-- Define a Panel container for the log file-->
    <mx:Panel title="logPanel" id="logPanel"
    	horizontalScrollPolicy="off" verticalScrollPolicy="off"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"
        width="300" height="300">
    	<mx:TextArea id="logTxtArea"  width="100%" height="100%" editable="false"/>
    </mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application