View
11.230
Download
0
Category
Preview:
DESCRIPTION
Tutorial de como integrar o FLEX com PHP através da biblioteca AMFPHP.
Citation preview
Ligação do Flex a um backend LAMP
usando AMFPHP
1st Portugal Adobe Flex Camp
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...)
O apresentador Por outras “palavras”:
w
ww
.cas
tin
go
ffic
e.n
et
u
ser:
osf
lash
pas
s: t
est
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 deinterpretaçã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
openAMF
GraniteDS
BlazeDS
Red5
NET
Fluorine
AMF.NET
Perl
AMF::Perl
Ruby
Rubyamf
WebOrb
Python
PyAMF
PHP
SabreAMF
CakePHP
WebOrb
AMFPHP
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>
</destination>
</service>
</services>
<channels>
<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>
Colocar aqui o endereço para o gateway.php
Pode ser usado um caminho relativo :)
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/browser/ )
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 ?
Recommended