Já escrevi sobre Flex + PHP, e resolvi voltar ao assunto para fazer uma atualização no tema, trazendo novidades, que são sempre interessantes e importantes. Espero poder ajudar bastante a todos que se interessem por essa tecnologia e, caso tenham dúvidas, por favor, entrem em contato por e-mail. Sugestões para novos artigos também são muito bem aceitos.

Como o Flex funciona?

O Flex tem como base a linguagem Action Script 3.0, junto com uma outra linguagem de desenvolvimento chamada MXML. Com essas duas linguagens, basta compilar para se obter o resultado desejado. Esse resultado é um arquivo com a extensão SWF, nativa do Flash Player. Assim, com o SWF, podemos apresentar nosso sistema no Browser do cliente. Veja:

Quando criamos um aplicativo no Flex, o SWF é gerado e então você pode publicá-lo na web. O processo é muito semelhante ao Flash mesmo. O que precisamos ter em mente é que, quando uma pessoa acessa o nosso sistema em Flex, o arquivo SWF é baixado para o computador da pessoa (Cache do Browser). Como o SWF está no cliente, não existe uma forma de conectar no banco de dados e realizar outras operações, que são exclusivas de um servidor.

A saída é utilizar uma linguagem que roda no servidor, tal como PHP, ASP, Java etc. Com esta outra linguagem de script, rodando no lado do servidor, temos um grande ganho de interatividade com o usuário.

Formas de conexão com o servidor

Existem atualmente três meios de comunicação entre um aplicativo Flex (lembre-se, o swf que está na máquina do cliente) e o seu servidor, veja:

• RemoteObjects: é a forma de conexão mais rápida. A comunicação entre o cliente e o servidor é realizada de forma binária, com os dados comprimidos. É utilizado um padrão de comunicação chamado AMF (Action Message Format), no qual o servidor deve estar preparado para “entender” tal padrão. Isso significa que somente uma linguagem de script ao lado de servidor não basta. Você precisa de algo a mais nela, como um plug-in (ou uma extensão). Existem principalmente dois produtos usados nesta comunicação: AMFPHP e Zend_AMF. Neste artigo iremos utilizar AMFPHP.
• HTTPService: usa o protocolo HTTP para comunicação, deixando-o lento. Neste caso, o cliente somente irá ler o que o script do servidor fornecer. A maioria dos scripts em flash são feitos assim, com o servidor retornando algo do tipo “variavel1=valor1&variavel2=valor2…” Iremos fornecer um exemplo para melhor exemplificar este caso, em um próximo artigo.
• WebService: está ficando cada vez mais famoso na internet, por se tratar de um padrão de comunicação entre plataformas e aplicativos distintos. Mas os webservices não passam de um simples XML, lidos através do protocolo SOAP. Também são lentos e não serão utilizados em nossos artigo.

Preparando o servidor WEB

Para facilitar o desenvolvimento PHP, precisamos instalar um servidor web em nosso próprio computador. Iremos instalar o servidor chamado WAMP Server. Se você já possui esse servidor instalado em seu computador, pode pular esta etapa. Acesse o seguinte endereço…

http://www.wampserver.com/en/download.php

…e clique em “DOWNLOAD WampServer 2.0i”. Faça o download do arquivo e, após o término, execute-o. Siga a instalação padrão (next, next, next, finish). Podem aparecer janelas pedindo o caminho do arquivo “explorer.exe” e também do firewall do windows, pedindo para habilitar o acesso do “apache.exe”. Após o término, veja na bandeja do windows que o ícone do WAMP Server está ativo, conforme a figura a seguir:

Acesse “http://localhost” e verifique se a página Wamp Server aparece:

Preparando o Projeto Flex 4

Agora vamos criar o projeto Flex, para que possamos realizar a comunicação com o PHP. Com o Flash Builder 4 aberto, crie um novo projeto, acessando File > New > Flex Project, conforme a imagem a seguir:

Não clique em FINISH ainda, é preciso configurar o OUTPUT folder. Essa configuração é muito importante, e está definida na próxima tela:

