Seções iMasters
Flash + Flex + PHP

Flex + PHP com AMFPHP

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!

Mensagem do anunciante:

Aprenda WordPress de uma vez por todas com os cursos especializados em WP do Apiki WP Cursos. Conheça!

Comente também

15 Comentários

Wagner Martins de Oliveira

Muito bom esse artigo sobre a interação entre Flash, PHP e Flex. É o que eu tanto buscava, uma forma segura e confiável onde eu poderia acessar um banco de dados em um arquivo SWF.
Além da possibilidade de fazer sites com bastante interatividade podemos fazer uma comunicação segura através do PHP…
Muito interessante.. bom mesmo. Parabens.

Parabéns pelo artigo Daniel. Mas pq n foi usado o Zend_Amf? Quais as diferenças dos dois qnd se fala em produtividade, segurança e desempenho?

Abraço

    Daniel Schmitz

    Use o Zend_AMF se for usar Zend_Table, Zend_ACL, Zend_RSS… etc… Aqui eu usei o AMFPHP porque esse artigo é uma atualização do artigo FLEX+PHP q estava obsoleto….

Luiz Nogueira

Olá Daniel,

Otimo artigo, como sempre. Mas percebi que o mesmo acabou gerando uma certa duvida entre o que usar AMFPHP e Zend_AMF, bem em meus projetos estou trabalhando com o Zend_AMF que é o recomendado hoje em dia pela ADOBE.
Mas no mais passei para parabeniza-lo pelo artigo. E estou ancioso para o lançamento do seu 4° livro Dominando o Adobe Flex 4, que já olhei e esta na pré venda, então vou correr e comprar.

Gostaria de saber Daniel se você sabe de algum curso ou palestra abordando FLEX aqui em BH?

Abraços….

É obrigatório o uso do Zend_AMF ou AMFPHP para criar aplicações FLEX + PHP, já sou desenvolvedor PHP e gostaria de eu mesmo fazer o desenvolvimento do 0 das minha aplicações

    Daniel Schmitz

    Não é obrigatório. Você pode usar JSON ou XML por exemplo, mas é muito mais lento. Só que o JSON é mais global, se você cria uma classe que retorna JSON pode usar Flex ou silverligth ou javaFx ou Ajax(html). Se for Zend_AMF ou AMFPHP, tem q usar o Flex.

Ótimo exemplo cara. ajudou muito,

Só foi preciso acertar alguns erros de sintaxe.

Parabéns.

Comprei já faz um tempo, o livro Desenvolvendo Sistemas com Flex e PHP, na epoca estava sem muito tempo para estudar, mas agora retomei minha leitura, e para me manter atualizado fiz algumas pesquisas na internet e constatei algumas informações sobre o AMFPHP ter sido descontinuado, e também que a versão 4 do Flex já foi lançada e com mudanças consideráveis a versão 3 que é abordada no livro.

Como meu conhecimento em Flex hoje é praticamente ZERO, o livro ainda se aplica ou seria interessante obter uma obra mais atualizada ?

Aguardo retorno

Eduardo Armstrong Correnti

Excelente artigo Daniel, muito, muito simples e funcional, parabéns!

Ricardo Morais

Olá Daniel, já li vários artigos sobre desenvolvimento flex e você e o Fabio Vedovelli são os que estão contribuindo para que eu aprenda cada vez mais sobre e fico agradecido por isso. Li num comentário que você é de JF, sou de leopoldina e gostaria de saber como anda o mercado nesta parte flex+php na cidade pois pretendo me mudar o mais breve possível e gostaria de trabalhar nesta área. Conhece empresas que atuem utilizando essas ferramentas? Abraço

Anderson Nunes

Aew parabéns pelo tuto… acho que foi o manual mais simples que já li sobre amf. ^^

Thiago Luiz Alves

Daniel, parabéns pelo tutorial foi um dos que me ajudaram quando comecei no Flex a uns meses atrás, você poderia escrever outro sobre a utilização de VOs no flex e php, através do explicitType e RemoteClass ?

Abç!

Marcelo

Pessoal eu estou com um problemão em meu projeto flex, não consigo entender porque isso está acontecendo, estou fazendo um projeto e hospedando a cada parte que estou concluindo, sendo que local tudo funciona beleza, quando se trata de rodar hospedado ele não roda, mesmo que eu nao acesso o site direto, vá direto para o amfphp/browser ele dá erro de send failed, mas o gateway funciona normal. Alguém pode me ajudar nisso ?

João do Pé de Feijão

E essa foto com cara de dor?

Qual a sua opinião?