1st Portugal Adobe Flex Camp
Ligação do Flex a um backend LAMP
usando AMFPHP
João Saleiro – joao.saleiro@webfuel.pt

Programa
1. Tecnologias de backend que podem interligar
com o Flex
2. Métodos de comunicação possíveis
3. Flash Remoting em detalhe
4. Flash Remoting vs Web Services
5. Implementações open-source de Flash
Remoting
6. AMFPHP em detalhe
7. Exemplo: utilizar o AMFPHP para ligar um
frontend em Flex a um backend em PHP

O apresentador
 João Saleiro – joao.saleiro@webfuel.pt
 Licenciado em Engenharia de Telecomunicações
e Informática no ISCTE
 PFC consistiu no desenvolvimento de uma Rich
Internet Application recorrendo a best-practices de
Engenharia da Programação e ferramentas open-
source de desenvolvimento na plataforma Flash
 (tentem dizer isto de seguida num só fôlego...)

 www.castingoffice.net
 user: osflash pass: test
 Por outras “palavras”:
O apresentador

O apresentador
 Co-fundador da Comunidade Portuguesa de Rich
Internet Application (www.riapt.org)
 Formador na área da programação de aplicações
Web na etic_
 Responsável pela Webfuel, empresa dedicada ao
desenvolvimento de Rich Internet Applications

O apresentador
 Onde fazemos coisas deste género:

Objectivo desta apresentação
Aprender a ligar uma aplicação Flex a um
backend em PHP

A aplicação (sem os dados)

Carregar dados de uma base de dados
 Pergunta Frequente:
 P: “Posso ligar o Flex directamente a uma base de
dados?”
 R: Não. (mas o Air pode)
 O Flex é apenas responsável pela camada de
interface com o utilizador
 Os dados devem ser carregados da camada de
backend sendo esta responsável pela interacção
com a base de dados

Tecnologias de backend
 Pergunta Frequente:
 P: “Vou precisar de aprender uma tecnologia de
backend nova?”
 R: Não. É possível ligar o Flex a quase qualquer
tecnologia de backend existente
 JAVA, .NET, PHP, RoR, CF, Python...
 O que importa não é a tecnologia, mas sim o
método de comunicação

Métodos de comunicação
 Pergunta Frequente:
 P: “A minha empresa possui uma aplicação distribuída
sustentada em Web-Services, mas queria mudar o
frontend para Flex. Tenho que refazer o backend?”
 R: Não. As aplicações Flex consomem facilmente os
Web-Services existentes sem ser necessário mudar o
backend
 Métodos de comunicação mais usuais:
 Plain text
 Web Services
 Flash Remoting

Flash Remoting?
 Pergunta Frequente:
 P: “O que é o Flash Remoting?”
 R: É um eficiente método de comunicação RPC com
serialização automática de dados sustentada num
formato binário (AMF – Actionscript Message Format)
 Hein? Agora em Português!
 RPC - Remote Procedure Call?
 Consiste em chamar um método remoto (no backend) de uma
forma simples e transparente como se este existisse do lado do
cliente. É tão “complicado” como chamar uma função... 
 Serialização de dados?
 Formato binário?

Flash Remoting vs Outros métodos
http://www.jamesward.org/census/

Flash Remoting vs Web Services
Flash Remoting Web Services
Velocidade de serialização
do lado do servidor 
Tamanho do pacote /
Velocidade de comunicação 
Velocidade de
interpretação do lado do
cliente

Simplicidade de
implementação  
Standart / Compatibilidade


Flash Remoting vs Web Services
 Pergunta Frequente:
 P: “Quer dizer que se usar Flash Remoting não posso
usar Web-Services e vice-versa?”
 R: Podem ser usados ambos ao mesmo tempo! Basta
expôr duas versões para cada serviço, uma usando
Flash Remoting, e outra usando Web-Services
 Pergunta Frequente:
 P: “Tenho que comprar esse «Flash Remoting»?”
 R: Não. Existem diversas implementações de Flash
Remoting open-source ou gratuítas para as mais
variadas tecnologias de backend.

Implementações Open-Source de Flash
Remoting
 JAVA  Perl  PHP
 openAMF  AMF::Perl  SabreAMF
 GraniteDS  CakePHP
 BlazeDS  WebOrb
 Ruby
 Red5  AMFPHP
 Rubyamf
 WebOrb
 NET
 Fluorine
 Python
 AMF.NET
 PyAMF
 Mais em http://osflash.org/projects

AMFPHP
 A mais antiga implementação de Flash Remoting
para PHP
 URL: www.amfphp.org
 Iniciado pelo Wolfgang Hamman, guiado pelo