O Output Folder diz para onde os arquivos compilados do projeto serão copiados. Isso significa que o código fonte do projeto Flex pode ficar em qualquer lugar, mas os arquivos compilados devem ficar em alguma pasta no diretório públic c:\wamp\www. Isso é necessário para que possamos acessar a aplicação através do “http://localhost/<projeto>”. Não clique em Finish ainda, clique em Next.

A próxima tela, apesar de ter várias configurações, precisamos alterar apenas o campo “Output Folder URL”. Nesse campo insira: “http://localhost/TesteConexaoAMFPHP”:

Agora clique em Finish e, como primeiro teste, clique no botão RUN (Seta verde). Surge uma tela em branco, e o mais importante é o endereço do navegador:

Agora que o projeto Flex está OK, precisamos instalar o AMFPHP…

Instalando o AMFPHP

Acesse www.amfphp.org e clique no link “download”. Faça o download da última versão estável. Descompacte o arquivo amfphp1.9.zip  e copie a pasta “amfphp 1.9” para o diretório “C:\wamp\www\TesteConexaoAMFPHP”. Renomeie a pasta “amphp 1.9” para simplesmente amfphp. Acesse o seguinte endereço:

http://localhost/TesteConexaoAMFPHP/amfphp/gateway.php

Deve surgir a seguinte página:

Agora que o amfphp está instalado corretamente, vamos voltar ao Flex e configurá-lo.

Configurando o arquivo services-config.xml

Com o Flash Builder aberto, vá até File > New > File. Coloque o nome services-config.xml e clique em Finish.

Preencha esse arquivo com o seguinte codigo xml:

<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/TesteConexaoAMFPHP/amfphp/gateway.php"
                      class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

Salve o arquivo e abra as propriedades de projeto do Flex. Precisamos agora configurar o arquivo xml como parte da compilação do projeto, conforme a figura a seguir:

Ou seja, adicionamos um “-services services-config.xml” na diretiva de compilação.

Criando a classe PHP

A classe PHP deverá ficar dentro da pasta “services” do amfphp. Crie o arquivo HelloWorld.php e adicione o seguinte código:

<?php
class HelloWorld {
    public function sayHelloWorld() {
        return "Hello World from PHP";
    }
}

Veja que não fechamos a tag <?php com ?> … Fizemos isso de propósito para não termos problemas futuros. É uma boa prática recomendada pela Zend.

Criando a chamada Flex

Finalmente vamos testar a chamada do Flex no PHP. Para isso usamos o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;

		protected function onSayHelloWorld(e:ResultEvent):void
		{
			Alert.show(e.result.toString());
		}

		protected function onFault(e:FaultEvent):void
		{
			Alert.show(e.message.toString());
		}


	]]>
</fx:Script>


<fx:Declarations>
	<!-- Place non-visual elements (e.g., services, value objects) here -->

	<mx:RemoteObject id="conn" destination="amfphp" source="HelloWorld">
		<mx:method name="sayHelloWorld" result="onSayHelloWorld(event)" fault="onFault(event)" />
	</mx:RemoteObject>

</fx:Declarations>

<s:Button label="Say Hello!">
	<s:click>
		<![CDATA[
			conn.sayHelloWorld();
		]]>
	</s:click>
</s:Button>


</s:Application>

Nesse código, criamos o objeto “RemoteObject” com o atributo destination igual a “amfphp”, que é o mesmo destination do xml de configuração. A propriedade source aponta para a classe que está na pasta services do AMFPHP. Dentro de remoteObject criamos o método sayHelloWorld, que possui dois eventos, um se a conexão for Ok, e outro em caso de erros. Depois criamos o botão que irá chamar esse método. Ao chamar o método, o remoting faz a conexão com o PHP, acessa a classe HelloWorld, acessa o método sayHelloWorld, que por sua vez retorna uma String. Essa string é retornada ao Flex, embutida no evento OnSayHelloWorld. A string está contida no atributo e.result.

O resultado é o seguinte:

Até a próxima!