José Fernando Carvalho

Bem, hoje vou falar sobre um sistema de login em Flex integrado com PHP. Ja pensou, na hipótese de usar sua autenticação, ja toda prontinha em PHP,com uma nova cara??? Pense na boa impressão que vai causar entre os colegas e principalmente ao chefe. Aueheauhua. Para dar uma pequena cirugia plástica vamos usar:

mx.rpc.events.ResultEvent;
mx.rpc.events.FaultEvent;
mx.rpc.http.HTTPService;
mx.controls.Alert;
mx.managers.PopUpManager;

Exemplo
OBS. Login: blogdofish & Senha: teste123;

Mão na massa

No Adobe Flex Builder, File > New Flex Project. Digite um nome para o projeto, seu tipo como Web application (runs in Flash Player) e Finish.Abra o arquivo que se encontra na pasta src do seu projeto. O meu é Login_Blog.mxml.

< ?xml version="1.0" encoding="utf-8"?>

Inseri um Listener “creationComplete=”Login()””. Isso me garante, que ao iniciar a aplicação, a funcão “Login()” será executada automaticamente. Continuando…

	< ![CDATA[
		import mx.managers.PopUpManager;
		import componentes.lfishblog;
 
		public function Login():void{
			var loginPopUp : lfishblog = lfishblog(PopUpManager.createPopUp(this, componentes.lfishblog , true));
			loginPopUp.setFocus();
			PopUpManager.centerPopUp(loginPopUp);
 
		}
	]]>

Logo acima um Action Script básico. Nele temos os IMPORTS com os packages necessários.

		import mx.managers.PopUpManager;
		import componentes.lfishblog;

O “componentes.lfishblog” é o nosso componente Titlewindow. Falarei sobre ele. E claro, o “managers.PopUpManager” para nosso efeito PopUp. Ja falei de PopUp em um post anterior.

public function Login():void{
			var loginPopUp : lfishblog = lfishblog(PopUpManager.createPopUp(this, componentes.lfishblog , true));
			loginPopUp.setFocus();
			PopUpManager.centerPopUp(loginPopUp);
 
		}

Acima, nossa função do Listener cria um PopUp com o componente lfishblog focado. Agora, vamos criar uma pasta, dentro do diretório SRC da árvore do diretórios do projeto, com o nome componetes. Logo após, clique com o botão direito em cima da pasta componetes e escolha NEW>MXML Component. Uma janela irá aparecer para inserção de um nome para o novo componente. No campo BASED ON, escolha TitleWindow. O nome do meu componente é lfishblog.

		< ![CDATA[
		import mx.rpc.events.ResultEvent;
		import mx.rpc.events.FaultEvent;
                import mx.rpc.http.HTTPService;
		import mx.controls.Alert;
		import mx.managers.PopUpManager;
 
		 public function gerenciarRetorno(event:ResultEvent):void
	        {
	        	switch (event.result.toString()){
	        		 case "required":
        					Alert.show("Os campos de Login e Senha são requeridos","Required");
 
        					break;
 
	        		case "password":
	        				Alert.show("Password Invalido","Pass error");
	        				break;
 
	        		case "login":
	        				Alert.show("Login Invalido","Login");
	        				break;
 
	        		case "OK":
	        				PopUpManager.removePopUp(this);
 
	        	}
	        }

Aqui está a parte interessante. Veja que criei uma função chamada “gerenciarRetorno()”. Ele tem como parâmetro um evento do tipo ResultEvent. Nesse caso, o retorno que o PHP nos enviará. Na função de controle de fluxo switch, converti o dado para o tipo String.

switch (event.result.toString()){…

E como ja sabemos, o switch nos permite trabalhar entre os casos de retorno. Usei required, password, login e OK como códigos. Faça como achar melhor.

     case "OK":
	          PopUpManager.removePopUp(this);

Caso o código retornado seja OK, nós removeremos o PopUp e diponibilizamos as funções que, provavelmente, estariam ao fundo da tela.

  Alert.show("Os campos de Login e Senha são requeridos","Required");

O “Alert.show” será uma forma elegante de nos apresentar erros como ‘senha e campos requeridos’ e etc.

public function fault(event:FaultEvent):void
	        {
	           Alert.show(event.fault.faultString, "Error");
	        }

A função Fault terá o trabalho de “pegar” todos os erros no protocolo HTTP. Agora, iremos trabalhar no caminho para o PHP.

 
			{login.text}
			{senha.text}

Veja que o HTTPService é identifacado no sistema como “authHTTP”. URL será a localização do nosso codigo PHP.

		result="gerenciarRetorno(event);"
		fault="fault(event);"
		resultFormat="text">

No código acima temos o tratamento do resultudo com a funcão “gerenciarRetorno(event)”, o tratamento dos erros com “fault(event)” e o timpo do retorno resultFormat=”text”.

 
			{login.text}
			{senha.text}

Acima, uma uma propriedade que envia os campos com os dados para autenticação.

Por fim, 2 Labes e 2 TextInput e um Button. Eles receberão nome e senha. Ao clicar no Button a função “authHTTP.send()” enviará nossos dados. Não esqueçam de por “displayAsPassword=”true”” para o TextInput da senha.

Espero ter ajudado pessoal. O link dos arquivos, etrutura de projeto, inclusive o PHP  e etc estão em:Login com Flex e PHP.

Escrito por Fernando Carvalho \\ tags: Flex, LinkedIn