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 ?