Integração flex + php + mysql – amfphp

Bem, a polêmica do mês é flash x html 5 , e devido a isso nada melhor que um artigo sobre integração do Flex (RIA) com PHP, através do gateway AMFPHP, recomendado para quem já usa php como linguagem de servidor e pretende adotar a camada cliente e servidor, deixemos bem claro que neste ‘cliente e servidor’ apresentado existe uma conexão bem mais rápida devido a forma que os dados são transportados, no caso, determinantes para construção de grandes softwares com acesso via web , cloud clusters, etc.

Para quem não sabe Flex usa a mesma maquina virtual usada no flash, porém sem timeline, e usando componentes que fazem do Adobe Flex Builder um framework para construções usando o padrão RIA, e ainda conta com auxilio da poderosa linguagem action script. Um aplicativo feito em RIA possibilita que suas funcionalidades serão sempre as mesmas em qualquer navegador, não existem bugs de compatibilidade, versões e muito menos se o navegador usado esta ai para as normas do W3C.

Mas este é um assunto para outro artigo.

Para um bom entendimento deste artigo recomendo uma base em action script 3, php, e mysql .

Durante o decorrer do artigo veremos:

- Como instalar o gateway AMFPHP,

- Como criar um serviço php-mysql para ser acessado pelo Flex,

- Usaremos Remote Object que é uma das mais usadas formas de comunicação entre softwares Flex e Flash com as outras linguagens, php, ruby, java, etc;

- Como configurar o caminho do AMFPHP no Flex,

- Trabalhando com DataGrid para visualização dos dados.

Primeiro deixo com vocês um gráfico sobre velocidades entre softwares cliente/servidor, no mesmo vemos facilmente a vantagem sobre a velocidade que existe no Flex usando AMF3 como gateway.

Clique para ampliar.

Vamos começar, montando o cenário:

Supondo que você já tenha sua hospedagem com php e mysql rodando ok, pode ser servidor remoto ou no seu localhost mesmo, usando XAMPP,http://www.apachefriends.org/en/xampp-windows.html, um exemplo.

Iremos usar o Adobe Flex Builder, suponho que você já tenha instalado, caso não, o link é http://www.adobe.com/products/flex/ e você pode baixar uma versão para usar durante 30 dias de teste, depois devera obter uma licença para continuar usando.

Agora iremos instalar o AMFPHP no seu servidor, entre no site http://sourceforge.net/projects/amfphp/ e baixe ele.

Descompacte o mesmo em um diretório do seu servidor melhor no ROOT, no meu caso usando localhost com XAMPP no endereço HTTP ficou http://localhost/amfphp/

Após colocar os arquivos do AMFPHP no seu diretório escolhido iremos configurar o seu gateway, para isso acesse http://localhost/amfphp/browser/ veremos que são perguntadas algumas opções, deixe tudo como está e de clique em save. (tela abaixo)

Esse browser serve apenas para que tenhamos certeza que o gateway esta a funcionar corretamente, não necessita aprofundamentos agora, vejam que do lado esquerdo superior ele lista os serviços que o flex acessa no php, como ainda não criamos nenhum serviço, apenas o padrão do AMFPHP aparece.

Vamos configurar agora o banco de dados de onde virão os dados que serão visualizadados no flex, para isso iremos usar um banco típico, mysql, com algumas colunas e registros, exemplo abaixo das colunas e alguns dados:

Clique aqui para baixar o banco de dados em formato sql.

Ok, depois de baixar é só importar no seu phpmyadmin e teremos um banco de dados pronto para ser listado no flex.

Agora iremos criar um serviço para ser consumido pelo Flex, no caso este serviço é apenas uma classe php e dentro dela temos os métodos, cada método seria uma função, a nossa classe em php simplesmente vai ser conectar ao mysql e logo apos selecionar os dados da tabela.

Dentro da pasta do seu amfphp, vá até a pasta services e crie um arquivo la dentro chamado de mysqlList.php, (amfphp/services/mysqlList.php) e dentro deste arquivo coloque a nossa classe que vem a seguir:

<?php
class mysqlList
{

function mysqlList ()
{
$this->conn= mysql_pconnect('localhost', 'userbd', 'password');
mysql_select_db ('namedb');
}

function listTable()
{
return mysql_query("SELECT * FROM teste order by id desc");

}

}
?>

Nota: o nome do arquivo deve ser o mesmo nome da classe interna no php, no caso mysqlList.

Atenção a linha 6 do código acima, você deve alterar o usuário do banco de dados em userbd e a senha do mesmo em password, suponho que você já trabalhe com conexões mysql / php, ate aqui sem segredo algum, na linha 7 coloque o nome do banco de dados onde esta a tabela criada anteriormente, e na linha 12 selecione qual tabela do banco de dados deseja abrir, no caso ai esta a tabela teste que é o nome da mesma tabela criada anteriormente.

A função mysqlList é apenas um método construtor da classe, e é executado sempre que a classe é iniciada, desta maneira estamos usando a mesma para criar uma conexão mysql sempre que a classe for executada.

O metodo listaTable nos lista os registros da tabela ‘teste’ e retorna os mesmos atraves do return, ou seja, sem segredo algum, php como ja vimos e estamos cansados de ver por ai.

