je créé un module authentification pas à pas

Version imprimable

Bonjour,

Je suis entrain de créer la partie administration de mon projet, je développe la partie authentification, et je rencontre des problèmes. J'ouvre ce post qui pourra surement intéressé tout débutant.

Voici le début de mon code :

LoginForm.xml

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
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
	title="Authentification" borderColor="#000000"
	showCloseButton="true" >
	<mx:Script>
		<![CDATA[
 
			import actionscript.login.*;
 
			public var _user: User;
 
			public function onClick(e:MouseEvent):void{
				_user.login(username.text, password.text);
			}
		]]>
	</mx:Script>
 
    <mx:Form id="loginForm">
        <mx:FormItem label="Nom d'utilisateur">
            <mx:TextInput id="username"/>
        </mx:FormItem>
        <mx:FormItem label="Mot de passe">
            <mx:TextInput id="password" displayAsPassword="true"/>
        </mx:FormItem>
        <mx:ControlBar id="buttonBar" width="100%" horizontalAlign="center">
            <mx:Button id="submit" label="Connexion" click="onClick(event);"/>
        </mx:ControlBar>
        <mx:FormItem id="remember">
            <mx:CheckBox id="rememberMe" label="Se souvenir de moi"/>
        </mx:FormItem>
    </mx:Form>
 
</mx:TitleWindow>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
package actionscript.login{
 
	import flash.events.EventDispatcher;
	import mx.controls.Alert;
 
	public class User  {
		public function User(){
		}
 
		public function login(name:String, password:String):void{
			Alert.show("test");
		}
 
	}
}

J'ai une erreur sur la méthode onClick, qui n'est pas instancier :

Code:

1
2
3
4
 
TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
	at components::LoginForm/onClick()[E:\Flex Builder 3\workspace\myWorldMap\src\components\LoginForm.mxml:13]
	at components::LoginForm/__submit_click()[E:\Flex Builder 3\workspace\myWorldMap\src\components\LoginForm.mxml:26]

Bonjour,
Je crois que c'est ton objet _user qui n'est pas instancié. Il faudrait que tu fasses quelque chose du style :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
	title="Authentification" borderColor="#000000"
	showCloseButton="true" creationComplete="onCreationComplete()">
 
<mx:Script>
		<![CDATA[
                 public function onCreationComplete():void{
 
                       _user = new User();
                 }
 
                // le reste de ton code

Merci ellene de ta réponse.

Je continue dans le développement du module, et je bloque sur la récupération de la réponse de mon fichier php, voici le code :

loginForm.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
...
	<mx:Script>
		<![CDATA[
 
			import actionscript.login.*;
			import mx.controls.Alert;
 
			public var _user: User;
 
			private function onCreationComplete():void{
				_user = new User();
			}
			public function onClick(e:MouseEvent):void{
				_user.login(username.text, password.text);
			}
		]]>
	</mx:Script>
...

User.as

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
 
public class User extends EventDispatcher{
		public function User(){
		}
 
		public function login(name:String, password:String):void{
 
			var chargeur : URLLoader = new URLLoader ();
			//recupere les variables envoye par l url
			var vars : URLVariables = new URLVariables();
			vars.user = name;
			vars.pass = password;
 
			//definit le fichier php
			var url:URLRequest = new URLRequest("php/login.php");
			url.method = URLRequestMethod.POST;
			//envoie des variables au fichier php
			url.data = vars;
 
			chargeur.addEventListener(Event.COMPLETE, endLoading);
			chargeur.load(url);
 
		}
 
		public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
			if( result == "true" ){
				Alert.show("Connection ok");
			}else{
				Alert.show("Erreur");
			}	
		}

Code:

1
2
3
4
 
<?php
        echo '<response>true<response>' ;
?>

Code:

1
2
3
 
TypeError: Error #1088: Le marquage du document après l'élément root doit être composé correctement.
	at actionscript.login::User/endLoading()[E:\Flex Builder 3\workspace\myWorldMap\src\actionscript\login\User.as:44]

Je voudrais récupérer le contenu du fichier php, mais XML(e.target.data) ne fonctionne pas

21/04/2009, 15h41
Jim_Nastiq

et avec ca :

Code:

echo '<root><response>true<response></root>' ;

?
21/04/2009, 15h42
ellene

Tu as regardé ce qu'il te renvoie comme valeur ?
21/04/2009, 16h18
T_bo_

Citation:

Envoyé par Jim_Nastiq

et avec ca :

Code:

echo '<root><response>true<response></root>' ;

?

Avec ou sans <root></root> ce sera toujours <response>true</response>

Citation:

Le marquage du document après l'élément root doit être composé correctement.

;)
21/04/2009, 16h47
miya
J'ai suivi vos conseils, en mettant la balise <root> et j'ai regardé ce que je récupère

Je pensais que l'erreur venait du XML(e.target.data);, mais apparemment cela fonctionne bien si je met uniquement :
Code:

1 2 3 4 5 <?php echo "<?xml version=\"1.0\" ?>" ; echo "<response>true</response>" ?>
L'erreur provenait dans le code php, une accolade erroné dans un if, donc en sortie du code il générait pas correctement le code XML.

reBonjour,

Je continue toujours dans le développement du module authentification.

:fleche: Une fois que j'ai récupéré de la BD mon user, je cherche à envoyer a mon titleWindow que la connection a réussi/ ou non, j'ai procédé ainsi :

LoginForm.xml
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .... public var _user: User; private function onCreationComplete():void{ _user = new User(); } public function onClick(e:MouseEvent):void{ _user.login(username.text, password.text); //si la connection a reussi if( _user.getLogged() == true ){ Alert.show("oui"); }else{ Alert.show("non"); } } ...
User.as
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 public class User extends EventDispatcher{ private var isLogged : Boolean; public function User(){ isLogged = false; } public function endLoading(e:Event):void{ var result:XML = XML(e.target.data); if( result == "true" ){ Alert.show("resultat ok"); isLogged = true; }else{ Alert.show("Erreur"); isLogged = false; } } public function getLogged():Boolean{ return isLogged; } ....
et la sa marche a moitié :s

Je m'explique, si j'execute une premiere fois mon authentification, j'obtiens :
Alert.show("resultat ok");
Alert.show("non");

et uniquement, a partir de la seconde fois, j'obtiens :
Alert.show("resultat ok");
Alert.show("oui");

pour infos la structure c'est :

Home.mxml : appel -> LoginForm.mxml qui initialise -> User.as
et User.as envoie un Boolean a LoginForm.mxml pour lui indiquer la réussite de la connection.

22/04/2009, 16h13
ellene

ReBonjour,

Les appels sont asynchrones. Tu ne peux pas vérifier immédiatement le résultat. Il faut attendre l'appel de endLoading pour savoir si tout s'est bien passé.

D'accord !!

Donc comment faire?
C'est a ce moment qu'intervient les dispatcher? (je n'ai pas encore assimilé correctement ce concept)

ma classe User.as :

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
 
public class User extends EventDispatcher{
 
		private var isLogged : Boolean;
 
		public function User(){
			isLogged = false;
		}
 
		public function login(name:String, password:String):void{
 
			var chargeur : URLLoader = new URLLoader ();
			//recupere les variables envoye par l url
			var vars : URLVariables = new URLVariables();
			vars.user = name;
			vars.pass = password;
 
			//definit le fichier php
			var url:URLRequest = new URLRequest("php/login.php");
			url.method = URLRequestMethod.POST;
			//envoie des variables au fichier php
			url.data = vars;
 
			chargeur.addEventListener(Event.COMPLETE, endLoading);
			chargeur.load(url);
 
		}
 
		public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
 
			if( result == "true" ){
				Alert.show("Connection ok");
				isLogged = true;
 
			}else{
				Alert.show("Erreur");
				isLogged = false;
			}	
		}
 
		public function getLogged():Boolean{
			return isLogged;
		}
 
	}

Alors
1 - Tu crées un évènement LogEvent qui étends flash.events.Event
2 - Tu déclares à User son évènement :
Code:

1 2 3 4 5 6 [Event(name="logged", type="myEvents.LogEvent")] public class User extends EventDispatcher { ... }
3 - Tu t'abonnes à l'évènement dans creationComplete.
Code:

1 2 _user.addEventListener("logged", traitement(event));
4 - Tu dispatch l'évènement une fois l'authentification effectuée :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 public function endLoading(e:Event):void{ var result:XML = XML(e.target.data); if( result == "true" ){ Alert.show("Connection ok"); isLogged = true; }else{ Alert.show("Erreur"); isLogged = false; } dispatchEvent(new LogEvent()); }
Voila... c'est à peu près comme ça :p je crois.
Je l'ai écrit un peu à la va vite mais sinon voici la doc officielle :
http://livedocs.adobe.com/flex/3/htm...eevents_3.html

Merci beaucoup ellene, j'ai compris le principe des dispatcher. En faite, une fois que mon action est terminé il faut que je diffuse un évènement.

J'ai repris ton idée, et je me suis meme permis de le couplé avec l'exemple de flex tutorial : http://www.flex-tutorial.fr/2009/01/...nt-evenements/

Ce qui me donne :

LoginForma.mxml

Code:

1
2
3
4
5
6
 
private function onCreationComplete():void{
				_user = new User();
                              // je m abonne a mon evenement
				_user.addEventListener(UserEvent.SUCCESS_AUTH , closeWindow);
			}

Je créé mon évènement personnalisé :
UserEvent.as

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
package actionscript.events{
 
	import flash.events.Event;
 
	public class UserEvent extends Event{
 
		public static const SUCCESS_AUTH:String = "success" ;
 
		public function UserEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false){
			super(type, bubbles,cancelable);
		}
 
     	public override function clone():Event {
			return new UserEvent(type, bubbles, cancelable);
		}
	}
}

et je le diffuse une fois que la connection est ok
User.as

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public function endLoading(e:Event):void{
			var result:XML = XML(e.target.data);
 
			if( result == "true" ){
				Alert.show("Connection ok");
				isLogged = true;
				dispatchEvent(new UserEvent(UserEvent.SUCCESS_AUTH));
 
			}else{
				Alert.show("Erreur");
				isLogged = false;
			}	
		}

Je continue le développement de mon module. Une fois que j'ai terminé et fermé la fenetre authentification, je souhaite :
1/ modifier le comportement du bouton qui m'a permis d'ouvrir ma titleWindow, et
2/ ajouté un bouton a mon linkbar :

Home.mxml

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
 
<mx:Script>
		<![CDATA[
 
private function onCreationComplete():void{
				_user = new User();
				_user.addEventListener(UserEvent.SUCCESS_AUTH , closeWindow);	
			}
 
			private function closeWindow(e:UserEvent):void{
				PopUpManager.removePopUp(_loginForm);
				linkAdmin.label = "Déconnecter";
				linkAdmin.removeEventListener(MouseEvent.CLICK, showLogin);
				linkAdmin.addEventListener(MouseEvent.CLICK, logout);
			}
                        ....
		]]>
	</mx:Script>
 
<mx:LinkBar width="100%" horizontalAlign="center" styleName="myLinkBar" dataProvider="VSPrincipale"/>
 
		<mx:ViewStack id="VSPrincipale" resizeToContent="true"
			horizontalCenter="center" height="100%" width="100%"
			x="50" y="50" >
 
			<!-- ACCUEIL -->
			<views:Home width="100%" height="100%" label="HOME"/>
			<views:myGoogleMap width="100%" height="100%" label="WORLD MAP"
				paddingRight="50" paddingBottom="5"/>
		</mx:ViewStack>
 
....
 
        <mx:LinkButton id="linkAdmin" label="Administration" click="showLogin(event)" />

Je bloque au 1/ lorsque je veux supprimé et ajouté un nouveau listener :

Code:

1
2
 
ArgumentError: Error #1063: Non-correspondance du nombre d'arguments sur myWorldMap/logout(). 0 prévu(s), 1 détecté(s).

23/04/2009, 16h13
Jim_Nastiq
tout simplement il te manque un argument à ta méthode logout qui est le handler de ton listener du click souris sur ton composant linkAdmin :
Code:

1 2 3 4 private function logout(evt:MouseEvent):void{ ... }
PS: un petit effort de reflexion/recherche aurait solutionné ton problème, l'erreur étant suffisament explicite ;)
23/04/2009, 16h22
miya

Exact autant pour moi, je suis au taff et je développe en mm temps en php, et en parallele je suis sur mon projet perso flex, et je m'y perd vite, mais c'est pas une excuse, mea culpa c'était pourtant évident, merci Jim_Nastiq.

C'était aussi pour introduire la question sur le linkbar, à savoir comment faire pour insérer un nouvelle élément dans mon viewstack.

Je suppose que je devrais ajouter un état additionnel avec un addChild sur mon viewstack, mais je dois l'appeler lorsque la connection est ok

J'ai procédé ainsi :

est ce la bonne marche à suivre ?

Merci d'avance pour vos éclaircissement.

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
 
	<mx:Script>
		<![CDATA[
			private function closeWindow(e:UserEvent):void{
				//supprime le popup
				PopUpManager.removePopUp(_loginForm);
				//modifie le label admin
				linkAdmin.label = "Déconnecter";
				//supprime l evt
				linkAdmin.removeEventListener(MouseEvent.CLICK, showLogin);
				//ajout l evt de deconnection
				linkAdmin.addEventListener(MouseEvent.CLICK, logout);
				//j ajoute la page au linkbar
				currentState = 'addOnViewStack';
			}
 
	]]>
	</mx:Script>
 
	<mx:states>
		<mx:State name="addOnViewStack">        
			<mx:AddChild relativeTo="{VSPrincipale}" position="lastChild">
				<views:Admin width="100%" height="100%" label="ADMINISTRATION" />
		    </mx:AddChild>   
		</mx:State>
	</mx:states>

23/04/2009, 17h41
Jim_Nastiq

si cela fonctionne comme tu le souhaite c'est à priori pas mauvais :aie:

sinon sur le code lui même, pourquoi utilise tu un state pour ajouter ton élément?
23/04/2009, 18h45
miya

Car je ne sais pas s'il y a d'autre possibilité. Je me dis que pour une personnalisation de gestion droits, l'utilisation de nombreux <states> deviendrait vite fastidieux.

Une méthode est-il préconisé pour la personnalisation des vues en fonction des droits de l'utilisateur ?
24/04/2009, 10h17
Jim_Nastiq

ok les States sont en effet une bonne solution dans ce cas d'utilisation.
Tu créé toutes tes différentes vues qui sont autant de states et ensuite il ne te suffit que de switcher entre ces states.
24/04/2009, 11h09
miya

oki Merci Jim, et à ceux qui ont participé à la discussion :king: