segunda-feira, 24 de dezembro de 2007

Iniciando flex com php usando amfphp

Ao iniciar meus estudos em flex logo senti a necessidade de utilizar um banco de dados, então irei fazer o meu primeiro post com um exemplo de como acessar um banco de dados com flex e php utilizando amfphp, o banco utilizando será o mysql.

Antes de mais nada vamos criar o nosso banco.

CREATE DATABASE `exemplo` ;

Agora criaremos nossa tabela.

CREATE TABLE `amigos` (
`id` INT( 10 ) UNSIGNED NOT NULL AUTO_INCREMENT ,
`nome` VARCHAR( 254 ) NOT NULL ,
PRIMARY KEY ( `id` )
);


Iremos baixar o amfphp no site http://amfphp.org que está na versão 1.9, agora iremos ao flex e criaremos um novo projeto File - New - Flex Project.
Coloquei nome do projeto de amigos, agora com nosso mxml principal criado vamos jogar o amfphp na pasta raiz do nosso projeto.
Após copiar o amfphp temos que configurar o arquivo services_config.xml, mais antes vamos copiar o arquivo services_config.xml que se encontra dentro de amfphp/browser/ para a pasta principal do projeto flex, agora temos que setar o gateway que fica na tag no atributo uri dentro do arquivo services_config.xml, para saber a url do gateway so abrir o seu browser e ir até o arquivo gateway.php dentro do amfphp, ele lhe mostrar uma mensagem:
amfphp and this gateway are installed correctly. You may now connect to this gateway from Flash.
É so copiar a url do browser colocar no atributo uri no arquivo services_config.xml.



Agora no seu flex clicando com o botão direito do mouse em cima da pasta principal do seu projeto vai aparecer um menu e nele vai ter item properties, ao seleciona-lo irar aparecer uma tela de configuração, ao clicar em flex compiler lhe aparecerá um campo additional compiler argumenst, por padrão ja vai estar preenchido com "-locale en_US" vamos adicionar '-services "services-config.xml"', pronto nosso amfphp está configurado.

Vamos para aplicação agora..

No nosso mxml principal vamos arrastar o componente List e o componente TextInput, o componente list vamos por o id dele de "lista", terá um textinput de id "nome" e outro de "id_amigo".



A comunicação do flex com o amfphp é feito atravéz da classe RemoteObject.



fizemos uma instância da classe no mxml com a tag e configuramos seus atributos

Em destination colocamos amfphp porque é o mesmo que se encontra no nosso arquivo services_config.xml, pode ser mudado se quiser, Source é a classe php que vamos utilizar amigos-> pasta do projeto amfphp amigo-> classe php, ShowBusyCurso ativa o reloginho no curso do mouse e id para identificação do objeto.

Dentro da tag RemoteObject vamos configurar o método da classe amigo que vamos usar

< name="listarAmigos" result="listarMyAmigos(event)">

Name é o nome do método da classe php que vamos usar, o nome tem que ser o mesmo que estiver na classe.

Result é retorno do método, ele recebe um método que deverá ter um atributo de tipo ResultEvent.

Vamos criar agora o listarMyAmigos



Criamos uma variável Bindable do tipo array para que quando ela seja atualizada todo os objetos que a estiverem usando-a sejam atualizados também e dentro do método preenchemos o array com o resultado vindo do amfphp.

Vamos criar um método para iniciar a requisição ao amfphp.



dbAmigos é id do nosso RemoteObject, listarAmigos é o nome do método e send a ação.

Agora vamos configurar o List e os Textinputs

< x="10" y="44" height="288" width="270" dataprovider="{this.myAmigos}" labelfield="nome" id="lista">

< x="321" y="67" width="274" id="nome" text="{lista.selectedItem.nome}">
< x="344" y="112" width="54" id="amigo_id" text="{lista.selectedItem.id}">


No nosso List no atributo dataProvider passamos como parâmetro a variável myAmigos que contém os dados vindo do amfphp e no atributo labelField dizemos qual dado deve ser mostrado no nosso componente List.
Nos TextInputs passamos como valor no parâmetro text nossa lista com o item selecionado e o valor a ser mostrado = lista.selectedItem.nome

para finalizar o nosso mxml na tag principal da nossa aplicação vamos chamar o método carregarMyAmigos, para que o nosso List seja carregado com os dados vindo do amfphp

< application="http://www.adobe.com/2006/mxml" layout="absolute" creationcomplete="{carregarMyAmigos()}" width="602">

e por último vamos partir para o php.

Dentro do amfphp contém uma pasta service que é onde vai ficar todas suas classes php, então dentro da pasta service vamos criar uma pasta chamada amigos e uma classe php chamado amigo, exatamente como definimos anteriormente no RemoteObject.


< ?php
class Amigo
{
private $db;
function Amigo()
{
$this->db = mysql_pconnect("localhost","root","123456");
mysql_select_db("exemplo",$this->db);
}
function listarAmigos()
{
$query = "SELECT * FROM amigos a ORDER BY nome";

$resultado = mysql_query($query,$this->db);

$retorno['amigos']="";
$i=0;
while ($linha = mysql_fetch_array($resultado))
{
$id=$linha['id'];
$nome=$linha['nome'];
$retorno['amigos'][$i]['id']=$id;
$retorno['amigos'][$i]['nome']=$nome;
$i++;
}
return $retorno;
}
}
?>


Se você quiser testar sua classe php so ir em na pasta browser do seu amfphp
http://localhost/flex/amigos/amfphp/browser/

Pronto galera esse foi meu primeiro post, demorou um pouco, mais pra mim foi super gratificante.
Vou deixar disponível o código fonte e qualquer dúvida os comentários estão ae para isso.. abraços

http://andborges.byethost13.com/exemplo/amigos.rar

4 comentários:

Anônimo disse...

Oi, deixa-me saudar voce pelo seu Blog, acho que fazem falta no mundo da internet blogs com informações e tuoriais sobre o flex.

Bom, gostava de fazer uma pergunta, porquê voce usa as {} quando chama a funcao carregarMyAmigos() em:
creationcomplete="{carregarMyAmigos()}"

Alguma razão em especial?

Unknown disse...

Salve Salve Anderson , seu post foi excelente , estou iniciando em flex e me ajudou muito !!!
valeu velhinho

Unknown disse...

Olá Anderson

Meu primeiro flex project entendido graças aos seus toques de AMFPHP e Flex.

Valeu pelo help!

rudy disse...

Parabens pelo post. O melhor e mais bem explicado tutorial para integração de flex com php. Continue assim.

Parabens mesmo.