[Flex4] Gestion des états [Résolu]

[A&N_L]

Bonjour à tous,

Débutant Flex, je suis à me coller à l'aspect navigationnel de mon application.

Ayant saisi qu'il fallait utiliser le composant State à cet effet, je me trouve confronté à quelques désagréments de jeunesse...

Soit la page index :

Code :

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:components="components.*">
	<components:CompanyLogin/>	
</s:Application>

Le composant CompanyLogin :

Code :

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
	     xmlns:s="library://ns.adobe.com/flex/spark" 
	     xmlns:mx="library://ns.adobe.com/flex/mx"					  
             xmlns:components="fr.comatek.components.*">
 
	<components:BackgroundLogin/>
	<components:LabelPleaseEnterCompanyCode y="86" x="26"/>
	<components:CenterMono y="236" x="115"/>
 
</s:Group>

Et pour finir le composant CenterMono :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 			  xmlns:s="library://ns.adobe.com/flex/spark" 
		 			  xmlns:mx="library://ns.adobe.com/flex/mx" width="793" height="166" xmlns:components="fr.comatek.components.*">
 
	<s:states>
		<s:State name="StartState"/>
		<s:State name="UserLoginPage"/>
	</s:states>
 
	<s:Group includeIn="StartState">
		<mx:Button id="Valider" width="65" height="32" x="350" y="67"
				   overSkin="@Embed(source='web/images/btn_validerOver.png')" 
				   upSkin="@Embed(source='web/images/btn_valider.png')" 
				   downSkin="@Embed(source='web/images/btn_validerDown.png')" 
				   click="currentState='UserLoginPage'"/>	
	</s:Group>
 
	<components:UserLogin includeIn="UserLoginPage"/>
 
</s:Group>

Vous l'aurez assurément compris, je n'ai pas le comportement escompté.

Quand je lance l'application, ma première fenêtre (le composant CompanyLogin) apparaît correctement, puis quand je clique sur le bouton Valider, une deuxième fenêtre (le composant UserLogin) vient se superposer à la première...

Le comportement attendu : sur un clic du bouton Valider, la première fenêtre "disparaît" complètement pour laisser entièrement place à la fenêtre/au composant UserLogin.

Me faudrait-il utiliser des transitions ou bien mes états ne seraient pas correctement implémentés...?

Merci par avance pour vos éclairages.

[npirard]

Tes états semblent géré correctement.

A mon avis en utilisant des transitions tu vas pouvoir adoucir les mouvements et avoir ce que tu veux.

Après il faut regarder à ta mise en page.

Des états ne sont présents que dans le composant "CenterMono".

Et ton Etat remplace un bouton par un autre composant.

tu peux faire le test de mettre un Vbox pour être certain que ton bouton ne soit plus présent (Et pas seulement caché).

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<VGroup>
<s:Group includeIn="StartState">
  <mx:Button id="Valider" width="65" height="32" x="350" y="67"
				   overSkin="@Embed(source='web/images/btn_validerOver.png')" 
				   upSkin="@Embed(source='web/images/btn_valider.png')" 
				   downSkin="@Embed(source='web/images/btn_validerDown.png')" 
				   click="currentState='UserLoginPage'"/>	
	</s:Group>
 
	<components:UserLogin includeIn="UserLoginPage"/>
 
</VGROUP>

Si tu as d'autres questions, ou si ce n'est pas ce que tu attendais, n'hésite pas à donner + d'infos

[A&N_L]

Salut npirard,

Merci pour l'inspiration !

J'ai rapatrié tout le code du composant Center dans le composant UserLogin, encadré le tout par un tag include="userLoginView", rajouté une méthode de gestion des états et roule ma poule !

Encore merci !

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx"
			 xmlns:wsloginservice="services.wsloginservice.*"
			 xmlns:loginComponents="components.login.*"
			 xmlns:views="views.*">
 
	<fx:Declarations>
		<s:CallResponder id="loginResult"/>
		<wsloginservice:WsLoginService id="wsLoginService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true" result="wsLoginService_resultHandler(event)"/>
	</fx:Declarations>
 
	<s:states>
		<s:State name="userLoginView"/>
		<s:State name="welcomeView"/>
	</s:states>
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
 
			protected function Valider_clickHandler(event:MouseEvent):void
			{
				loginResult.token = wsLoginService.login(user_login.text, user_password.text);				
			}
 
			protected function wsLoginService_resultHandler(event:ResultEvent):void
			{
				var checkLogin:Boolean = loginResult.lastResult;
 
				if (checkLogin == true) {
					this.currentState="welcomeView";					
				}				
				else {
					this.currentState="";	
				}
			}
		]]>
	</fx:Script>
 
	<s:Group includeIn="userLoginView">
		<loginComponents:BackgroundLogin/>
 
		<loginComponents:LabelPleaseEnterLoginAndPassword x="26" y="86"/>
 
		<s:Group id="UserLoginCenter" x="115" y="236">	
			<mx:Image id="centerMono" source="web/images/center.png"/>
 
			<s:TextInput id="company_login"/>
 
			<s:Label id="label_user_login" text="Identifiant"/>
 
			<s:TextInput id="user_login"/>	
 
			<s:Label id="label_user_password"/>
 
			<s:TextInput id="user_password"/>	
 
			<mx:Button id="Valider" click="Valider_clickHandler(event)"/>	
 
			<mx:Button id="ButtonPwd"/>
 
			<mx:Button id="ButtonLogin"/>
 
			<mx:Button id="ButtonGetChrome"/>
		</s:Group>
 
	</s:Group>
 
	<views:Welcome includeIn="welcomeView"/>
 
</s:Group>