Etapa 1: O projeto

Requisitos: Eclipse e Flex Builder 2.

1) Crie a pasta flex e a pasta aplicacao dentro da pasta sequencial_flex_amfphp(me refiro a que está na raiz do servidor apache).

| sequencial_flex_amfphp
|– amfphp
|——services
|——— sequencial_flex_amfphp
|———— Teste.php
|– config
|—— Conexao.php
|– flex
|– aplicacao

1a) Observação: Esta etapa de criação do projeto é muito importante seguir todos os passos para que a aplicação funcione corretamente. No Flex Builder 2 crie um projeto(escolha a opção basic na primeira tela da criação do projeto) com o nome de sequencial_flex_amfphp.

No passo 2 da imagem abaixo não utilize o caminho default, coloque o endereço completo da pasta sequencial_flex_amfphp\flex.

1b) Preste muita atenção nesta etapa: no passo 1 digite codigofonte(que é o nosso pacote padrão ou raiz). No passo 2 coloque o nome de Principal.mxml(que é o arquivo raiz da aplicação, é como o index.html nas páginas HTML). No passo 3 é onde a aplicação é compilada, defina o caminho completo para a pasta sequencial_flex_amfphp\aplicacao. Já no passo 4 é o endereço http que cai na pasta sequencial_flex_amfphp\aplicacao, defina de acordo com as configurações do seu servidor apache, no meu caso é http://localhost/sequencial_flex_amfphp/aplicacao. Finalize a criação do projeto, passo 5.

1c) Agora que o projeto esta criado, ainda não é possível utilizá-lo com suporte ao AMFPHP com AMF3. Para que seja possível essa comunicação teremos que criar o arquivo de configuração que conta na documentação oficial do Flex 2 disponibilizada pela Adobe, eu estou me referindo ao arquivo services-config.xml. Crie este arquivo na pasta flex.

| sequencial_flex_amfphp
|– amfphp
|——services
|——— sequencial_flex_amfphp
|———— Teste.php
|– config
|—— Conexao.php
|– flex
|—— services-config.xml
|– aplicacao

Depois de criar o arquivo você deve colocar a configuração especificada abaixo:

<?xml version=”1.0″ encoding=”utf-8″?>
<services-config>
<services>
<service id=”amfphp-flashremoting-service” class=”flex.messaging.services.RemotingService” messageTypes=”flex.messaging.messages.RemotingMessage”>
<destination id=”amfphp”>
<channels>
<channel ref=”amfphp”/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id=”amfphp” class=”mx.messaging.channels.AMFChannel”>
<endpoint uri=”http://localhost/sequencial_flex_amfphp/amfphp/gateway.php” class=”flex.messaging.endpoints.AMFEndpoint”/>
</channel-definition>
</channels>
</services-config>

No código acima não esqueça de configurar na tag: <endpoint uri=”http://localhost/sequencial_flex_amfphp/amfphp/gateway.php” class=”flex.messaging.endpoints.AMFEndpoint”/> O atributo uri com o endereço do gateway de acordo com as configurações do seu servidor web.

1d) Agora falta especificar este arquivo de configuração nas configurações do projeto, para que ele seja utilizado na compilação. Para fazer isto, clique o com botão direito do mouse no nosso projeto, no painel navigator do eclipse, e escolha a opção properties. Na janela que abrirá escolha a opção Flex Compiler, no menu a esquerda. Na opção additional compiler arguments adicione os parâmetros: -locale en_US -services “../services-config.xml”.

Para que este passo seja executado corretamente você deve ter configurado o passo 1b corretamente. Neste ponto a sua estrutura do projeto deve ficar assim:

Se nenhum erro aparecer, é sinal de que a configuração do projeto foi concluida com sucesso e você já pode iniciar a comunicação do Flex com o AMFPHP 1.9 com AMF3. Para finalizar esta parte do seqüencial é necessário efetuar os testes para ter certeza que a configuração está correta.

