Seguindo o pedido de Paulo André Martinhago de Andrade, vamos criar um CRUD utilizando Flex e Zend_AMF. Antes de começarmos, precisamos preparar o nosso ambiente, que obrigatoriamente necessita de 2 programas: WAMP Server (http://www.wampserver.com/en/) e Flash Builder 4 (http://www.adobe.com/products/flex/). O WAMP Server é um servidor PHP que pode ser instalado no Windows. Não entraremos em detalhes sobre ele, se você tiver dificuldades me fale que eu crio um outro artigo. O Flash Builder é a nossa IDE de desenvolvimento em Flex. Além destes programas precisamos também do Zend Framework, que pode ser baixado nesse endereço: http://framework.zend.com/download/latest. Pode baixar o “Zend Framework Minimal Package”.
Criando a tabela no banco de dados
Com o WAMP Server e Adobe Flash instalado e o Zend Framework baixado, podemos começar o nosso CRUD. Inicialmente precisamos criar a base de dados, que contém as tabelas. Para isso, acesse http://localhost/ e certifique-se que uma tela como a abaixo irá aparecer:
Para criarmos a tabela, precisamos acessar o phpmyadmin. Clique no link em “Tools”. Na próxima página, no campo “Criar novo banco de dados”, crie o banco “flexCRUD”. Na próxima tela podemos criar a tabela, que iremos chamar de pessoas. Em número de arquivos, coloque 3. Na próxima tela, crie os 3 campos conforme a imagem a seguir:
Se não quiser usar a interface gráfica, use a seguinte SQL:
CREATE TABLE 'flexCRUD'.'Pessoas' ( 'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY , 'nome' VARCHAR( 200 ) NOT NULL , 'email' VARCHAR( 200 ) NOT NULL ) ENGINE = MYISAM ;
Criando o projeto Flex
Agora que estamos com o banco de dados pronto, vamos criar a aplicação Flex. Abra o Flash Builder vá até File > New > Flex Project. Na primeira tela, insira o nome do projeto, e certifique-se que estamos criando uma WebApplication (detalhe da figura abaixo). Não clique no botão Finish, clique em Next.
A próxima tela do assistente exibe a configuração do Output Folder. Nesta configuração dizemos para onde os arquivos compilados do Flex irão,e neste caso temos que configurar a pasta “c:\wamp\www\FlexCRUD”. Ainda não clique em Finish, precisamos configurar mais alguns parâmetros na próxima tela.
Na próxima tela de configuração, precisamos configurar o campo “Output Folder URL”. Ele faz com que, quando acionarmos o botão “run” do Flash Builder, a url configurada neste campo seja carregada. Geralmente o Flash Builder abre “c:\…..” mas iremos configurar desta forma:
Após clicar em Finish o projeto é criado. Podemos testá-lo clicando no botão “Run” (CTRL+F11). Veja que a url aberta no navegador é “http://localhost/flexCRUD/flexCRUD.html”. Verifique também o diretório “C:\wamp\www\flexCRUD”, se está semelhante a imagem a seguir:
Instalando Zend Framework
Crie a pasta “C:\wamp\www\flexCRUD\php” Após baixar o Zend Framework, descompacte-o um lugar qualquer e copia a pasta Zend para a recém criada pasta “php”. Teremos algo semelhante a seguinte figura:
Configurando o gateway.php
Agora na pasta “php” iremos criar o seguinte arquivo: gateway.php. Este arquivo é a “ponte” de comunicação entre o Flex e o PHP. Estou usando o Notepad++ para manipular os arquivos PHP. O código deste arquivo é o seguinte:
<?php //Adiciona o autoloader do Zend Framework // Assim todas as classes do framework // serão carregadas quando precisarem require_once "Zend/Loader/Autoloader.php"; Zend_Loader_Autoloader::getInstance()->setFallbackAutoloader(true); //Instancia o servidor Zend_AMF $server = new Zend_Amf_Server(); //Habilita o modo de desenvolvimento, retornando // mensagens de erro. Comente esta linha quando // estiver em modo de produção $server->setProduction(false); //Adiciona este diretorio como um diretorio de // classes que podem ser usadas pelo Flex $server->addDirectory(dirname(__FILE__)); //Dependendo da requisição do Flex, irá // chamar a classe correspondente, respondendo // em formato AMF o que a classe responder. echo $server->handle(); //não precisa fechar a tag PHP. // É uma prática recomendada pela Zend!
O arquivo gateway.php é muito importante. Você deve olhar cada linha deste arquivo e entender perfeitamente o que ela faz. Se não entender me fale oK? Para testarmos se o arquivo gateway está ok, acesse: “http://localhost/flexCRUD/php/gateway.php” e verifique se surge um arquivo para download com o texto “<p>Zend Amf Endpoint</p>”. Se isto acontecer, o arquivo está OK!
Criando a classe Pessoas
Inicialmente a classe Pessoas (arquivo pessoas.php) possui somente um método para testarmos a conexão. Veja:
<?php
class Pessoas
{
function TesteConexao()
{
return "OK";
}
}
Configurando a conexão do Flex com o PHP
Esta configuração é feita através do arquivo services-config.xml. Este arquivo contém um xml que descreve a conexão amf e aponta para o arquivo gateway.php. Crie o arquivo services-config.xml na pasta raiz do Flex (“src”), e adicione o seguinte código:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="zend-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="zend">
<channels>
<channel ref="zend-endpoint"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="zend-endpoint"
class="mx.messaging.channels.AMFChannel">
<endpoint uri="php/gateway.php"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
Após criar o arquivo, deve-se adicioná-lo nas diretivas de compilação do projeto. Acesse as propriedades do projeto e no item Flex Compiler, adicione a diretiva: -services services-config.xml. Veja como fica:
Testando a conexão
Agora estamos prontos para testar a conexão. Altere o arquivo flexCRUD.mxml para o seguinte código:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Declarations>
<mx:RemoteObject id="RemotePessoas"
destination="zend"
source="Pessoas">
<mx:method name="TesteConexao"
result="OnTestConexaoOk(event)"/>
</mx:RemoteObject>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
public function OnTestConexaoOk(event:ResultEvent):void
{
Alert.show(event.result.toString());
}
]]>
</fx:Script>
<s:creationComplete>
<![CDATA[
RemotePessoas.TesteConexao();
]]>
</s:creationComplete>
</s:Application>
Neste código criamos um RemoteObject, que possui duas propriedades importantes: destination e source. Estas propriedades apontam respectivamente para a configuração do arquivo services-config.xml e da classe pessoas. Dentro de RemoteObject, criamos um mx:method que aponta para uma função da classe pessoas.php, neste caso “TesteConexao”. Em s:creationComplete, fazemos a chamada na função na classe PHP, que dispara todo o processo.
A figura a seguir tenta ilustrar este processo. Clique na figura para aumentá-la:
Agora com toda a conexão funcionando, vamos partir para a 2a parte do nosso tutorial.
Obrigado Daniel por sua dedicação em poder atender meu pedido e passar este ensino para nós, estou aguardando os próximos posts, Abraços!
Pingback: CRUD com Flex e Zend_AMF – Parte 2 | flex.etc.br – Livros, tutoriais, exemplos sobre Adobe Flex
Pingback: CRUD com Flex e ZendAMF – Parte 3 | flex.etc.br – Livros, tutoriais, exemplos sobre Adobe Flex
Pingback: CRUD com Flex e Zend AMF – Parte 4 | flex.etc.br – Livros, tutoriais, exemplos sobre Adobe Flex
Pingback: CRUD com Flex e Zend-AMF – Parte 5 – Final | flex.etc.br – Livros, tutoriais, exemplos sobre Adobe Flex
Cara ótimo artigo sobre integração Flex+ZendAMF….
bah tomara que nos teus próximos artigos tenham estes “diagramas”( ou desenhos ) explicando o funcionamento, isso ajuda muito pra quem tá começando.
Parabéns Daniel e ++sucesso!
Parabéns pelo artigo. Esclarecedor mesmo! Pesquisei muito para encontrar um artigo que fosse claro e objetivo. ENCONTREI. Parabéns cara!
Opa Daniel,
Parabéns pela iniciativa. Comprei seus 2 ultimos livros e os artigos são de fato bem didáticos e de fácil entendimento. PARABÉNS…!!
Ola Daniel , muito bom esse how to sobre Crud, gostaria de saber como eu consigo
colocar esse crud em modo de produção na web, como que eu coloco o caminho do arquivo service-cofing.xml , é a mesma coisa que vc fala no livro flex e php?
abraço
Oi, você pode colocar o caminho relativo no services-config.xml. Assim:
dessa forma o services config é o mesmo para todos.
ih o wordpress barrou hehe.. Mas é o mesmo caminho do crud! No servidor web vai funcionar também
Boas Daniel
Como eu faço para enviar o sistema de CRUD para Web?
Já no desenvolvimente teria como eu fazer totalmente online?
Desde já grato, aguardo resposta
Roberto
Olá,
você precisa usar o comando export release. Isso gera um conjunto de arquivos na pasta release, que devem ser enviados para a o servidor. Deve ser enviado também a parte PHP, e o caminho do php no services-config deve coincidir com o caminho real!
Daniel tudo bom amigo, me ajuda.
Estou fazendo esse exemplo da primeira aula e nao está dando certo.
Em um primeiro momento criei o gateway.php e a mensagem Zend Amf Endpoint apareceu no browser e funcionou tudo certinho, mas depois nao sei o porque o gateway.php começou aparecer um arquivo para fazer o download e ai parou de funcionar. Vc sabe me falar pq amigo, estou louco para aprender o zend mas to barrado nisso.. Obrigado amigo
Oi, se quando você acessa o gateway.php aparece um arquivo para download, cujo conteúdo é “Zend AMF Gateway”, está correto ! pode prosseguir que vai dar certo.
Oi Daniel !
Este artigo esta ótimo, mas teria um tutorial em português, claro, passo-a-passo de fazer o crud com o blazerds pois tenho mais afinidade com java e não com php. abraços
oi, vai ter no meu próximo livro
Fala Daniel, beleza? Cara estou lendo o seu livro “Dominando flex e zend” e estou gostando muito, dae surgiu uma dúvida com relação ao gateway.php
pq no livro vc já faz a conexao no gateway e aki não?
pq no gateway do livro vc usa a Zend_Db_Table::setDefaultAdapter ??
vlwww
Olá, eu não entendi bem a primeira pergunta
A segunda eu entendi sim. No livro eu uso o Zend_DB_Tablem, que é uma abstração do banco de dados (resumindo, mais poderoso). Lá no livro eu faço o setDefaultadapter para relacionar a configuração do banco de dados com o Zend_DB_Table. No CRUD, eu não uso o Zend_DB_Table, uso apenas o Zend_Db, que é mais simples de implementar, mas é mais fraco quanto a relacionamento entre tabelas. Veja que no crud eu tenho que criar uma classe base que tem a configuração do banco e fazer com que as classes em php herdem desta classe. No livro eu não preciso fazer isso não. Me fale se você não entendeu OK?
Fiz tudo certinho, mas quando rodo o php gateway.php ele aparece com estes erros :
Warning: require_once(var/www/flexCRUD/php/Zend/Config.php): failed to open stream: No such file or directory in /var/www/flexCRUD/php/gateway.php on line 2
Fatal error: require_once(): Failed opening required ‘var/www/flexCRUD/php/Zend/Config.php’ (include_path=’.:/usr/share/php:/usr/share/pear’) in /var/www/flexCRUD/php/gateway.php on line 2
root@prisma:/var/www/flexCRUD/php#
Estou usando UBUNTU.
Olá,
você copiou o Zend Framework para o seu projeto? ele está em “var/www/flexCRUD/php/Zend/” ???
Boa tarde Daniel, primeiramente parabéns pelo trabalho, está me auxiliando muito mais que professores de universidade, porém surgiu uma dúvida, reparei que ao criar o projeto voce deixou por default o caminho C:\Users\xxx\Adobe Flash Builder\ . A minha dúvida é a seguinte .. se eu copiar somente o conteudo que estiver no C:\wamp\www\flexCRUD irá funcionar no servidor?? ou tenho que fazer de outra forma?
Olá, O que está em users é o código fonte do projeto, não precisa estar no servidor. Já o que está no servidor web (wamp) precisa estar no servidor, tais como os arquivos PHP, o framework Zend, e a aplicação Flex compilada (o arquivo swf).
Saudações Daniel,
estou um tanto quanto frustrado com o zendamf.
O que acontece é que a comunicação com o back-end acontece mas o objeto que retorna não é do tipo esperado.
Está retornando o tipo ObjectProxy e isso dificulta a codificação no flex uma vez que tenho muitos campos no VO de retorno e não compensa ficar setando todos os valores para o meu objeto local.
Geralmente fazemos apenas um typecast no event.result para o objeto esperado.
As classes foram mapeadas configuradas corretamente no gateway.
O que pode estar errado?
Olá,
envie seu projeto para suporte@danielschmitz.com.br
vou dar uma olhada, com certeza tem algo errado !
Olá Daniel primeiramente parabéns pela iniciativa, ótima ajuda pra quem está iniciando.
Minha dúvida é o seguinte, eu segui corretamente o tutorial, até copiei o código mostrado na pagina , e ao final quando executo o exemplo não aparece nada, no lugar onde deveria aparecer o alert , trazendo o metodo da classe pessoa.
Em questão a instalação ficou certinha ele mostrou aquele arquivo escrito Zend Endpoint.
Só quero saber o motivo de não aparecer nada.
Estou usando o flex 4.0 , quando chegar em casa vou testar com a versão 4.5
agradeço se puder ajudar
att,
Uma pergunta… era para ele dar esse erro?
“Warning: require_once(Zend/Loader.php) [function.require-once]: failed to open stream: No such file or directory in C:\_xampp\htdocs\fx\entrega\ZendAMF-1.11.10\library\Zend\Loader\Autoloader.php on line 24″
o que eu fiz de errado?
oi, é algum erro com o caminho do zend framework, ou o zend frameowrk nao está lá
Daniel ,
estou colocando uma aplicação teste no servidor da localweb os dados nao aparece ò suporte falou que esta normal pediram para verificar a aplicaçao na minha maquina estou usando o wamp e usando o banco da hospedagem funciona normal agora quando coloco no servidor nao vai. vc pode me ajudar
public_html = aplicaçao flex
php = Zend/classes php e o gateway
http://www.equipeburnout.com.br/apollo/home.html
http://www.equipeburnout.com.br/apollo/php/gateway.php
Bom dia… estou começando a estudar seus tutoriais usando o FB 4.5 e ao executar o teste, estou recebendo a seguinte mensagem:
[RPC Fault faultString="Send failed" faultCode="Client.Error.MessageSend" faultDetail="Channel.Connect.Failed error NetConnection.Call.BadVersion: : url: 'http://localhost/flexCRUD/php/gateway.php'"]
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\rpc\AbstractInvoker.as:345]
at mx.rpc::Responder/fault()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\rpc\Responder.as:68]
at mx.rpc::AsyncRequest/fault()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\rpc\AsyncRequest.as:113]
at mx.messaging::ChannelSet/faultPendingSends()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\messaging\ChannelSet.as:1619]
at mx.messaging::ChannelSet/channelFaultHandler()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\messaging\ChannelSet.as:1209]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.messaging::Channel/connectFailed()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\messaging\Channel.as:1117]
at mx.messaging.channels::PollingChannel/connectFailed()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\messaging\channels\PollingChannel.as:435]
at mx.messaging.channels::AMFChannel/statusHandler()[E:\dev\hero_private\frameworks\projects\rpc\src\mx\messaging\channels\AMFChannel.as:453]
Pode me ajudar a resolver?
Testei com várias versões do wampserver: 2.1e-x32, 2.2a-x32 e 2.3-beta1-x32… esta última já com o PHP 5.4 e também não rodou.
Já com o xampp 1.7.1 rodou normalmente…
Provavelmente é alguma configuração que precisa ser feita no wamp pra rodar corretamente…
olá , tenho o Flash® Builder™ 4.5 , segui fielmente este tutorial: http://www.youtube.com/watch?v=0fSe2TIbWXc
deu quase tudo certo , somente no final não populou a tabela e apresentou a seguinte mensagem de erro: Channel disconnected
Channel disconnected before an acknowledgement was received
o que pode ser?
Olá, é algum erro de PHP, tipo sintaxe, erro de conexao, etc. Dá uma olhada no log de erros do PHP
Boa tarde Daniel,
Fui seguindo o seu tutorial passo a passo, mas me deparei com o seguinte erro…
quando digito no navegador http://localhost/flexCRUD/php/gateway.php
Ele abre uma janela de download do gateway.php e logo em seguida uma mensagem de erro dizendo “Não é possível baixar gateway.php de localhost Não é possível abrir o site. O site solicitado não está disponível ou não foi encontrado. Tente novamente mais tarde.
Isso é normal??? Seria essa mensagem que teria que aparecer???
´Mas indo um pouco mais adiante, fui até a parte de inserir usuários… porém ao colocar o usuário e e-mail e clicar em ok, aparece o seguinte erro…
(mx.messaging.messages::ErrorMessage)#0
body = (Object)#1
clientId = (null)
correlationId = “9B41D3BB-9144-5B88-348F-F070B42FA863″
destination = “”
extendedData = (null)
faultCode = “Client.Error.MessageSend”
faultDetail = “Channel.Connect.Failed error NetConnection.Call.BadVersion: : url: ‘http://localhost/flexCRUD/php/gateway.php'”
faultString = “Send failed”
headers = (Object)#2
messageId = “8B3DBE90-273C-2CEB-40F9-F070B491F21A”
rootCause = (mx.messaging.events::ChannelFaultEvent)#3
bubbles = false
cancelable = false
channel = (mx.messaging.channels::AMFChannel)#4
authenticated = false
channelSets = (Array)#5
connected = false
connectTimeout = -1
enableSmallMessages = true
endpoint = “http://localhost/flexCRUD/php/gateway.php”
failoverURIs = (Array)#6
id = “zend-endpoint”
mpiEnabled = false
netConnection = (flash.net::NetConnection)#7
client = (mx.messaging.channels::AMFChannel)#4
connected = false
maxPeerConnections = 8
objectEncoding = 3
proxyType = “none”
uri = “http://localhost/flexCRUD/php/gateway.php”
piggybackingEnabled = false
polling = false
pollingEnabled = true
pollingInterval = 3000
protocol = “http”
reconnecting = false
recordMessageSizes = false
recordMessageTimes = false
requestTimeout = -1
uri = “php/gateway.php”
url = “php/gateway.php”
useSmallMessages = false
channelId = “zend-endpoint”
connected = false
currentTarget = (mx.messaging.channels::AMFChannel)#4
eventPhase = 2
faultCode = “Channel.Connect.Failed”
faultDetail = “NetConnection.Call.BadVersion: : url: ‘http://localhost/flexCRUD/php/gateway.php'”
faultString = “error”
reconnecting = false
rejected = false
rootCause = (Object)#8
code = “NetConnection.Call.BadVersion”
description = “”
details = “”
level = “error”
target = (mx.messaging.channels::AMFChannel)#4
type = “channelFault”
timestamp = 0
timeToLive = 0
Saberia me dizer o que fazer??? Já segui algumas orientação que o pessoal sugeriu, mas até agora sem sucesso… Muito obrigado!!!
Abraço,
Alexander
Bom dia!
Gostaria de saber qual versão do flex builder seria melhor!!
a 3 ou 4 .
tenho algumas dificuldades em dazer CRUD…. ai tive fazendo comparações entre a 3 e 4. Percebi na v.4 uma melhor localização das databases.
“Se a pergunta ñ for muito incoerênte, gostaria de obter está resposta”!!
Flex 4 claro !! Ainda mais para novos projetos