O artigo Adobe Flex com PHP usando ZendAMF – primeiros passos teve como objetivo exemplificar a integração do Flex com PHP para quem já tinha sistemas desenvolvidos usando o AMFPHP, por isso não usei as classes para acesso a banco de dados do ZendFramework. Neste artigo mostrarei o mesmo exemplo mas usando exclusivamente ZendFramework.

Pegarei o mesmo exemplo utilizado no artigo anterior, só modificando a classe PHP para usar as classes de abstração de banco de dados do ZendFramework. Começaremos com nosso gateway.php

Executando o link no seu navegador, deve aparecer a seguinte mensagem:

Zend Amf Endpoint

Em seguida, modificaremos em nossa classe principal, que efetuará as operações de listar, inserir, apagar e atualizar os dados do nosso banco:

No ActionScript só precisaremos mudar o que será passado para o PHP, ao inves de VOs, mandaremos Arrays:

Referências:
http://framework.zend.com/manual/en/zend.db.adapter.html

O Adobe LiveCycle Collaboration Service possui em seu SDK, exemplos de integração com as principais linguagens de programação web do mercado como PHP, Java, Python, etc.
Na documentação da Adobe, é recomendado o uso do AMFPHP ou o PHP puro mesmo, mas nada impede de usar tranquilamente em conjunto com o ZendFramework (usando ZendAMF)
Ryan Stewart escreveu dois artigos mostrando a implementação com PHP e REST.

• http://ria.dzone.com/articles/integrating-php-flash
• http://ria.dzone.com/articles/php-flash-rest

Uma observação sobre o artigo de Ryan, no Flex 4, Adobe passou a usar o swfobject, então o modo de pegar os parâmetros via URL e passar para o SWF fica desse modo:

No SDK do LCCS, existe um arquivo chamado lccs.php, basta copiar para o mesmo diretório em que você já usa suas classes. Em seguida, adicionar o include no arquivo gateway.php

E está é uma simples classe para teste chamando o método que retorna o token para autenticação.

Pessoal, tenho recebido muitas dúvidas de como analizar o retorno AMF do java/php, causando principalmente aquele erro “Server Fault”.

Algo OBRIGATÓRIO que todo desenvolvedor deve conhecer é uma forma de estar sempre atento ao retorno AMF e isso pode ser realizado de diversas formas. A mais simples delas é a integração Firefox + Firebug + AMF Explorer e iremos mostrar a seguir como fazer isso.

Primeiro, instale o firefox: http://br.mozdev.org/

Segundo, instale o firebug: https://addons.mozilla.org/pt-br/firefox/addon/firebug/

Terceiro, instale o AMF Explorer: https://addons.mozilla.org/pt-br/firefox/addon/amf-explorer/

Reinicie o firefox (tanto para o firebug quanto para o amf explorer) e então carregue a sua aplicação Flex. Clique no botão do firebug, que na versão 4 está no canto superior direito da tela. Navegue até a aba “Rede” e habilite-a:

Quando for realizar a conexão, limpe as entradas que já tenham acontecido, e faça a conexão AMF. Procure pelo seu gateway, que é o arquivo PHP ou Java que faz a conexão com o servidor. Expanda-o e veja se existe algo semelhante a figura a seguir:

Veja que, quanto expandimos o POST zendamf.php (no seu caso pode ser POST gateway.php), surge o AMF Request e o AMF Response. O AMF Response contém os dados que retornaram do servidor, conforme o exemplo a seguir:

Se houver algum erro de PHP, este erro estará na mensagem também, então ao invés de ver um erro genérico “Server Fault”, você verá o fatal error do php/java que foi gerado.

O Zend AMF é uma implementação feita em PHPpara se trabalhar com o protocolo de comunicação binário AMF(Action Message Format) fazendo parte do ZendFramework. Precisei implementar um sistema de upload de arquivos que fosse um pouco diferente do que normalmente é usado no Adobe Flash, sendo que essa funcionalidade precisava ser integrada no Zend AMF.