Pronto! Temos um serviço em operação no gateway AMFPHP, para testarmos volte ao browser do seu AMFPHP em http://localhost/amfphp/browser/ e de um refresh, observe que apareceu do lado esquerdo em Service browser o serviço que acabamos de criar, Ótimo, agora clique sobre o mesmo e observe que aparece o método listTable, então basta você dar um ‘Call’ que o AMFPHP testa o método e apresenta o resultado abaixo, vemos a pagina com os results da nossa tabela teste e listando os dados em um datagrid, que o próprio AMFPHP traz embutido:

Confira aqui um exemplo online.

Serviço ok, agora vamos configurar o Flex para se conectar a estes dados usando Remote Object.

Abra o seu Adobe Flex Builder e crie um novo projeto, de o nome que desejar, no meu caso ficou testeflex, dentro do arquivo mxml coloque o código a seguir, irei comentar não se preocupem:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="521" height="344">

	<mx:RemoteObject
        id="gateway"
        destination="amfphp"
        source="mysqlList"
        showBusyCursor="true">

    <mx:method name="listTable"
    	result="createDatagrid(event)"/>

          </mx:RemoteObject>

	 <mx:Script>
          	<![CDATA[

          	   import mx.rpc.events.ResultEvent;

          	public function init():void {

          		 gateway.listTable();

          		}

          		public function createDatagrid(event:ResultEvent):void {

          		 list_data_grid.dataProvider = event.result;

          		}

          	]]>
          </mx:Script>

	<mx:DataGrid x="51.75" y="56" width="418" height="188" id="list_data_grid">
	</mx:DataGrid>
	<mx:Button x="51.25" y="269" label="Refresh" click="gateway.listTable()"/>

</mx:Application>

Agora falta configurarmos o endereço de nosso gateway, para configurar o endereço do nosso gateway para que o Flex possa encontra-lo, vamos criar um arquivo chamado service-config.xml dentro da pasta src, ou dentro da

pasta onde esteja seu projeto mxml, no meu caso ficou assim:

Muita atenção agora, abra o arquivo recém criado service-config.xml e coloquem o seguinte codigo la dentro:

<?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="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>

<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>

</channels>
</services-config>

No codigo acima, você precisa alterar apenas a tag ‘endpoint’,  no valor uri coloque o endereço completo para o seu gateway AMFPHP, que foi instalado anteriormente, o meu já está configurado, é importante que voce coloque o endereço corretamente, observe os dominios onde a aplicação sera executada, deve ser a mesma onde esta o gateway, pois por segurança o remote object não consegue se conectar a gateways que estejam em um dominio diferente.

Ex se no seu servidor voce acessa o gateway por www. site.com será importante que você use um subdominio ex flex.site.com e no gateway ficaria flex.site.com/amfphp, logico isso é so um exemplo, e como estou usando via localhost irei deixar assim.

Agora precisamos indicar ao flex onde esta o arquivo de mapeamento services-config.xml, para isso basta ir dentro do Adobe Flex Builder em ‘Project’, ‘Properties’ e selecione ‘Flex Compiler’ , na caixa ‘Additional compiler arguments’ onde esta listado -locale en_US, coloque -locale en_US -services “services-config.xml” se tiver duvidas olhe abaixo:

O que fizemos foi avisar ao Flex onde está o arquivo xml de mapeamento de gateways, e este arquixo xml nos da a localização dos mesmos remotamente, um gateway deste pode acessar infinitos metodos.

Logo depois clique no arquivo mxml principal, e depois clique exporte o projeto para swf, usando o menu ‘File’ ,  ‘Export’ e depois ‘Release Build’ e acesse o html gerado pelo navegador.

Explicando os codigos mxml e actionscript:

No codigo mxml do flex, temos o objeto remoto,

<mx:RemoteObject

id=”gateway”

destination=”amfphp”

source=”mysqlList”

showBusyCursor=”true”>

<mx:method name=”listTable”

result=”createDatagrid(event)”/>

</mx:RemoteObject>

A tag id  da nome ao objeto remoto, destination o id do gateway no caso amfphp, source é a classe php e showBusyCursor indica que o cursor do mouse indicara atividade ao ser usado este objeto, abaixo vem o metodo name que será executado no php listTable e logo apos o result é a funcao que deve ser chamada quando acabar de receber os dados, no caso a função createDatagrid, que recebe os dados, cria um datagrid (componente de listagem de dados do flex) e depois reabastece a mesma com os dados que vieram direto do mysql, esses dados vem em formato ArrayCollection, onde você poderá manipular eles, ordenar, trabalhar colunas etc.

Reparem em <mx:Application creationComplete=”init()” indica que quando a criação do projeto estiver concluída no navegador do usuário, a mesma será executada, neste caso a init() executa depois as funções de remoto objeto alimentando a datagrid com os dados vindos do mysql.

O buttom colocado foi só para demonstrar como atualizar via um click, ou como chamar estas funções de outra forma.

A aplicação ficou da seguinte forma:

Clique sobre para ver a aplicação em ação!

Nos próximos artigos falarei sobre como criar remote objects e datagrid dinamicamente por action script, trazendo mais dinamismo a aplicação.

Bem chegamos ao fim deste primeiro artigo, espero ter sanado as dúvidas iniciantes deste ambiente Flex e caso tenha  dúvidas favor postar em nossos comentários, ou e-mail me@luiztarabal.com.br .

O conteúdo deste artigo pode ser publicado 100% em outros meios desde que citada  a fonte no caso www.luiztarabal.com.br