Integrando Flex + Zend Framework (Usando o Quickstart da Zend) - PARTE 3

This entry was posted segunda-feira, 18 maio, 2009 at 1:17

Olá pessoal, na Parte 2 tinha mostrado como criar o componente Zend AMF para comunicarmos com o Flex. Então vamos ao Flex e dar a continuidade a essa integração.

No seu Eclipse, selecione a perspectiva Flex Development e logo clique com o direito do mouse sobre o projeto PHP ZendFrameworkQuickstart. No menu selecione Flex Project Nature > Add Flex Project Nature, conforme a imagem abaixo.
Clique para ampliar

No nosso projeto não será necessário selecionar a tecnologia, pois não iremos rodar o projeto diretamente do Eclipse e sim diretamente pelo browser, como pode ver a imagem abaixo.

Clique para ampliar

Prosseguindo coloque o seu Output Folder a pasta public, aonde acessaremos diretamente nossa aplicação Flex.

Clique para ampliar

Clicando em Finish será criado a pasta “src” dentro do projeto e abrirá o arquivo ZendFrameworkQuickstart.mxml. Caso ocorra algum erro no Eclipse de “Cannot create HMTL wrapper…” que não criou a pasta “html-template”, clicamos com o botão direito em cima da linha do erro e selecionamos a opção “Recreate HTML Templates”.
Clique para ampliar!

Na Application ZendFrameworkQuickstart criamos um simples botão e em seguida criaremos um RemoteObject no próprio MXML.

ZendFrameworkQuickstart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:RemoteObject id="ro" destination="zend"
        endpoint="http://localhost/guestbook/gateway/amf"
		source="HelloFlexService" />

	<mx:Button label="Chamar PHP" verticalCenter="0" horizontalCenter="0" />
</mx:Application>

Veja o código acima, criei o RemoteObject passando o Endpoint com a url “http://localhost/guestbook/gateway/amf” que nada mais é a nossa action que configuramos o componente Zend AMF para se comunicar com o Flex, também foi adicionado a propriedade “source” com o nome da classe PHP que desejamos chamar, neste caso é a “HelloFlexService”.

Feito isso, vamos colocar uma ação de click no Botão e iremos chamar o método “helloFlex” que está na classe “HelloFlexService”.

ZendFrameworkQuickstart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;

			public function chamarPhp():void{
				//chama o método helloFlex
				ro.helloFlex();
			}
		]]>
	</mx:Script>

	<mx:RemoteObject id="ro" destination="zend"
        endpoint="http://localhost/guestbook/gateway/amf"
		source="HelloFlexService"
        result="Alert.show(event.result.toString())" />		

	<mx:Button label="Chamar PHP" click="chamarPhp()" verticalCenter="0"
        horizontalCenter="0" />
</mx:Application>

Como pode ver criei um método chamarPhp que será chamado quando eu clicar no botão e dentro do método chamamos o RemoteObject de id “ro” e em seguida invocamos o método que está lá na classe HelloFlexService, chamado helloFlex.
Já aproveitei e adicionei um evento de result no RemoteObject, colocando um Alert para exibir o resultado vindo do método invocado. Salve a Application ZendFrameworkQuickstart e antes de acessar a url “http://localhost/guestbook/ZendFrameworkQuickstart.html” para rodar nossa aplicação Flex, vamos ao GatewayController e adicionaremos no método init() a linha de código “$this->_helper->layout()->disableLayout();”, veja abaixo como ficará o seu GatewayController:

GatewayController.php

<?php
class GatewayController extends Zend_Controller_Action {

	public function init(){
		//linha adicionada para evitar que o layout seja exibido
		$this->_helper->layout()->disableLayout();

		//devemos adicionar isso para evitar a renderização da view
		$this->getHelper('viewRenderer')->setNoRender();

		//carrega a classe
		Zend_Loader::loadClass('Zend_Amf_Server');
	}

	public function amfAction(){
		$server = new Zend_Amf_Server();
		$server->addDirectory(APPLICATION_PATH . '/services/');
		echo($server->handle());
	}

}

Abrindo parenteses e explicando essa nova linha adicionada, ela evita que o layout HTML do nosso projeto Zend seja enviado para o arquivo AMF, atrapalhando nossa requisição entre Flex e PHP, pois ocorrerá um erro se tentar rodar sem desabilitar o layout do projeto. Poderá até fazer um teste rodando o nosso Endpoint “http://localhost/guestbook/gateway/amf” pelo browser e ver que o arquivo AMF terá dentro o layout HTML mais a string “Zend Amf Endpoint” e para que funcione corretamente a requisição AMF deve conter apenas a string “Zend Amf Endpoint”, fechando parenteses.
Agora sim rode a aplicação Flex pela URL “http://localhost/guestbook/ZendFrameworkQuickstart.html” e clique no botão Chamar PHP e verá como resultado o Alert exibindo o result do método helloFlex, que será a seguinte frase “Olá Flex, estou usando o Zend AMF!”.

Bom pessoal, o exemplo foi simples, mas pretendo fazer a parte 4 que mostrará como fazer a camada view do Quickstart em Flex. Abraços e até breve.

3 Comentários to Integrando Flex + Zend Framework (Usando o Quickstart da Zend) - PARTE 3

  1. Junior Grossi says:

    junho 12th, 2009 at 13:42

    Olá José Carlos!

    Primeiramente parabéns pelo blog! Já programo em Zend Fw a uns anos, e trabalho com PHP a uns 6, 7 anos. Estou me envolvendo e querendo aprender a trabalhar com Flex, achei este “novo mundo” fascinante!

    Como trabalho com Zend Fw quero interligá-lo ao Flex, assim como no tutorial. Tudo certo até então. Porém, como estou acostumado com as Views do Zend, ainda não caiu a ficha de como esta renderização é feita no Flex. Estou acostumado a ter múltiplas views e renderizá-las de acordo com minha necessidade e a action chamada. No Flex temos apenas um arquivo de View Mxml? Em caso de aplicação de grande porte, como é o meu, como proceder com estas views de maneira separada para controlar toda a aplicação? Acho que estou muito preso ainda no modelo do Zend_View mesmo.

    Andei vendo uns vídeos que você recomendou no tv.adobe.com sobre Zend Framework a Flex e até então tudo bem. Falta ainda uma aplicação real para entender o real funcionamento.

    Se puder ajudar ou recomendar links para estudo ficaria muito grato.

    Obrigado e parabéns!

    Junior Grossi

  2. CalRaiden© says:

    julho 29th, 2009 at 16:50

    Legal, e além de tudo funciona. Sério, primeiro tutorial completo e simples, que implemento e funciona.

    Gostei, falta agora cria um mais completo com conexão ao banco de dados.

  3. Lucas Bueno says:

    novembro 3rd, 2009 at 21:43

    Muito bom. Funcionou beleza, e sem precisar configurar o services-config.xml (não ainda não sei pra que serve) citado em outros tutoriais.

    Firmeza….

Deixe um comentário