Pesquisando um pouco na net, achei a solução que foi mais simples do que eu imaginava baseada nesse artigo com algumas poucas adaptações.

Começaremos pelo nosso gateway que será usado como endpoint no Adobe Flex.

Agora o nosso VO com propriedades com nome do arquivo e os binarios.

Agora nossa classe PHP que ser responsavél por efetudar o upload.

Agora vamos a camada de visão usando o Adobe Flex, começamos com nosso VO.

Agora nosso mxml que carregará os bytes do arquivo para enviar para o Zend AMF.

DOWNLOAD SOURCE

Algumas linguagens de programação possuem o recurso de se trabalhar com exceções como PHP, ActionScript 3.0, Java, C# etc. É um recurso que se for bem usado, torna-se poderoso e ajuda a evitar futuras dores de cabeça para seu sistema. Uma exceção nada mais é que a possibilidade de tratar um erro sem necessariamente parar totalmente seu programa.

O suporte a exceções foi adicionado no PHP a partir da versão 5, e pode ser usando em conjunto com o Adobe Flex, neste caso utilizarei o Zend AMF, uma implementação do protocolo AMF para se trabalhar em conjunto com a Flash Platform e seu server-side rodando PHP fazendo parte do ZendFramework.
Considera-se uma boa prática você criar sua classe de exceção extendendo a classe Zend_Exception.

Por enquanto só isso basta, podemos implementar mais métodos de acordo com a necessidade de nosso sistema.
Agora criaremos uma classe para disparar a exceção, no PHP isso é feito usando a palavra reservada “throw”.

No Flex vamos chamar o método normalmente usando a classe RemoteObject.

Nossa atenção se voltará para o FaultEvent, ele é responsável por capturar as exceções vindas do servidor. Basicamente só precisaremos mostrar ao usuário o faultString.

Devemos ter o seguinte resultado:

Exception

Código completo:
Download PHP
Download Flex

Um dos pontos onde o ZendAmf perde para o AmfPhp ERA o fato de não ter um browser para poder testar os métodos do sistema.

O ZamfBrowser Atualmente na versão 1.2, é um aplicativo (.air) que permite ao desenvolvedor flex+php testar seus métodos e classes de uma forma mais prática.
Nesse tutorial irei explicar como configurar seus sistemas para que possa ser possível utilizar o ZamfBrowser.

Primeiramente baixe o ZamfBrowser através do site http://www.zamfbrowser.org

Após instalar o ZamfBrowser vamos configurar o arquivo gateway (que faz a ponte entre o flex e o PHP) para o ZamfBrowser poder ”enxergar” os métodos das classes.

No site oficial do ZamfBrowser tem um exemplo do arquivo gateway. O gateway deste tutorial já está preparada pra funcionar junto com o flex. Para mais informações recomendo a leitura do livro Dominando Flex e Zend do Daniel Schmitz.Arquivo gateway.php

 setFallbackAutoloader(true);

 //Instancia do servidor PHP
 $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 o controller php para que as classes sejam encontradas pelo flex
 $server->addDirectory(dirname(__FILE__) . '/php/controller/');

 //O model é acessado pelo php e não pelo flex
 set_include_path(dirname(__FILE__) . '/php/model/' . PATH_SEPARATOR.get_include_path());

 set_include_path(dirname(__FILE__) . '/php/controller/' . PATH_SEPARATOR.get_include_path());

 //Adiciona a classe do serviço ZamfBrowser para o ZamfBrowser possa retornar as informações dos métodos
 $server->setClass( "ZendAmfServiceBrowser" );

 //Adiciona uma referencia para o Zend_Amf_Server para que a classe ZendAmfServiceBrowser possa retornar as informações dos métodos.
 ZendAmfServiceBrowser::setAmfServer( $server );

 //Handle irá chamar a classe do controller e renderizar a saída AMF para o flex
 echo $server->handle();
 

