1st Portugal Adobe Flex Camp

Ligao do Flex a um backend LAMP usando AMFPHP

Joo Saleiro joao.saleiro@webfuel.pt

Programa
1. Tecnologias de backend que podem interligar 2. 3. 4. 5. 6. 7.

com o Flex Mtodos de comunicao possveis Flash Remoting em detalhe Flash Remoting vs Web Services Implementaes open-source de Flash Remoting AMFPHP em detalhe Exemplo: utilizar o AMFPHP para ligar um frontend em Flex a um backend em PHP

O apresentador
Joo Saleiro joao.saleiro@webfuel.pt Licenciado em Engenharia de Telecomunicaes

e Informtica no ISCTE
PFC consistiu no desenvolvimento de uma Rich

Internet Application recorrendo a best-practices de Engenharia da Programao e ferramentas opensource de desenvolvimento na plataforma Flash
(tentem dizer isto de seguida num s flego...)

 www.castingoffice.net

Por outras palavras:

O apresentador

user: osflash

pass: test

O apresentador
Co-fundador da Comunidade Portuguesa de Rich

Internet Application (www.riapt.org)

Formador na rea da programao de aplicaes

Web na etic_

Responsvel pela Webfuel, empresa dedicada ao

desenvolvimento de Rich Internet Applications

 Onde fazemos coisas deste gnero:

O apresentador

Objectivo desta apresentao

Aprender a ligar uma aplicao Flex a um backend em PHP

A aplicao (sem os dados)

Carregar dados de uma base de dados

Pergunta Frequente:
P: Posso ligar o Flex directamente a uma base de

dados? R: No. (mas o Air pode)

O Flex apenas responsvel pela camada de

interface com o utilizador

Os dados devem ser carregados da camada de

backend sendo esta responsvel pela interaco com a base de dados

Tecnologias de backend
Pergunta Frequente:
P: Vou precisar de aprender uma tecnologia de

backend nova? R: No. possvel ligar o Flex a quase qualquer tecnologia de backend existente

JAVA, .NET, PHP, RoR, CF, Python... O que importa no a tecnologia, mas sim o

mtodo de comunicao

Mtodos de comunicao
Pergunta Frequente:
P: A minha empresa possui uma aplicao distribuda

sustentada em Web-Services, mas queria mudar o frontend para Flex. Tenho que refazer o backend? R: No. As aplicaes Flex consomem facilmente os Web-Services existentes sem ser necessrio mudar o backend

Mtodos de comunicao mais usuais:

Plain text Web Services Flash Remoting

Flash Remoting?
Pergunta Frequente:
P: O que o Flash Remoting? R: um eficiente mtodo de comunicao RPC com

serializao automtica de dados sustentada num formato binrio (AMF Actionscript Message Format)

Hein? Agora em Portugus!

RPC - Remote Procedure Call?
Consiste em chamar um mtodo remoto (no backend) de uma forma simples e transparente como se este existisse do lado do cliente. to complicado como chamar uma funo...
Serializao de dados? Formato binrio?

Flash Remoting vs Outros mtodos

http://www.jamesward.org/census/

Flash Remoting vs Web Services

Flash Remoting Velocidade de serializao do lado do servidor Tamanho do pacote / Velocidade de comunicao Velocidade de interpretao do lado do cliente Simplicidade de implementao Standart / Compatibilidade Web Services

Flash Remoting vs Web Services

Pergunta Frequente:
P: Quer dizer que se usar Flash Remoting no posso

usar Web-Services e vice-versa? R: Podem ser usados ambos ao mesmo tempo! Basta expr duas verses para cada servio, uma usando Flash Remoting, e outra usando Web-Services

Pergunta Frequente:
P: Tenho que comprar esse Flash Remoting? R: No. Existem diversas implementaes de Flash

Remoting open-source ou gratutas para as mais variadas tecnologias de backend.

Implementaes Open-Source de Flash Remoting

JAVA
openAMF
GraniteDS BlazeDS Red5

Perl
AMF::Perl

PHP
SabreAMF
CakePHP WebOrb AMFPHP

Ruby
Rubyamf WebOrb

NET
Fluorine AMF.NET

