Dheyson Wildny - Desenvolvimento para Web

Populando Datagrid Flex com informações do MySQL – parte II

2008-12-20T09:02:00.000-08:00

Olá a todos!

Vamos agora iniciar a segunda parte do nosso tutorial de conexão de Flex com MySQL e criar nossa aplicação flex para buscar as informações da base de dados.

1º. Passo: Crie um novo projeto Flex com o nome de conexao. E no arquivo *.mxml principal costumo colocar o nome de index.mxml ao invés de deixar com o mesmo nome do projeto, fica a gosto de cada um.

2º. Passo: Colocar o arquivo services-config.xml dentro do projeto e configurar as propriedades do mesmo para apontar para ele. Em caso de dúvida nesta etapa basta consultar o tutorial sobre configuração do amfphp com flex.

3º. Passo: Criar nossa hierarquia de DNS reverso como criamos dentro do services do amfphp, para armazenarmos nossas classes *.php, isto para que possamos trabalhar com o mapeamento de objetos *.php para *.as e vice-versa, caso tenha alguma dúvida sobre isto basta ler o tutorial sobre mapeamento. O projeto deverá ficar com a estrutura parecida com a da imagem abaixo.

4º. Passo: Nesta etapa vamos criar nossa classe ActionScript para fazer o mapeamento. Vá em: File -> New -> ActionScript Class. Dê o mesmo nome que foi dado para nossa classe *.php, ou seja, Cliente.as. Esta classe ActionScript que foi criada deverá estar dentro da pasta valuesObjects que foi criada na etapa anterior.

5º. Passo: Deixe o código-fonte da classe criada da seguinte forma:

package br.com.conexao.valuesObjects
{
    /* Aponta para a classe do php */
    [RemoteClass(alias="br.com.conexao.valueObjects.Cliente")]

    [Bindable]
    public class Cliente
    {
        public var id:int;
        public var nome:String;

        public function Cliente()
        {
        }
    }
}

6º. Passo: Agora vamos criar nossa classe de objeto remoto que será a responsável pela comunicação entre os objetos. Crie uma nova classe ActionScript e dê o nome de ObjetoRemoto.as, salve a classe dentro do diretório raiz do projeto, conforme imagem abaixo:

O código desta classe deverá ficar como descrito abaixo, deixei o código todo comentado para que facilite a compreensão, mas em caso de dúvida é só entrar em contato, ok?

package
{
    import mx.controls.Alert;
    import mx.rpc.events.FaultEvent;
    import mx.rpc.events.ResultEvent;
    import mx.rpc.remoting.mxml.RemoteObject;

    public class ObjetoRemoto
    {
        public function ObjetoRemoto(classe:String, metodo:String = null, funcao:Function = null, param:Object = null)
        {
            /* instancia um objeto remoto para conexão */
            var remoteObj:RemoteObject = new RemoteObject("amfphp");
            /* informa o nome da classe a se trabalhar "spacename.classname */
            remoteObj.source = classe;
            /* exibe o relógio na tela enquanto envia a requisição */
            remoteObj.showBusyCursor = true;
            /* verifica se ouve alguma falha */
            remoteObj.addEventListener(FaultEvent.FAULT, retornaFalha);
            /* pega o retorno da função */
            if (funcao != null)
                remoteObj.addEventListener(ResultEvent.RESULT, funcao);
            /* envia a requisicao ao gateway */
            if (metodo != null)
            {
                if (param != null)
                    remoteObj.getOperation(metodo).send(param);
                else
                    remoteObj.getOperation(metodo).send();
            }
        }

        private function retornaFalha(evt:FaultEvent):void
        {
            Alert.show("Ocorreu o seguinte erro ao tentar executar o método:\n"+evt.fault.message, "Erro");
        }
    }
}

Pronto, agora nosso projeto já está configurado e mapeado de forma correta para que possamos trabalhar. Na terceira e última parte veremos como chamar as informações para o datagrid.

Abraço a todos e até breve!

Populando Datagrid Flex com informações do MySQL – parte I

2008-12-20T08:12:00.001-08:00

Olá pessoal...

Me desculpem pela ausência durante as últimas semanas mas estive em um período de transições mas agora, voltei com força total para tentar passar o que sei a vocês.

Nesta semana, seguindo um roteiro lógico depois dos primeiros tutoriais que escrevi vou mostrar como retornar dados do MySQL para um datagrid em Flex, para que não fique muito extenso este tutorial, eu o divide em 3 partes. Então sem mais delongas vamos ao que interessa!

1º. Passo: Configurar os softwares necessários, em caso de dúvida basta acessar o tutorial sobre de configuração clicando aqui.