Depois de configurar a pasta abra o Zamfbrowser.

Devemos agora incluir o servidor que queremos executar os métodos, para isso clique sobre o botão + .

No campo ZendAMF Server Name coloque um nome para o seu servidor

No campo Services Gateway coloque o endereço do seu services Gateway.

Depois de clicar no botão Add Server a tela inicial é exibida onde agora se deve escolher o servidor que deseja testar os métodos. No ComboBox escolha o servidor que você adicionou na etapa anterior e clique em Load ZendAmf Server.

1. O caminho do seu arquivo gateway.

2. Mostra as classes que estão dentro da pasta controller e a classe ZendAmfServicesBrowser. Essas classes foram adicionadas no arquivo gateway através do setClass e do addDirectory.

3. Mostra os métodos da classe selecionada.

4. Executa o método selecionado.

5. Mostra o resultado do método. Você pode alternar a visualização clicando em Console.

Esta é uma exibição de um método simples e que não recebe parâmetros. Um método que recebe parâmetros é executado da seguinte forma.

1. Em 1 o método seleciona é o sayHelloToSomebody.

2. Informa que o método está esperando um parâmetro.

3. Exibe o nome do parâmetro esperado.

No ComboBox Type altere o valor do parâmetro para para string.

Com o campo value disponível para que seja digitado o valor do parâmetro.

Bom pessoal, esses são os procedimentos básicos para poder utilizar o Browser do ZendAmf, espero que sirva de ajuda, qualquer dúvida é só perguntar.

Até a próxima.

Faça o download deste exemplo

Para finalizar o CRUD criado ao logo da semana, iremos implementar o delete de registros.

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex
• Parte 3 – Exibindo os dados no DataGrid
• Parte 4 – Alterando dados

Para deletar um registro, precisamos inicialmente criar um botão que tem o mesmo comportamento do botão editar, ou seja, ele fica disponível somente se uma linha do DataGrid estiver selecionada. Isso é feito com o seguinte código:

<s:Button label="Apagar" top="10" left="150"
	  enabled="{dg.selectedIndex!=-1}">
<s:click>
	<![CDATA[
	RemotePessoas.Delete(dg.selectedItem.id);
	]]>
</s:click>
</s:Button>

Veja que agora chamamos o método Delete do PHP, que está implementado a seguir:

function Delete($idPessoa)
{
	$this->db->delete("pessoas", "id = {$idPessoa}");
	return true;
}

Para finalizar, precisamos atualizar o DataGrid assim que o registro for deletado. Isso é feito da seguinte forma:

<fx:Declarations>
<mx:RemoteObject id="RemotePessoas"
		 destination="zend"
		 source="Pessoas">

	<mx:method name="TesteConexao"
		   result="OnTestConexaoOk(event)"/>

	<mx:method name="GetAll"
		   result="OnGetAll(event)"/>

	<mx:method name="Delete"
		   result="OnDelete(event)"/>

</mx:RemoteObject>
</fx:Declarations>

..............
protected function OnDelete(event:ResultEvent):void
	{
		GetAll();
	}

Com isso conseguimos deletar os registros que criamos.

Você pode baixar o código fonte completo aqui.

Conclusões

O desenvolvimento de sistemas, seja ele em flex ou não, sempre está passível de erros. Este crud apresentado possui
diversas melhorias que podem ser feitas e fica como “dever de casa” para você. Fique a vontade em criticar o código,
é assim que se aprende (e não copiando/colando)…

Esta série de artigos marcou minha despedida das férias, que tirei exclusivamente para trabalhar em casa. Foi muito
proveitoso, muito bom. Quero mais !! To pensando em virar freela !! Tem algum trabalho ae??

Nesta 4a parte iremos aprender a editar os dados que foram inseridos.

Outras partes do tutorial:

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex
• Parte 3 – Exibindo os dados no DataGrid

