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!