Patrick Mineault, sendo actualmente o Wade
Arnold o responsável 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: Não. Basta fazer upload do source code do
AMFPHP para um servidor LAMP e usar!
 Ok, então vamos ver o quão difícil é 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á disponível uma versão do FB2 trial de 30 dias no site da Adobe:
http://www.adobe.com/products/flex/flexbuilder/
 Está disponível uma versão do FB3 RC1 trial de 90 dias no Adobe Labs:
http://labs.adobe.com/technologies/flex/

Montar o cenário
 Em vez de instalarmos o Apache, PHP e MySQL em
separado, podemos usar o XAMPP. Basta fazer o
download, descomprimir e correr os serviços.
 Certificar-se do endereço do pasta htdocs do Apache,
ou alterá-lo para um mais confortável
 A pasta htdocs é onde deveremos colocar os projectos que
serão 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 cenário
 Vamos obter a seguinte estrutura de
directorias:
 browser – permite inspeccionar e testar os
serviços que criamos
 core – não mexer
 services – a pasta onde devermos colocar o
código para os nossos serviços

Montar o cenário
 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 opções do compilador, adicionar o
argumento: –services services-config.xml
 O services-config.xml serve para indicar à
aplicação o endereço para a gateway que permite
comunicar com o backend

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>
</properties> Colocar aqui o endereço
</destination> para o gateway.php
</service>
</services> Pode ser usado um
<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 código 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', 'Portátil A6JC', '5', 'É o meu
:)', 'Informática');
INSERT INTO `produtos` VALUES ('2', 'Frigorifico Zippy', '15',
'Frigorifico ecológico ', 'Electrodomésticos');
INSERT INTO `produtos` VALUES ('3', 'Telemóvel 8G', '1', 'Um telemóvel
3G que engana os clientes', 'Telecomunicações');

Ok, o cenário está montado.
Chegou a altura de criarmos o
código

Criar no backend o serviço de
gestão de produtos
 Na pasta “services” do AMFPHP criar o ficheiro
GestorDeProdutosService.php e com o seguinte código:
<?
class GestorDeProdutosService
{
function GestorDeProdutosService ()
{
$this->conn = mysql_pconnect('localhost', 'root', '');
mysql_select_db ('riapt');
}
}
?>

Criar o método que devolve os
produtos
 Quantas linhas serão necessárias para criar
o método que devolve os produtos na base
de dados?
a) 45
b) 10
c) 28

Criar o método que devolve os
produtos
 Na realidade só são precisas duas! (sem
contar com as chavetas) :
function getProdutos()
{
return mysql_query("SELECT * FROM produtos");
}

Testar o método que devolve os
produtos – Service Browser
 Podemos utilizar o “Service Browser” do
AMFPHP para ver se o nosso método
funciona.
 Basta apontar para a directoria ”browser”
do AMFPHP (ex.:
http://localhost/riapt/backend/amfphp/bro
wser/ )

Testar o método que devolve os
produtos - Service Browser

Ligar o frontend ao backend
 Adicionar o código do RemoteObject:
<mx:RemoteObject id="produtosService" destination="amfphp" source="GestorDeProdutosService">
<mx:method name="getProdutos" result="getProdutosHandler(event)"/>
</mx:RemoteObject>
 Criar a função getProdutosHandler:
private function getProdutosHandler(event:ResultEvent):void
{
listaDeProdutos=event.result as ArrayCollection;
}
 Mudar o evento click do botão refrescar de forma a chamar o método remoto:
<mx:Button label="Refrescar” click="produtosService.getProdutos()"/>

Ligar o frontend ao backend
 E obtemos isto:

E criar um método 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 método que envia dados?
Por exemplo, inserir produto?
 No frontend adicionar ao RemoteObject:
<mx:method name="addProduto"
result="addProdutoHandler(event)"/>
 Criar a função addProdutoHandler:
private function
addProdutoHandler(event:ResultEvent):void
{
produtosService.getProdutos();
}

E criar um método que envia dados?
Por exemplo, inserir produto?
 Criar a função associada ao evento click do botão 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 aplicação que
permite inserir e listar produtos.
 A partir daqui o processo seria sempre o
mesmo para editar, apagar, etc.
 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-crud-
usando-flash-remoting-via-amfphp-19b2/
 Utilização de Value Objects:
 http://www.riapt.org/2007/07/16/exemplo-em-flex-2-utilizacao-de-value-
objects-com-flash-remoting/
 Aprender Cairngorm:
 http://www.riapt.org/2007/12/07/onde-aprender-cairngorm-a-framework-
mvc-da-adobe/
 Flex com AMFPHP passo a passo (inglês):
 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/
 Questões (em português):
 http://www.riapt.org/mailing-list/
 Questões (em inglês):
 http://groups.yahoo.com/group/flexcoders

Questões ?