Agora vamos editar um registro que está no grid. Inicialmente temos que criar um botão “editar” , conforme o código a seguir:

<s:Button label="Editar" top="10"
       left="300"
       enabled="{dg.selectedIndex!=-1}">
  <s:click>
	<![CDATA[
	var p:PessoaForm = new PessoaForm();
	p.idPessoa = dg.selectedItem.id;
	PopUpManager.addPopUp(p,this,true);
	PopUpManager.centerPopUp(p);
	]]>
  </s:click>
</s:Button>

Neste botão, usamos a propriedade enabled ligada ao DataGrid, para que o botão esteja ativado somente se uma linha do DataGrid estiver selecionada. No click do botão, criamos a o popup e passamos o id da pessoa para ele. Quando o formulário terminar de carregar, ele irá se encarregar de pegar os dados.

Porque não passar diretamente nome e email para o formulário? Porque geralmente o formulário contém mais campos do que as colunas do DataGrid. Neste caso não seria possivel passar estes campos. O ideal sempre é passar o ID e pegar os dados novamente, mesmo porque os dados podem até ter sido alterados por outra pessoa.

O formulário PessoaForm.mxml conterá modificações para aceitar a edição de dados. As alterações estão em negrito

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
	   xmlns:s="library://ns.adobe.com/flex/spark"
	   xmlns:mx="library://ns.adobe.com/flex/mx"
	   width="300" height="150"
	   title="Pessoa"
	   close="{PopUpManager.removePopUp(this)}"
	   >
<s:layout>
<s:VerticalLayout/>
</s:layout>

<s:creationComplete>
<![CDATA[

	if (idPessoa != null)
		pessoaRemote.GetById(idPessoa);

]]>
</s:creationComplete>

<fx:Declarations>

<mx:RemoteObject id="pessoaRemote"
				 destination="zend"
				 source="Pessoas"
				 showBusyCursor="true"
				 >

	<mx:method name="Inserir"
			   result="OnInserir(event)"
			   fault="OnFault(event)"
			   />

	<mx:method name="GetById"
			   result="OnGetById(event)"
			   fault="OnFault(event)"
			   />

	<mx:method name="Alterar"
			   result="OnAlterar(event)"
			   fault="OnFault(event)"
			   />

</mx:RemoteObject>

</fx:Declarations>

<fx:Script>
<![CDATA[
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;

	import spark.components.PopUpAnchor;

	public var idPessoa:String;

	protected function OnInserir(event:ResultEvent):void
	{
		PopUpManager.removePopUp(this);
	}

	protected function OnFault(event:FaultEvent):void
	{
		Alert.show(event.message.toString(), "ERROR");
	}

	protected function OnGetById(event:ResultEvent):void
	{
		nome.text = event.result.nome;
		email.text = event.result.email;
	}

	protected function OnAlterar(event:ResultEvent):void
	{
		PopUpManager.removePopUp(this);
	}

]]>
</fx:Script>

<mx:Form width="100%" height="100%">
<mx:FormItem label="Nome:" width="100%">
	<s:TextInput id="nome" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Email:" width="100%">
	<s:TextInput id="email" width="100%"/>
</mx:FormItem>
</mx:Form>

<s:controlBarContent>
<s:HGroup horizontalAlign="right" width="100%">
	<s:Button id="btnOk" label="OK">
		<s:click>
			<![CDATA[

			if (idPessoa != null)
				pessoaRemote.Alterar(idPessoa,nome.text,email.text);
			else
				pessoaRemote.Inserir(nome.text,email.text);
			]]>
		</s:click>
	</s:Button>
	<s:Button id="btnCancelar"
			  label="Cancelar"
			  click="{PopUpManager.removePopUp(this)}"/>
</s:HGroup>
</s:controlBarContent>

</s:TitleWindow>

Para preparar o formulário para edição, é preciso criar uma variável de controle, que aqui chamamos de idPessoa. Através desta variável sabemos se estamos inserindo ou alterando um registro