————————————————————————————–

Etapa 2: Testando as configurações do projeto

2a) Para iniciar os testes vamos criar a seguinte arquitetura no projeto:

Crie o pacote classes dentro do pacote codigofonte. Dentro do pacote classes crie o pacote services. Dentro do pacote services crie a classe TesteService com o conteúdo abaixo:

package sequencial.classes.services
{
import mx.rpc.remoting.RemoteObject;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

public class TesteService
{
private var testeRemoteObject:RemoteObject;

public function TesteService():void
{
testeRemoteObject = new RemoteObject();
testeRemoteObject.destination = “amfphp”;
testeRemoteObject.source = “sequencial.classes.services.TesteService”;
}

public function totalUsuarios(totalUsuariosFaultFunction:Function, totalUsuariosResultFunction:Function):void
{
testeRemoteObject.getOperation(“totalUsuarios”).addEventListener(ResultEvent.RESULT, totalUsuariosResultFunction);
testeRemoteObject.getOperation(“totalUsuarios”).addEventListener(FaultEvent.FAULT, totalUsuariosFaultFunction);
testeRemoteObject.getOperation(“totalUsuarios”).send(null);
}
}
}

2b) Agora abra o arquivo Principal.mxml para implementarmos a chamada do serviço:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”principalCreationComplete()”>

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import sequencial.classes.services.TesteService;
private var testeService:TesteService;
private function principalCreationComplete():void
{
testeService = new TesteService();
testeService.totalUsuarios(totalUsuariosFaultFunction, totalUsuariosResultFunction);
}
private function totalUsuariosFaultFunction(eventoFaultEvent:FaultEvent):void
{
Alert.show(eventoFaultEvent.fault.message);
}

private function totalUsuariosResultFunction(eventoResultEvent:ResultEvent):void
{
Alert.show("Total de usuários cadastrados = " + eventoResultEvent.result);
}
]]>
</mx:Script>

</mx:Application>

2c) Você vai perceber que o serviço apontado não existe: testeRemoteObject.source = “sequencial.classes.services.TesteService”; Então vamos configurá-lo.

| sequencial_flex_amfphp
|– amfphp
|——services
|——— sequencial_flex_amfphp
|——— sequencial
|————– classes
|—————– services
|—————– TesteService.php
|———— Teste.php
|– config
|—— Conexao.php
|– flex
|– aplicacao

Remova os diretório em vermelho e crie os destacados em verde. Crie o arquivo TesteService.php destacado em azul. Segue o conteúdo do arquivo TesteService.php:

<?php
require_once(“../../../../../config/Conexao.php”);

class TesteService
{
private $CONEXAO;

public function __construct()
{
$CONEXAO = new Conexao();
$this->CONEXAO = $CONEXAO->getConexao();
}

public function totalUsuarios()
{
$SQL = “SELECT * FROM usuario”;
$QUERY = mysql_query($SQL, $this->CONEXAO);
return mysql_num_rows($QUERY);
}
}
?>

2d) Agora execute a sua aplicação clicando no botão Run do Flex Bulder. A aplicação deverá aparecer como na imagem abaixo:

————————————————————————————–

Revisando

Nesta parte do seqüencial foi abordado a configuração do Flex Builder para que possa efetuar a comunicação com o AMFPHP utilizando o AMF3.

————————————————————————————–

Por enquanto é isso, aguarde a terceira parte deste seqüencial que abordará a continuação deste assunto para que seja possível a criação do login.

Baixe aqui os arquivos fontes – Atenção ao baixar os arquivos: Eles podem não funcionar corretamente no seu computador, pois será necessário atualizar as configurações do projeto de acordo com as especificações do seu servidor. Para reconfigurar o projeto siga os passos abordados neste artigo: os tópicos 1b e 1c.

Caso tenha alguma dúvida utilize o fórum.
Abraços, Renan Fretta – renan@mxstudio.com.br