2º. Passo: Criar a tabela de dados que vamos utilizar para armazenar as informações, basta copiar o código abaixo e executar em seu gerenciador de banco de dados.

CREATE DATABASE `conexao`;
USE `conexao`;
DROP TABLE IF EXISTS `clientes`;
CREATE TABLE `clientes` (
   `id` int(11) NOT NULL auto_increment,
   `nome` varchar(40) NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

insert into `clientes`(`id`,`nome`) values (1,'Dheyson'),(2,'José'),(3,'Maria'),(4,'Júlio'),(5,'Marcos'),(6,'Eliana'),(7,'Cláudia'),(8,'Joaquim'),(9,'Carla'),(10,'Márcia');

3º. Passo: Nesta etapa vou mostrar a vocês uma classe de conexão genérica com o banco de dados MySQL, muito útil em meus desenvolvimentos. Vou demonstrar o apenas o código fonte da classe, pois se for explicar passo-a-passo todo código vou fugir ao foco do tutorial, mas me coloco a disposição para qualquer esclarecimento em caso de dúvidas.



    /* Classe responsável pela conexão com o banco */
    class Conn {
    
        /* Variáveis Globais */
        private $servidor;
        private $usuario;
        private $senha;
        private $banco;
        private $conn;
        private $resultado;
        private $sql;

        /* Método Construtor */
        public function Conn($server, $user, $pass, $banco) {
            $this->setServidor($server);
            $this->setUsuario($user);
            $this->setSenha($pass);
            $this->setBanco($banco);
        }

        /* Sets */
        public function setServidor($server) {
            $this->servidor = $server;
        }
        public function setUsuario($user) {
            $this->usuario = $user;
        }
        public function setSenha($pass) {
            $this->senha = $pass;
        }
        public function setBanco($banco) {
            $this->banco = $banco;
        }

        /* Método que abre a conexão com o Banco de Dados */
        public function connDB() {
            $this->Conn = mysql_connect($this->servidor, $this->usuario, $this->senha);
            if(!$this->Conn) {
                echo "<p>N&atilde;o foi poss&iacute;vel conectar-se ao servidor MySQL. <br>Erro MySQL: ".mysql_error()."</p>";
                exit();
            } elseif (!mysql_select_db($this->banco, $this->Conn)) {
                echo "<p>N&atilde;o foi poss&iacute;vel selecionar o banco de dados desejado. <br>Erro MySQL: ".mysql_error()."</p>";
                exit();
            }
        }

        /* Método que fecha a conexão com o Banco de Dados */
        public function closeConnDB() {
            return mysql_close($this->Conn);
        }

        /* Método que executa comando SQL */
        public function runQuery($sql) {
            $this->connDB();
            $this->sql = $sql;
            if($this->resultado = mysql_query($this->sql)) {
                $this->closeConnDB();
                return $this->resultado;
            } else {
                exit("<p>N&atilde;o foi poss&iacute;vel executar o comando solicitado. <br>Erro MySQL: ".mysql_error()."</p>");
                $this->closeConnDB();
            }
        }

        /* Método instância um objeto da classe de conexão */
        static public function conexao(){
            $con = new Conn('localhost', 'root', '123456', 'conexao');
            return $con;
        }
    }
?>

4º. Passo: Salve a classe acima demonstrada com o nome de Conn.php dentro do diretório: ...\amfphp\services\vo\br\com\conexao\valuesObjects

5º. Passo: Vamos criar uma classe para manipular a tabela clientes que foi criada em nossa base de dados. Salve esta classe com o nome de Cliente.php dentro do mesmo diretório demonstrado no 4º. Passo. O código da classe deverá ficar conforme descrito abaixo.

include_once("Conn.php");

/* Classe responsável pelo tratamento dos clientes */
class Cliente {

/* Aponta para classe ActionScript do projeto Flex */
public $_explicitType = "br.com.conexao.valueObjects.Cliente";

/* Variáveis globais */
public $id;
public $nome;

/* Método Construtor */
public function Cliente() {}

/* Sets */
public function setId($cod) {
$this->id = $cod;
}
public function setNome($name) {
$this->nome = $name;
}

/* Gets */
public function getId() {
return $this->id;
}
public function getNome() {
return $this->nome;
}

/* Acessos ao banco de dados
Aqui o php recebe o retorno do MySQL e retorna ao Flex um Array com os registros da consulta.
*/
public function buscarTodos() {
Conn::conexao()->connDB();
$resultado = Conn::conexao()->runQuery("select * from clientes order by nome");
$i=0;
while ($obj = mysql_fetch_object($resultado)) {
$cli = new Cliente();
$cli->setId($obj->id);
$cli->setNome($obj->nome);

$retornoArray[$i] = $cli;
$i++;
}
return $retornoArray;
}
}
?>

A parte de back-end já esta completa. A hierarquia de arquivos deve ter ficado conforme a imagem abaixo:

Ok terminado estas etapas daremos seguimento na parte II, onde vamos criar nossas classes ActionScript e preparar nosso projeto Flex para acesso às informações do banco. Até lá e abraço a todos.

Mapeamento Objetos Flex - PHP, PHP - Flex no Amfphp

2008-11-13T08:51:00.000-08:00

Olá a todos!

Bom esta semana como assunto para o meu segundo tutorial pensei em criar um projeto que faça conexão com banco de dados, já que na semana passada fizemos a integração entre flex e php, mas comecei desenvolver um projeto na empresa em que trabalho e necessitei fazer o mapeamento das minhas classes php para o flex, ou melhor, mapear meus "Values Objects". E na minha busca por material sobre o assunto percebi que ainda tem poucos exemplos de como se fazer isto. Então mãos a obra!

1º. Passo: Vamos criar nosso diretório que irá armazenar os valuesObjects (vo) .php. Por default o amfphp traz como diretório para os valuesObjects o diretório "services/vo/" como poderemos confirmar no arquivo globals.php dentro do diretório raiz do amf. Então vamos respeitar a regra e criar nosso objetos lá dentro:
Crie uma hierarquia de diretórios dento da pasta services do amfphp, semelhante a estrutura de projetos em flex, ou seja, DNS reverso que no caso do nosso exemplo ficará da seguinte forma:

...amfphp\services\vo\br\com\mapFlexPhp\valuesObjects

2º. Passo: Crie dentro da pasta valuesObjects um arquivo chamado: usuario.php com a seguinte estrutura:

Obs.: O método criado pode ser testado no browser do amfphp, caso não saiba como testar pode dar uma olhada no tutorial que explica como configurar flex, amfphp e php: Configurando Flex + Amfphp + PHP

3º. Passo: Crie um projeto no Flex chamado mapFlexPhp para testarmos o mapeamento: File -> New -> Flex Project.

4º. Passo: Crie uma estrutura de classes semelhante a que criamos para o objeto .php dentro da pasta src do projeto que criamos: ...\src\br\com\mapFlexPhp\valuesObjects

5º. Passo: Crie um arquivo Action Script Class dentro da pasta que criamos, chamado usuario.as com a seguinte estrutura:

Obs.: Este arquivo é um “espelho” da classe que criamos em php.

6º. Passo: Vamos agora criar um formulário no Flex que irá receber os usuários gerados através do nosso método PHP. No arquivo .mxml principal do nosso projeto vamos desenhar um layout para receber os dados semelhante ao da imagem abaixo, que contem um botão e um dataGrid:

Complete os códigos do nosso arquivo .mxml para ficar semelhante ao que esta apresentado na próxima imagem:

7º. Passo: Compile o projeto e clique no botão Buscar Usuários... pronto, você retornou para o dataGrig objetos do tipo usuário.

Arquivos do projeto para download: mapFlexPHP.rar

Você agora provavelmente deve estar se perguntando para que todo este trabalho, não é? Bom com este tipo de mapeamento você tem um controle muito maior dos objetos em sua aplicação, porque você estará trabalhando com objetos de tipos especificos com atributos e tipos corretos, e não mais com objetos genéricos. E sem contar o quanto facilita nas transações CRUD (Create, Retrieve, Update and Delete) com o banco de dados, entre outras vantagens. Vale a pena dar uma olhada em algum material referente a RPC (Remote Procedure Call - Chamada de Procedimento Remoto).

Tentei fazer um projeto o mais simples possível, mas este é um assunto bastante complexo então as vezes pode parecer um "bixo de 7 cabeças", mas digo a você que não é!

Um grande abraço e até a próxima!!!

Configurando Adobe Flex Builder + AMFPHP + PHP

2008-11-07T11:10:00.000-08:00

Olá pessoal, meu nome é Dheyson Wildny sou Analista de Sistemas e trabalho com desenvolvimento há 4 anos, atualmente com as linguagens PHP5 OO / Ajax / CSS e cuido de um portal na área da saúde www.indiq.com.br.

Acordei hoje (07/11/2008) e percebi que já estava passando da hora de compartilhar o que aprendi nestes anos com quem está começando a desenvolver, daí pensei, vou falar sobre o quê? Com tantos sites que falam sobre o assunto na net, mas acho que ajuda nunca é demais, e então cheguei a seguinte conclusão: Flex tem sido umas das mais promissoras ferramentas para web dos últimos anos, e porque então, não comecei estudar isto até hoje? Não obtive resposta, mas não adianta chorar o tempo perdido, então, mãos a obra!

Na semana passada tive o primeiro contato direto com a ferramenta e vou dizer que não parece ser nenhum “bixo de sete cabeças” não.

Hoje vou começar explicando passo-a-passo como configurar o Flex Builder 3, com o remoting Amfphp 1.9 e o back-end em PHP 5 OO.

Vamos lá:

1º. Passo: Baixar e instalar o Flex Builder 3.0 no site da Adobe, existe uma versão trial free por 60 dias ou se preferir pode baixar o pluging do flex para o eclipse, que é a mesma coisa e totalmente free (para instalar o Flex
Builder... next, next, next, finish. rsrs...).
link trial free: http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

2º. Passo: Baixar o Amfphp 1.9 (.zip).
http://sourceforge.net/project/showfiles.php?group_id=72483&package_id=72363&release_id=541961

3º. Passo: Baixar o PHP 5 e configurá-lo (não entrarei muito em detalhes de como fazer isto, mas vou deixar
aqui o link de um ótimo artigo de como configurar: Apache + PHP 5 + MySQL, qualquer dúvida podem entrar em contato comigo por e-mail).
http://www.plugmasters.com.br/sys/materias/243/1/Instalando-Apache-%2B-MySQL-%2B-PHP-5-no-Windows

4º. Passo: Descompacte o arquivo Amfphp 1.9.zip para uma pasta chamada amfphp dentro do htdocs do apache (diretório onde ficam os arquvios .php) como na figura abaixo:

Para finalizar a instalação do amfphp digite na janela do seu navegador: http://localhost/amfphp/browser,
deverá aparecer a seguinte janela configuração:

Marque as opções como na imagem acima e clique em Save. Pronto o Amfphp está “instalado”, dificil não é??

5º. Passo: Para facilitar minha vida e evitar que eu fique com arquivos duplicados no meu pc, eu costumo definir meu
diretório de “workspace” para o mesmo diretório onde os arquivos são compilados, mas isso vai de cada um.

Abra o Flex Builder vá em File ->Switch Workspace -> Other... no campo workspace coloque o caminho da pasta browser localizada dentro da pasta amfphp que acabamos de descompactar, no meu caso: C:\Arquivos de programas\Apache Software Foundation\Apache2.2\htdocs\amfphp\browser

Prontinho, tudo configurado e funcionando!

Vamos agora criar um projeto simples para mostrar um “Hello world” vindo do PHP para o Flex!

Vá em File -> New -> Flex Project

Dê o nome de FlexHelloWorld e deixe as configurações como acima, no seu caso provavelmente a opção “Use default location” estará selecionada, deixe-a como estiver, depois clique em next.

Clique em Browse..., encontre a pasta browser dentro de amfphp e crie uma nova pasa com o mesmo nome do projeto: FlexHelloWorld

No Root URL deverá constar o caminho de acesso no browser do seu projeto, no nosso caso o camingo acima, após isto clique em Validade Configuration depois em Finish

Agora copie um arquivo chamado services-config.xml que se encontra dentro da pasta browser do amf para a pasta raiz do projeto criado. Depois que copiar abra o arquivo e no caminho da uri, coloque: http://localhost/amfphp/gateway.php, como na imagem.

Feito isto clique com o botão direito sobre o projeto criado e selecione a opção properties, como na imagem:

Na janela que abrir selecione: Flex Compiler e na caixa Additional compiler arguments adicione -services "../services-config.xml" e ok, como mostra a figura abaixo.

Pronto o Flex Builder está pronto para receber informações, vamos agora criar nossa classe .php

Crie um arquivo chamado Hello.php e salve dentro da pasta services do amfphp (é lá que são armazenados os arquivos de back-end). Deixe o código deste arquivo da seguinte forma:

<?php

class Hello {

public function HelloWorld() {

return "Hello World!";

}

Ok! Agora vamos testar nosso método para ver se realmente esta funcionando, digite http://localhost/amfphp/browser no seu navegador. Deverá aparecer desta forma, quando selecionar Hello e clicar em Call:

Pronto agora só falta chamar o método no Flex. Digite nas linhas de comando do arquivo FlexHelloWorld.mxml como na imagem abaixo:

Agora é só pressionar Ctrl+F11 (compilar) e ver o resultado!

Bom espero ter sido bem claro e ter ajudado com este meu primeiro tutorial, qualquer dúvida me coloco a disposição!

Abraço e até a próxima!!!