Python
PyAMF

Mais em http://osflash.org/projects

AMFPHP
A mais antiga implementao de Flash Remoting

para PHP
URL: www.amfphp.org Iniciado pelo Wolfgang Hamman, guiado pelo

Patrick Mineault, sendo actualmente o Wade Arnold o responsvel pelo projecto

Projecto apoiado oficialmente pela Adobe

AMFPHP
Pergunta Frequente:
P: Preciso de algum servidor especial para usar

AMFPHP? De instalar alguma ferramenta, tecnologia, alguma coisa? R: No. Basta fazer upload do source code do AMFPHP para um servidor LAMP e usar!

Ok, ento vamos ver o quo difcil usar o

AMFPHP!

Os ingredientes

Apache, PHP, MySQL - XAMPP

http://www.apachefriends.org/en/xampp-windows.html

Um cliente de MySQL o XAMPP traz o phpMyAdmin O AMFPHP

http://www.amfphp.org

O Flex 2/3 SDK

Vem com o Flex Builder 2/3

O Flex Builder 2/3 (opcional)

Est disponvel uma verso do FB2 trial de 30 dias no site da Adobe: http://www.adobe.com/products/flex/flexbuilder/ Est disponvel uma verso do FB3 RC1 trial de 90 dias no Adobe Labs: http://labs.adobe.com/technologies/flex/

Montar o cenrio

Em vez de instalarmos o Apache, PHP e MySQL em separado, podemos usar o XAMPP. Basta fazer o download, descomprimir e correr os servios. Certificar-se do endereo do pasta htdocs do Apache, ou alter-lo para um mais confortvel

A pasta htdocs onde deveremos colocar os projectos que sero servidos pelo Apache Para mud-la, preciso editar o ficheiro httpd.conf na directoria conf do Apache

Criar na pasta htdocs uma pasta para o nosso projecto, e descomprimir l para dentro o zip do AMFPHP

Montar o cenrio
Vamos obter a seguinte estrutura de

directorias:
browser permite inspeccionar e testar os

servios que criamos core no mexer services a pasta onde devermos colocar o cdigo para os nossos servios

Montar o cenrio
Criar o projecto no Flex, e mudar as directorias

bin-debug e bin-release para directorias servidas pelo Apache

Criar um ficheiro services-config.xml Nas opes do compilador, adicionar o

argumento: services services-config.xml aplicao o endereo para a gateway que permite comunicar com o backend

O services-config.xml serve para indicar

O ficheiro services-config.xml
<?xml version="1.0" encoding="UTF-8"?> <services-config> <services> <service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"> <destination id="amfphp"> <channels> <channel ref="my-amfphp"/> </channels> <properties> <source>*</source> Colocar aqui o endereo </properties> para o gateway.php </destination> </service> Pode ser usado um </services> <channels> caminho relativo :) <channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel"> <endpoint uri="http://localhost/riapt/backend/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/> </channel-definition> </channels> </services-config>

Criar a base de dados

Utilizar o phpMyAdmin ou outro cliente de

MySQL para criar a base de dados.

No nosso caso vamos criar a seguinte

tabela:

Criar a base de dados

Cujo cdigo DDL:

CREATE TABLE `produtos` ( `id` int(6) NOT NULL auto_increment, `designacao` varchar(255) NOT NULL, `quantidade` int(4) default NULL, `descricao` longtext, `categoria` varchar(255) default NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1; -- ----------------------------- Records -- ---------------------------INSERT INTO `produtos` VALUES ('1', 'Porttil A6JC', '5', ' o meu :)', 'Informtica'); INSERT INTO `produtos` VALUES ('2', 'Frigorifico Zippy', '15', 'Frigorifico ecolgico ', 'Electrodomsticos'); INSERT INTO `produtos` VALUES ('3', 'Telemvel 8G', '1', 'Um telemvel 3G que engana os clientes', 'Telecomunicaes');

Ok, o cenrio est montado. Chegou a altura de criarmos o cdigo

Criar no backend o servio de gesto de produtos

Na pasta services do AMFPHP criar o ficheiro GestorDeProdutosService.php e com o seguinte cdigo:

<? class GestorDeProdutosService { function GestorDeProdutosService () { $this->conn = mysql_pconnect('localhost', 'root', ''); mysql_select_db ('riapt'); } } ?>

Criar o mtodo que devolve os produtos

Quantas linhas sero necessrias para criar

o mtodo que devolve os produtos na base de dados? a) 45 b) 10 c) 28

