Usando o Adobe Flex 4 para construir aplicações Flex + PHP05 de maio de 2010 por Daniel Schmitz

O que iremos fazer :

Neste artigo iremos abordar como usar o Adobe Flash Builder 4 para construir aplicações Flex + PHP, utilizando Zend Framework. Inicialmente, você deve ter um servidor PHP instalado na sua máquina. Eu recomendo utilizar o Wamp Server. Com ele devidamente instalado, na pasta padrão, vamos criar a pasta: c:\wamp\www\flexphp

Essa pasta pode ser acessada através do endereço: http://localhost/flexphp.

Possivelmente você verá algo do tipo:

Agora que a parte PHP está devidamente instalada, vamos ao Flex! Abra o Adobe Flash Builder 4 (Atenção, nao é o Flex Builder) e crie um novo projeto: File, New, FlexProject. Dê o nome “flexphp” e deixe o projeto na pasta padrão (Project Location). Em Application Type, escolha Web. Em Flex SDK version, padrão. Em Server Technology, escolha PHP. Clique em Next.

A próxima janela é “Configure PHP Server”. Se não for essa janela, você não selecionou “PHP” em Server technology na tela anterior. Volte e refaça o processo. Configure o “server location” da seguinte forma. Em “Web Root”, coloque: “C:\wamp\www\flexphp”. Em Root URL, coloque: “http://localhost/flexphp/”. Clique no botão “Validate Configuration” e veja se a mensagem “The web root folder and root URL are valid” aparece. Erros comuns são o servidor WAMP Server desligado, caminhos incorretos, etc.

Em “Compiled Flex Application location”, coloque: “C:\wamp\www\flexphp\”. Clique em Next.

Na próxima janela, altere o seguinte campo: “Output Folder URL”. Coloque: http://localhost/flexphp/

Clique em Finish para terminar a configuração do novo projeto:

Agora vamos criar uma tabela no banco de dados. Para fazer isso, acesse o MySql Console. Vá até a bandeja do windows, ache o ícone do wamp server, clique com o botão ESQUERDO no ícone, navegue até MySql > MySql Console:

Surge uma “tela preta” pedindo uma senha… Por padrão, a senha é em branco, então basta pressionar enter para acessar o MySql Console. Você verá algo como: “Welcome to the MySQL monitor. Commands end with ; or \g.”. Vamos criar um banco de dados, e uma tabela chamada “Usuarios”:

mysql> create database flexphp;Query OK, 1 row affected (0.01 sec)

mysql> use flexphp;Database changed

mysql> create table Usuarios(id INT NOT NULL AUTO_INCREMENT, PRIMARY KEY(id), nome VARCHAR(100), email VARCHAR(100));Query OK, 0 rows affected (0.04 sec)

Com a tabela criada, podemos voltar ao Flex. Acesse o menu Data > Connect To PHP.

Na janela “Configure PHP Service”,  temos que gerar uma classe em PHP que representa a tabela “Usuarios”. O Flash Builder pode gerar tudo isso para nós, de forma a acelerar o nosso desenvolvimento. Clique no link “click here to generate a sample”.

Surge uma janela para que você possa configurar o banco de dados:

Clique no botão “Connect to Database”, e a próxima mensagem é para instalar o Zend AMF. Isso é necessário para que possamos estabelecer a comunicação entre o Flex e PHP através do protocolo AMF. Como o Wizard vai fazer tudo pra gente, não é preciso, a priori, conhecer o Zend Framework. Clique em OK para continuar. O processo de download do Zend Framework inicia-se:

Aguarde até esse processo terminar. Após o término, clique em “OK” e talvez possa surgir esta mensagem:

Isso acontece porque o Zend Framework instalado é uma versão mais antiga do Zend Framework existente no site oficial da Zend. Vamos ignorar isso por enquanto e continuar.

Voltando à tela “Generate Sample PHP Service”, escolha a tabela que criamos, “Usuarios”. Veja que a chave primária (“primary key”) é preenchida e que a classe PHP UsuariosService.php será criada:

Clique em OK. Uma mensagem de segurança aparece: “Security information”. Vamos ignorar por enquanto e clicar em OK. As classes são criadas, e a última tela do Wizard apresenta a configuração do serviço PHP. Deixe tudo como está e clique em “Finish”. Se surgir alguma tela tentando abrir um novo Workspace, cancele. Isso acontece porque o Flash Builder quer abrir o arquivo PHP, mas não existe uma IDE php instalada e integrada ao Flash Builder.

Todas as classes são criadas, e você pode reparar na aba “Data/Services” que existe um serviço criado, com alguns métodos:

Agora vamos criar um formulário para inserir dados. Acesse o menu “Data > Generate Form”. Surge o wizard “Generate Form”. Em “Generate from for”, escolha “Service Call”. Em “New Service Call”, escolha “UsuariosService” e em “Operation”, escolha “createUsuarios”. Clique em Finish.

O formulário é criado, com todo o código necessário para a aplicação:

Se o formulário ficar “embaralhado” dessa forma, adicione o seguinte código:

Aqui configuramos o layout da aplicação para Vertical. O resultado é este:

Como o Flash Builder não sabe que o campo ID será auto incremento, ele o inseriu no formulário. Podemos ignorar esse campo e fazer as seguintes modificações no código:

1) retire o campo ID.

2) Comente a linha que faz referencia ao campo ID. Veja:

Agora podemos rodar a nossa aplicação. Clique em executar (run) e veja o resultado:

Quando clicamos em CreateUsuários, o código PHP é executado, os dados são inseridos, e o retorno é apresentado abaixo do botão, exibindo o id do registro criado.

Agora precisamos criar um DataGrid com todos os dados. Para fazer isso, arraste um datagrid na sua aplicação. Depois, na aba Data/Services, arraste o método “getAllUsuarios” para o DataGrid, conforme na figura abaixo:

Surge uma janela “Bind to Data”. Clique em OK, e veja que o DataGrid já configurou as colunas. Agora basta executar a aplicação novamente, para ver que os dados são carregados automaticamente!! Que beleza, heim??

Conclusão

Com o Flash Builder é possível, em poucos segundos, criar formulários, datagrids, combos, etc.. tudo muito fácil e rápido. Com isso ganhamos em tempo de desenvolvimento, e isso é ótimo!!

Agora, antes que critiquem….

É claro que tudo que é rápido demais possui problemas. Existem problemas, sim, mas eles podem ser contornados. Antes que haja discussões sobre o código “sujo” que foi criado pelos assistentes, eu irei comentar, cada linha de código, em um próximo artigo. Aguardem!!