Flex

Hello World no Flex com Zend_Amf

Posted on janeiro 27, 2012. Filed under: Flex, PHP, Zend Framework | Tags:, , |

Introdução

Neste artigo vamos mostrar como criar uma simples aplicação em Flex comunicando-se com uma aplicação PHP no lado do servidor. No lado do servidor vamos utilizar o componente Zend_Amf que é distribuído junto com o Zend Framework. Este componente é responsável por tornar possível a comunicação entre aplicações Flash e PHP. No nosso exemplo vamos utilizar a comunicação entre uma aplicação Flash gerado por Adobe Flex. Para quem não sabe, o Adobe Flex é o nome de uma tecnologia criada pela Macromedia com o objetivo de criar aplicações ricas para Internet. Existe um SDK para Adobe Flex, que no final irá gerar um arquivo Flash para ser incorporado em sua aplicação. Vamos falar um pouco sobre o Zend_Amf.

Zend_Amf

O componente Zend_Amf suporta o protocolo AMF (Action Message Format) da Adobe que é usado pelo Flash para se comunicar com aplicações remotas através de trocas de mensagens.

A especificação do AMF é disponível gratuitamente e serve como referência para quem deseja criar aplicações que irão se comunicar com aplicações Flash. (A documentação é para aqueles que querem criar seu próprio protocolo de comunicação, que não é o nosso caso, já que o Zend_Amf já faz esse trabalho).

Instalando Adobe Flash Builder

Para criação da nossa aplicação Flex, vamos utilizar o Adobe Flash Builder, que pode ser baixado através do link
http://www.adobe.com/go/try_flashbuilder_br. Você precisa ter uma conta no site da Adobe para poder realizar o download. O processo de instalação é simples. Caso você não tenha uma licensa do Adobe Flash Builder você poderá utilizá-lo para testes por 60 dias. Após isso será necessário a utilização de uma licensa.

No Servidor

Vamos criar nosso arquivo server.php dentro do diretório amf na raiz do projeto no webserver. Ele será reponsável entre a comunicação do FLex com nossa aplicação PHP. Para este exemplo estamos disponibilizando o método Ola da classe Usuario que é responsável por retornar uma string inserindo nela o parâmetro enviado para o método. Podemos disponibilizar quantas classes for preciso através do método setClass do Zend_Amf_Server. A utilização do Zend_Amf_Server é bem simples como você pode ver abaixo.

A classe Zend_Amf_Server permite também que você carregue classes dinâmicamente. Você pode especificar um local onde estão localizados todos os arquivos de suas classes através do método addDirectory.

Para mais detalhes, acessar:
http://framework.zend.com/manual/en/zend.amf.server.html

<?php

/* incluindo lib do Zend_Amf_Server */
require_once('Zend/Amf/Server.php');

// instanciando o objeto do Zend_Amf
$server = new Zend_Amf_Server();

// Desabilita o modo producao para ajudar no debug.
// Habilitar quando colocar em producao
$server->setProduction(false);

// vamos disponibilizar a classe usuario para a aplicacao Flex
$server->setClass('Usuario');

// cria a resposta do classe Usuario em AMF
echo $server->handle();

/**
 * Definicao da Classe Usuario
 */
class Usuario {
        /**
         * @param string $nome
         * @return string
         */
        public function Ola($nome) {
                return "Ola $nome, Bem Vindo ao Flash com Zend_Amf";
        }
}

Perceba que usamos blocos de comentários nos métodos da nossa classe. Eles serão usados pelo Zend. É necessário que você documente no mínimo os parâmetros de entrada e o retorno de cada método disponibilizado para a aplicação Flex.

Veja também que colocamos setProduction para false, que ajuda no debug da aplicação! Lembre-se de Comentar essa linha quando estiver em produção!

Criando Aplicação Flex

Após realizado o download e instalado o Adobe Flash Builder, estamos aptos à criar nossas aplicações Flex. Inicie a IDE. Nosso primeiro passo é criar um projeto. em File -> New -> Flex Project.

Irá abrir uma nova janela com as instruções para criação do novo projeto. Insira o nome da projeto e clique no botão Finish. Para o exemplo deste artigo o nome do projeto usado foi HelloZend.

O próximo passo é criar um arquivo de configuração para que o Flex possa se comunicar com o PHP. Neste arquivo estaremos parametrizando o endpoint, ou seja, a URL que o Flex utilizará para se comunicar com o Zend. O nome do arquivo que vamos criar é o services-config.xml. Crie o arquivo dentro da pasta src do seu projeto.

Insira o conteúdo abaixo no arquivo services-config.xml

<?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="http://127.0.0.1/amf/server.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

No arquivo services-config.xml criado anteriormente altere a URL na tag endpoint para que aponte para seu script PHP que criamos no ínicio do artigo (que utiliza o Zend_Amf_Server).

...
<endpoint uri="http://127.0.0.1/amf/server.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
...

