Discussion :

[dadadoux]

Hello,

Voilà je n'arrive pas a appliquer une transition lors d'un changement de state.

/!\ Le détail qui suit est très important !!!
Mon application possède 2 states, le state de base, et le state "sLogin" qui "hérite" ( obligatoirement ) du state de base ( mais qui ne garde aucun des composants du state de base ). De plus ce state "sLogin" est configuré comme étant le state afficher au démarrage.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" currentState="sLogin" >

Donc pour faire simple Mon state "sLogin" possède un Panel avec un formulaire pour s'authentifier. J'aimerais que, lorsque les identifiants saisies sont correctes, je passe du state "sLogin" au state de base ( accessible via : this.currentState=''; )

Cette manip marche très bien à l'heure actuelle mais je voudrais ajouter une transition entre les 2 states pour que le Panel contenant le formulaire de "sLogin" devienne de plus en plus transparent pour enfin disparaitre et laisser place aux autres composants du state de base ( en gros faire un fadeOut )

Comme vous vous en doutez le code suivant ne marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 
<!-- Transitions -->
	<mx:transitions>
		<mx:Transition fromState="sLogin" toState="">
				<mx:Fade target="{pLoginPanel}" alphaFrom="1" alphaTo="0" duration="1000"/>
		</mx:Transition>
	</mx:transitions>

J'ai essayer de remplacer - toState="" - par - toState="*" - pour tester ... mais sa ne change rien.

Alors J'ai fouiller sur le net et je suis tomber sur un article où en gros le gars à le même problème que moi sauf que lui, c'est ses transitions entre 2 states "Particuliers" ( comprendre : ne concernant pas le state de base ) qui ne fonctionnaient pas.

En lisant sa solution, j'ai compris qu'il fallait que je passe par les balises :
<mx:addChildAction> et <mx:removeChildAction>
Si je ne me trompe pas, celles-ci permettent de gérer quant-est-ce que sont ajouté ou supprimé les éléments propres à un state. ( ces balises sont à intégrer au sein d'une balise <mx:transition> )

Donc voici le code que j'ai modifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<!-- Transitions -->
	<mx:transitions>
		<mx:Transition fromState="sLogin" toState="">
			<mx:Sequence>
				<mx:Fade target="{pLoginPanel}" alphaFrom="1" alphaTo="0" duration="1000"/>
				<mx:RemoveItemAction />
				<mx:RemoveChildAction />
				<mx:AddChildAction />
			</mx:Sequence>
		</mx:Transition>
	</mx:transitions>

On peut voir que j'ai également placé une balise <mx:RemoveItemAction /> car je ne saisie pas bien la nuance avec la balise <mx:RemoveChildAction />
Donc dans le doute j'ai mis les 2 .

le Problème étant que ce code ne marche toujours pas :p ( et pire, il produit le même résultat, c'est à dire que le lorsque j'appuie sur le bouton pour me connecter, je change de state sans que la transition est le moindre effet ).

Donc voilà Merci de me venir en aide car la je coince

( pour info, voici le code de l'application : )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" currentState="slogin" >
 
	<!-- States -->
	<mx:states>
		<mx:State name="slogin">
			<mx:AddChild position="lastChild">
				<mx:Panel id="pLoginPanel" width="250" height="148" layout="absolute" horizontalCenter="0" verticalCenter="0" title="Identification">
					<mx:Label x="10" y="12" text="Login"/>
					<mx:TextInput id="login" right="10" width="140" backgroundColor="#8A8A8A" backgroundAlpha="0.4" top="10"/>
					<mx:Label x="10" y="44" text="Password"/>
					<mx:TextInput y="42" id="password" right="10" width="140" backgroundColor="#8A8A8A" backgroundAlpha="0.4" displayAsPassword="true"/>
					<mx:Button label="Connexion" right="10" bottom="10" click="checkCredential(login.text,password.text)"/>
				</mx:Panel>
			</mx:AddChild>
			<mx:RemoveChild target="{titlewindow1}"/>
		</mx:State>
	</mx:states>
 
	<!-- Transitions -->
	<mx:transitions>
		<mx:Transition fromState="slogin" toState="">
			<mx:Sequence>
				<mx:Fade target="{pLoginPanel}" alphaFrom="1" alphaTo="0" duration="1000"/>
				<mx:RemoveItemAction />
				<mx:RemoveChildAction />
				<mx:AddChildAction />
			</mx:Sequence>
		</mx:Transition>
	</mx:transitions>
 
	<!-- Scripts -->
	<mx:Script source="scripts.as"/>
 
	<!-- Styles -->
	<mx:Style source="styles.css" />
 
 
 
 
	<mx:XMLList id="menuXmlList">
		<menuitem label="Facture">
			<menuitem label="Ajouter" click="curentstate='login'"/>
			<menuitem label="Lister"/>
			<menuitem label="Supprimer"/>
		</menuitem>
		<menuitem label="Administration">
			<menuitem label="Utilisateurs"/>
			<menuitem label="Statistiques"/>
		</menuitem>
	</mx:XMLList>
 
	<mx:RemoteObject id="roServiceVO"
		fault="getFault(event)"
		endpoint="/../weborb/weborb.php"
		destination="ServiceVO"
		source="ServiceVO"
	>
		<mx:method name="loadUsers" result="loadUsersResult(event)"/>
		<mx:method name="updateUser" result="updateUserResult(event)"/>
		<mx:method name="checkCredential" result="checkCredentialResult(event)"/>
	</mx:RemoteObject>
 
	<mx:TitleWindow id="titlewindow1" layout="absolute" title="Budget Manager" height="70" width="100%" styleName="TitleWindowStyle" x="0" y="0" >
		<mx:MenuBar id="myMenuBar" labelField="@label" itemClick="menuBarHandler(event)" dataProvider="{menuXmlList}" styleName="MenuBarStyle" menuStyleName="MenuStyle" x="0" y="5" />		
	</mx:TitleWindow>
 
 
 
</mx:Application>

[dadadoux]

Bon bein, peut-être que ca en aidera certains, alors je poste ici la solution...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<mx:Transition fromState="slogin" toState="">
			<mx:Sequence targets="{[pLoginPanel,titlewindow1,myMenuBar]}">
				<mx:Dissolve target="{pLoginPanel}" alphaFrom="1" alphaTo="0" duration="500"/>
				<mx:RemoveChildAction />
				<mx:AddChildAction />
			</mx:Sequence>
</mx:Transition>

Ce qui change : j'ai enlever le <mx:RemoveItemAction/> qui correspondait en faite aux éléments d'un composant type list ( datagrid etc ).

Et là ou tout ce jouait : il fallait préciser dans <mx:Sequence> la propriété "Targets" spécifiant les id de tous les composants affectés par la transition ( que ce soit ajouté ou supprimé ).

Enfin, pour avoir l'effet que je désirait : il fallait dans un premier temps faire un Fade ( Dissolve est plus approprié lorsque du texte doit être caché )
de mon panel de login, puis le supprimé avec le RemoveChildAction, et enfin ajouter les nouveaux éléments du state cible avec AddChildAction.

Voilà ... ce sacré truc m'aura pris du temps ...

[ellene]

Merci d'avoir mis ta solution et pense au Tag