A classe Pessoas no php também sobre modificações, conforme o código a seguir:

<?php
include("base.php");

class Pessoas extends Base
{
function __construct()
{
	parent::__construct();
}

function TesteConexao()
{
	return "OK";
}

function Inserir($nome,$email)
{
	$data = array("nome"=>$nome,"email"=>$email);
	$this->db->insert("pessoas",$data);
	return $this->db->lastInsertId();
}

function Alterar($idPessoa,$nome,$email)
{
	$data = array("nome"=>$nome,"email"=>$email);
	$this->db->update("pessoas",$data,"id={$idPessoa}");
	return true;
}

function GetAll()
{
	return $this->db->fetchAll("select * from pessoas");
}

function GetById($idPessoa)
{
	return $this->db->fetchRow("select * from pessoas where id = {$idPessoa}");
}

}

Agora só falta deletar o registro, que será feito no próximo artigo da série.

Nesta 3a parte do tutorial iremos exibir os dados que estão sendo gravados no formulário para inserir pessoas.

Outras partes do tutorial:

• Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão
• Parte 2 – Inserindo dados com ZendAmf e Flex

Agora vamos exibir os dados que foram adicionados na parte 2. Precisamos criar um dataGrid com as colunas nome e email, e fazer a comunicação com o PHP para obter os dados. O Datagrid é feito através do seguinte código:

<mx:DataGrid id="dg" width="400" height="200" top="50" left="10">
 <mx:columns>
	<mx:DataGridColumn dataField="id" visible="false"/>
	<mx:DataGridColumn dataField="nome" headerText="Nome"/>
	<mx:DataGridColumn dataField="email" headerText="Email"/>
 </mx:columns>
 <mx:creationComplete>
	<![CDATA[
	GetAll();
	]]>
 </mx:creationComplete>
</mx:DataGrid>

Veja que chamamos o método GetAll no CreationComplete do DataGrid. Este método está descrito a seguir:

<fx:Declarations>
 <mx:RemoteObject id="RemotePessoas"
				 destination="zend"
				 source="Pessoas">

	<mx:method name="TesteConexao"
			   result="OnTestConexaoOk(event)"/>

	<mx:method name="GetAll"
			   result="OnGetAll(event)"/>

 </mx:RemoteObject>
</fx:Declarations>

<fx:Script>
<![CDATA[
	import forms.PessoaForm;

	import mx.controls.Alert;
	import mx.managers.PopUpManager;
	import mx.rpc.events.ResultEvent;

	public function OnTestConexaoOk(event:ResultEvent):void
	{
		Alert.show(event.result.toString());
	}

	public function GetAll():void
	{
		RemotePessoas.GetAll();
	}

	protected function OnGetAll(event:ResultEvent):void
	{
		dg.dataProvider = event.result;
	}

]]>
</fx:Script>

O método GetAll() irá chamar o método GetAll() do php, que está descrito a seguir:

<?php
include("base.php");

class Pessoas extends Base
{
	function __construct()
	{
		parent::__construct();
	}

	function TesteConexao()
	{
		return "OK";
	}

	function Inserir($nome,$email)
	{
		$data = array('nome'=>$nome,'email'=>$email);
		$this->db->insert('pessoas',$data);
		return $this->db->lastInsertId();
	}

	function GetAll()
	{
		return $this->db->fetchAll("select * from pessoas");
	}

}

O método GetAll() do PHP usa a instância de db para realizar um select, através do método fetchAll. O resultado de fetchAll é retornado pelo php e o método OnGetAll no flex é executado, onde setamos o dataprovider do DataGrid. Para finalizar, precisamos criar um botão que irá atualizar o dataGrid. Isso é facilmente feito pelo código a seguir:

<s:Button label="Atualizar" top="10" left="150">
 <s:click>
  <![CDATA[
  GetAll();
  ]]>
 </s:click>
</s:Button>