Criar o mtodo que devolve os produtos

Na realidade s so precisas duas! (sem

contar com as chavetas) :

function getProdutos() { return mysql_query("SELECT * FROM produtos");

Testar o mtodo que devolve os produtos Service Browser

Podemos utilizar o Service Browser do

AMFPHP para ver se o nosso mtodo funciona.

Basta apontar para a directoria browser

do AMFPHP (ex.: http://localhost/riapt/backend/amfphp/bro wser/ )

Testar o mtodo que devolve os produtos - Service Browser

Ligar o frontend ao backend

Adicionar o cdigo do RemoteObject:

<mx:RemoteObject id="produtosService" destination="amfphp" source="GestorDeProdutosService"> <mx:method name="getProdutos" result="getProdutosHandler(event)"/> </mx:RemoteObject>

Criar a funo getProdutosHandler:

private function getProdutosHandler(event:ResultEvent):void { listaDeProdutos=event.result as ArrayCollection; }

Mudar o evento click do boto refrescar de forma a chamar o mtodo remoto:

<mx:Button label="Refrescar click="produtosService.getProdutos()"/>

Ligar o frontend ao backend

E obtemos isto:

E criar um mtodo que envia dados para o backend? Por exemplo, inserir produto?

No backend adicionar:
function addProduto($produto) { mysql_query("INSERT INTO produtos(designacao, quantidade, descricao, categoria) VALUES ( '".$produto['designacao']."', '".$produto['quantidade']."', '".$produto['descricao']."', '".$produto['categoria']."')"); return mysql_insert_id(); }

E criar um mtodo que envia dados? Por exemplo, inserir produto?

No frontend adicionar ao RemoteObject:
<mx:method name="addProduto" result="addProdutoHandler(event)"/>

Criar a funo addProdutoHandler:

private function addProdutoHandler(event:ResultEvent):void { produtosService.getProdutos(); }

E criar um mtodo que envia dados? Por exemplo, inserir produto?

Criar a funo associada ao evento click do boto Gravar:

private function gravarBtnClickHandler(ev:MouseEvent):void {

var produto:Object=new Object(); produto["designacao"]=designacaoTxt.text; produto["quantidade"]=quantidadeNS.value; produto["descricao"]=descricaoTa.text; produto["categoria"]=categoriaCmb.selectedItem; produtosService.addProduto(produto); adicionarProdutoPanel.visible=false;

Resultado
E com isto, j temos uma aplicao que

permite inserir e listar produtos.

mesmo para editar, apagar, etc.

A partir daqui o processo seria sempre o O passo seguinte seria recorrer a Value Objects

para definir explicitamente o formato dos objectos trocados entre o cliente e o servidor

... Mas isso fica para outro dia :o)

Mais info
Exemplo de Flex com AMFPHP:

http://www.riapt.org/2007/07/16/exemplo-em-flex-2-operacoes-crudusando-flash-remoting-via-amfphp-19b2/

Utilizao de Value Objects:

http://www.riapt.org/2007/07/16/exemplo-em-flex-2-utilizacao-de-valueobjects-com-flash-remoting/

Aprender Cairngorm:

http://www.riapt.org/2007/12/07/onde-aprender-cairngorm-a-frameworkmvc-da-adobe/

Flex com AMFPHP passo a passo (ingls):

http://www.sephiroth.it/tutorials/flashPHP/flex_remoteobject/

Mais info
Sniffing de AMF (ver os dados trocados):
http://kevinlangdon.com/serviceCapture/

Aumentar (ainda mais!) a velocidade do

AMFPHP:

http://www.5etdemi.com/blog/archives/2007/01/amfphp-19-beta-2-

ridiculously-faster/

Questes (em portugus):

http://www.riapt.org/mailing-list/

Questes (em ingls):

http://groups.yahoo.com/group/flexcoders

Questes ?