1 - Introdução

Uma das maiores vantagens do uso de Flex é que a aplicação e boa parte do processamento das regras de negócios podem ser feitas no cliente, ou seja, no browser do usuário. Isso faz com que recursos do servidor web sejam poupados consideravelmente.

Contudo, há momentos em que a aplicação Flex precisa obter ou enviar dados ao servidor web. Geralmente isso é feito de forma assíncrona, de modo que o usuário poderá continuar interagindo com a aplicação enquanto requisições são feitas nos bastidores.

Uma das formas mais comuns de acesso ao servidor web por parte de uma aplicação Flex é por meio de RPC (Remote Procedure Call - Chamada Remota de Procedimento). Este artigo aborda a técnica usada para enviar dados informados pelo usuário na aplicação Flex para um programa PHP. O programa PHP, por sua vez, poderá processar os dados recebidos e emitir uma resposta informando o sucesso ou falha da operação.

2 - Descrição do projeto

A aplicação que escreveremos é um sistema simples de login de usuários. O usuário informará o nome de usuário e senha e clicará o botão Acessar. Neste momento a aplicação Flex fará uma chamada remota a um programa PHP enviando o nome de usuário e senha por meio do método POST. Tão logo o programa PHP seja executado, teremos uma janela de mensagem informando se os dados informados estão corretos ou incorretos.

Antes de prosseguirmos, veja abaixo a aplicação Flex totalmente funcional. Experimente informar quaisquer dados e finalmente informe "osmar" como nome de usuário e "arquivo" como senha:



3 - O documento PHP

A melhor forma de realmente entender este projeto, é começando pelo código PHP. Veja a sua simplicidade:

Código para logar_flex.php

<? $usuario = htmlspecialchars($_POST["usuario"]); $senha = htmlspecialchars($_POST["senha"]); if(($usuario == "osmar") && ($senha == "arquivo")){ echo "sucesso"; } else{ echo "erro"; } ?>

Veja que aqui nós testamos os valores das variáveis $usuario e $senha. Se o teste for positivo, apenas escrevemos "sucesso" no documento. Se for negativo, escrevemos "erro". É claro que em uma aplicação do mundo real, o nome de usuário e senha poderiam ser verificados em uma base de dados. O importante aqui é perceber que os dados que estamos escrevendo no documento estarão visíveis à aplicação Flex quando a chamada remota de procedimentos (RPC) retornar.

4 - O documento MXML

Como já sabemos de artigos anteriores, uma aplicação Flex é descrita em um documento do tipo XML chamado MXML. Neste documento podemos descrever o comportamento da aplicação e também adicionar códigos ActionScript. Veja a listagem:

Código para Login.mxml:

<?xml version="1.0" encoding="iso-8859-1"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel id="painel" title="Login do Usuário" status="Active" height="200" width="200" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Label text="Usuário:"/> <mx:TextInput id="nome"/> <mx:Label text="Senha:"/> <mx:TextInput displayAsPassword="true" id="senha"/> <mx:Button label="Acessar!" click="login.send()"/> </mx:Panel> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; public function sucesso(event:ResultEvent):void{ var resultado:String = String(event.result); if(resultado == "sucesso") Alert.show("Login efetuado com sucesso!", "Login"); else Alert.show("Nome de usuário ou senha não confere!", "Login"); nome.text = ""; senha.text = ""; } public function falha(event:FaultEvent):void{ Alert.show("Falha: " + event.fault.toString(), "Erro"); } ]]> </mx:Script> <mx:HTTPService id="login" url="http://www.arquivodecodigos.net/arquivo/logar_flex.php" method="POST" result="sucesso(event)" fault="falha(event)" resultFormat="text"> <mx:request> <usuario>{nome.text}</usuario> <senha>{senha.text}</senha> </mx:request> </mx:HTTPService> </mx:Application>

Vamos começar analisando os controles usados nesta aplicação:

<mx:Label text="Usuário:"/> <mx:TextInput id="nome"/> <mx:Label text="Senha:"/> <mx:TextInput displayAsPassword="true" id="senha"/> <mx:Button label="Acessar!" click="login.send()"/>

Veja como definimos os valores "nome" e "senha" para a propriedade id das duas caixas de texto. Ao definir true para a propriedade displayAsPassword da segunda caixa de texto, nós fazemos com que ela se comporte como um campo de senha. Veja que, no evento click do botão, nós fazemos uma chamada ao método send() de um componente chamado login. Vamos analisá-lo agora:

<mx:HTTPService id="login" url="http://www.arquivodecodigos.net/arquivo/logar_flex.php" method="POST" result="sucesso(event)" fault="falha(event)" resultFormat="text"> <mx:request> <usuario>{nome.text}</usuario> <senha>{senha.text}</senha> </mx:request> </mx:HTTPService>

Aqui nós temos um componente do tipo HTTPService, usado para as chamadas remotas de procedimento. Veja como definimos a URL do documento PHP que será chamado, o método a ser usado (POST), a função que será chamada em caso de sucesso, a função que será chamada em caso de falha e a forma de retorno, em nosso caso será texto puro.

Os parámetros para o documento PHP são enviados por meio de um componente request:

<mx:request> <usuario>{nome.text}</usuario> <senha>{senha.text}</senha> </mx:request>

Veja que o documento PHP receberá variáveis chamadas usuario e senha e seus valores serão o conteúdo das caixas de texto nome e senha.

Observe agora a função sucesso:

public function sucesso(event:ResultEvent):void{ var resultado:String = String(event.result); if(resultado == "sucesso") Alert.show("Login efetuado com sucesso!", "Login"); else Alert.show("Nome de usuário ou senha não confere!", "Login"); nome.text = ""; senha.text = ""; }

Se a chamada remota ao documento PHP for feita com sucesso, o texto enviado pelo documento PHP (vimos isso lá em cima) será armazenado em event.result. Tudo que temos a fazer é converter esse conteúdo em uma variável do tipo String e efetuar alguns testes:

var resultado:String = String(event.result);

5 - Hora de compilar e executar

Chegou a hora de compilar e testar. Veja os artigos anteriores se você ainda tiver dificuldades em compilar, executar ou colocar o resultado final em uma página HTML.

Uma advertência: Para que o exemplo funcione corretamente, o documento PHP deverá ser chamado a partir do mesmo domínio em que a aplicação Flex se encontra, ou seja, o Flash Player aplica restrições de acesso quando tentamos efetuar RPC usando domínios diferentes. A mensagem de erro é bem parecida à exibida abaixo:

Falha: [RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]

Graduado em Ciência da Computação pela UNIP (Universidade Paulista) e atualmente morando em Goiânia-GO. Desde 1998 tem atuado no desenvolvimento de sistemas, seja como responsável principal ou como freelancer ou consultor. Entre as linguagens que já desenvolveu pode-se incluir Java, Delphi, C++, Python, Perl, PHP, Ruby, etc. Alguns projetos já desenvolvidos incluem salas de chat, fóruns, sistemas de gerenciamento de notícias, blogs, sistemas de helpdesk, sites corporativos, sistemas acadêmicos e financeiros. É o proprietário e principal editor de conteúdo do site Arquivo de Códigos.

Atua também como professor do curso de Sistemas de Informação da Faculdade Delta (http://www.faculdadedelta.edu.br)

Este usuário atua como freelancer Veja a relação de freelancers

Use este formulário para inserir um novo comentário para este artigo ou tutorial. É preciso estar logado no site. Se você já um usuário registrado, efetue o login no menu esquerdo de nossas páginas.

Título do comentário:

Seu comentário:

Dicas de formatação: Não é permitido código HTML nos comentários. No entanto, você pode conseguir boas formatações usando: [b][/b] - para negrito [ul][/ul] - para listas não ordenadas [li][/li] - para itens da lista [pre][/pre] - para exibir trechos de códigos-fonte (de forma a manter a formatação e facilitar a leitura)

Escrevendo um sistema de login de usuários usando Flex + PHP

Criando sua primeira aplicação em Adobe Flex

Conhecendo o Flex Builder - Da instalação à primeira aplicação

Baixando, instalando e testando o SDK do Adobe Flex no Windows

Ruby - Instalando e executando Ruby no Windows

Java Servlets - Escrevendo, compilando e executando seu primeiro Servlet

Java - Recursos de autoboxing e unboxing - O que são e quando devo usar?

Apache Tomcat - Entendendo a estrutura e funcionalidade dos diretórios do Tomcat

Perl - Escrevendo seu primeiro programa Perl no Linux Ubuntu

Python - Instalando e executando Python no Windows

Java - Java Persistence Architecture API (JPA): O que é, como baixar, instalar, configurar e testar

Python - Escrevendo códigos CGI usando Python no Apache Web Server e Windows

Java - Gerenciadores de Layout - Apresentando BorderLayout

Adobe Flex - Criando sua primeira aplicação em Adobe Flex

AJAX - Introdução ao processamento assíncrono usando AJAX

Java - Aprenda a manipular bases de dados MySQL usando Java :: Baixando, instalando e testando o driver para a conexão Java + MySQL

Qt - Instalando e escrevendo sua primeira aplicação Qt no Windows

Ruby On Rails - Instalando Ruby On Rails no Windows

Ruby - Escrevendo seu primeiro programa em Ruby

Tipos de dados da linguagem Java