Agora é necessário dizer ao Flash Builder para utilizar o arquivo services-config.xml durante a compilação do projeto. Clique com o botão direito do mouse no nome do projeto e em Properties. Entre na seção Flex Compiler e adicione o parâmetro -services services-config.xml no quadro Additional compile arguments:

Vamos criar agora o RemoteObject que irá se comunicar com o servidor. O código adiante deverá ser inserido no arquivo HelloZend.mxml. O RemoteObject deve estar dentro da tag Declarations.

<mx:RemoteObject id="mysource"
   source="Usuario"
   showBusyCursor="true"
   fault="faultListener(event)"
   destination="zend">
	<mx:method name="Ola" result="testarConexao(event)"/>
</mx:RemoteObject>

Segue a descrição dos atributos usados no RemoteObject:

  • id=”mysource”, Nome do elemento RemoteObject para podermos referenciá-lo nos scripts.
  • source=”Usuario”, Nome da classe no PHP.
  • showBusyCursor=”true”, Muda o ícone do mouse enquanto estiver aguardando a resposta da requisição.
  • fault=”faultListener(event)”, Tratamento dos erros será realizado pela função falutListener.
  • destination=”zend”, Referencia o destination criado no arquivo services-config.xml.

Perceba que declaramos o método Ola que corresponde ao método Ola da nossa classe Usuario no PHP. O retorno da requisição do método Ola será tratado pela função testarConexao que vamos criar adiante.

O próximo passo é a criação dos listeners: testarConexao responsável por tratar o retorno da requisição; faultListener responsável por tratar algum possível erro durante a requisição. Os listeners devem estar dentro da tag fx:Script.

<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			
			public function testarConexao(event:ResultEvent):void	{
				Alert.show(event.result.toString());
			}
			
			private function faultListener(event:FaultEvent):void {
				Alert.show(event.fault.message, "Error");
			}
			
		]]>
	</fx:Script>

O processamento dos listeners é bem simples, exibir um Alert com o resultado da requisição enviado para o Zend e, caso ocorra erro, exibir um alert com os detalhes do erro ocorrido.

Vamos agora criar o botão que deverá disparar a requisição para o Zend:

	<mx:VBox top="30" left="100">
		<mx:Button label="Testar Flex-Zend" click="mysource.Ola('Douglas')" />
	</mx:VBox>

Pronto, já temos nossa aplicação Flex pronta.
Para facilitar o seu teste, segue abaixo o código fonte completo do arquivo HelloZend.mxml:

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		
		<mx:RemoteObject id="mysource"
						 source="Usuario"
						 showBusyCursor="true"
						 fault="faultListener(event)"
						 destination="zend">
			
			<mx:method name="Ola"
					   result="testarConexao(event)"/>
		</mx:RemoteObject>
		
		
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			
			public function testarConexao(event:ResultEvent):void	{
				Alert.show(event.result.toString());
			}
			
			private function faultListener(event:FaultEvent):void {
				Alert.show(event.fault.message, "Error");
			}
			
		]]>
	</fx:Script>
	
	
	<mx:VBox top="30" left="100">
		<mx:Button label="Testar Flex-Zend" click="mysource.Ola('Douglas')" />
	</mx:VBox>
	
</s:Application>

Ao executar nossa aplicação Flex, teremos a seguinte tela:

Ao clicar no botão, será disparado nossa requisição para o Zend:

É isso ae. Agora é só expandir o Hello World para aplicações maiores. Boa Sorte!

Ler Post Completo | Make a Comment ( None so far )

Zend_Amf e Módulos Flex 3, usando RemoteObject

Posted on junho 5, 2009. Filed under: Flex, PHP, Zend Framework |

Recentemente tive um problema de comunicação entre o Flex 3 e o componente Zend_Amf do Zend Framework. Estou trabalhando em um sistema modular com o flex no frontend acessando o Zend Framework no backend através do RemoteObject. O problema ocorria quando tentava usar o RemoteObject dentro de um módulo flex. Após carregar o módulo, executava-se a função init() definido no atributo “creationComplete”. O método init() realizava o request remoto e carrega combox e grids. Porem ocorria falhas frequentes ao tentar receber os dados da requisição. Debugando o Zend_Amf, recebia a seguinte mensagem:

“[RPC Fault faultString=”Method “null” does not exist” faultCode=”0″ faultDetail=”#0 /usr/share/php/Zend/Amf/Server.php(268): Zend_Amf_Server->_dispatch(‘null’, Object(stdClass))..”

Para corrigir o problema foi necessário acrescentar a linha abaixo dentro do método init():

registerClassAlias("flex.messaging.messages.RemotingMessage", mx.messaging.messages.RemotingMessage);

Por padrão o ‘flex.messaging.messages.RemotingMessage’ não foi registrado no módulo. Devido a isso não aconteciam o mapeamento correto no Zend_Amf.

Foi necessário também adicionar o import:

import mx.messaging.messages.RemotingMessage;

Após isso não houve mais problemas.

Ler Post Completo | Make a Comment ( None so far )

Liked it here?
Why not try sites on the blogroll...

%d blogueiros gostam disto: