Olá comunidade Flex. Este é meu primeiro artigo publicado no iMasters e o objetivo é aprendermos a popular um DataGrid, utilizando o PHP como camada intermediária entre o Flex e o MYSQL. Para tanto, utilizaremos o AMFPHP, que é uma alternativa open-source do Flash Remoting.
Pré-requisitos:
01. Noções básicas do Flex 2.0;
02. Possuir um servidor (IIS ou Apache) rodando em localhost;
03. Servidor MYSQL (também em localhost);
04. AMFPHP instalado e configurado.
Como o objetivo deste artigo não é aprendermos a configurar o IIS (ou Apache) nem o MySQL, começaremos com o AMFPHP, que você encontra em www.amfphp.org. Após ter baixado o pacote, descompacte-o em uma pasta qualquer e torne-a compartilhada para web (sugestão c:\amfphp).
A estrutura deverá ficar como a seguir:
Crie no MySQL, uma tabela com a estrutura a seguir:
CREATE TABLE 'contatos' (
'id' int(11) unsigned NOT NULL auto_increment,
'nome' varchar(60) collate latin1_general_ci NOT NULL,
'email' varchar(60) collate latin1_general_ci NOT NULL,
PRIMARY KEY ('id')
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
Obs.:
01. Adicione alguns registros na tabela recém-criada (utilizando o software de sua preferência). Caso contrário, não haverá dados para popular do DataGrid, pois como já falei anteriormente, o motivo deste artigo é apenas popular um DataGrid e não inserir ou alterar dados na tabela (este assunto, veremos em outra matéria, em breve).
02. O nome do banco de dados deverá ser flexcomphp.
Vamos ao código PHP.
Crie um arquivo chamado conexao.php na pasta services da sua recém criada pasta onde está o AMFPHP, com o código a seguir:
<?php
// criando uma classe para PHP Remoting
class conexao {
function conexao() {
$this->methodTable = array(
"getLista" => array(
"description" => "Retorna conteudo da tabela",
"access" => "remote"));
}
function getLista() {
$conexao = mysql_connect("localhost","root","");
mysql_select_db("flexcomphp", $conexao);
//
$sql = "SELECT * FROM contatos";
$resultado = mysql_query($sql, $conexao);
while ($linha = mysql_fetch_object($resultado)) {
$ArrayRetorno[]=$linha;
}
//
mysql_free_result($resultado);
return($ArrayRetorno);
}
}
?>
Obs.: Por se tratar de uma classe, note que o nome do arquivo e o nome da classe construtora deverão ser idênticos, no nosso caso conexao.php.
Uma boa forma para sabermos se está tudo OK até agora é o seguinte endereço: http://localhost/<nomedapastaondeestaoamfphp>/browser/index.html
Onde: <nomedapastaondeestaoamfphp> deverá ser substituído pelo caminho onde você instalou e compartilhou o amfphp.
Se tudo estiver correto, deverá aparecer o seguinte:
Agora, vamos ao código MXML:
Abra o Flex e crie um novo projeto básico (no meu caso eu usei o nome flexcomphp).
01. File > New > Flex Project, deixe a opção default (Basic) selecionada e pressione Next.
02. Escolha
um nome para o projeto. No meu caso eu usei flexcomphp.
Desmarque a opção Use default location e
escolha uma pasta para nosso novo projeto Flex.
03. Pressione Finish
No modo source, digite o código a seguir:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="buscaDadosMYSQL()">
<mx:DataGrid dataProvider="{PHPDados}" x="10" y="10">
<mx:columns>
<mx:DataGridColumn headerText="Código" dataField="id"/>
<mx:DataGridColumn headerText="Nome" dataField="nome"/>
<mx:DataGridColumn headerText="email" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[
import flash.net.Responder;
//
[Bindable]
public var PHPDados: Array;
//
public var gateway: ConexaoRemota;
//
public function buscaDadosMYSQL():void {
gateway = new ConexaoRemota("http://localhost/amfphp/gateway.php");
gateway.call("conexao.getLista", new Responder(onOK, onFalha))
}
//
public function onOK(resultado:Array):void {
PHPDados = resultado;
}
//
public function onFalha(falha:String):void {
trace(falha);
}
]]>
</mx:Script>
</mx:Application>
Agora, vamos criar um arquivo ActionScript chamado ConexaoRemota.as, o qual deverá estar na pasta root de seu projeto Flex recém-criado, com o seguinte código:
package {
import flash.net.NetConnection;
import flash.net.ObjectEncoding;
//
public class ConexaoRemota extends NetConnection {
public function ConexaoRemota(strURL:String) {
objectEncoding = ObjectEncoding.AMF0;
//
if(strURL) connect(strURL);
}
}
}
Note, mais uma vez, que por se tratar de uma classe, o nome externo da classe e do método construtor deverão ser idênticos. Nesse caso, ConexaoRemota.as.
Agora nosso projeto está completo, basta apenas testá-lo.
Não vamos esquecer que para rodar nosso projeto, devemos executá-lo através de nosso servidor de internet, no nosso caso o endereço será:
http://localhost/flexcomphp/bin/flexcomphp.html
Obs.: Não podemos esquecer que, de acordo com a política de restrição de acesso da Adobe (que um .SWF só poderá acessar uma base de dados localizada no mesmo domínio), deveremos compartilhar nossa pasta (que contém o projeto recém criado no Flex) como se fosse uma pasta Web.
Espero ter sido útil. Até breve!
15 Comentários
Qual a sua opinião?