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.

A Alta Comunicazione está abrindo novas vagas para o setor de web, abaixo segue um descritivo do perfil desejado separado por áreas.
Se você tem facilidade em trabalhar em equipe, gosta de um bom desafio e procura uma vaga de trabalho entre em contato conosco:

Enviar CV para: trabalhecomagente@altacomunicazione.com.br
Assunto: DIGITAL
www.altacomunicazione.com.br

Perfil WebDesigner

-Ferramentas de trabalho
*Dreamweaver CS5.5
*Photoshop Cs5
*Illustrator CS5
*Fireworks Cs5

-Habilidades necessárias
*Conhecimento sobre XHTML e CSS
*Conhecimento sobre Jquery
*Conhecimento sobre JavaScript
*Sólidos Conhecimentos sobre Adptação de layouts (PSD) para XHTML

-Diferenciais
*habilidade para desenvolver layouts
*HTML5 e CSS3
—————————————————————————-

Perfil Developer PHP

-Ferramentas de trabalho
*Dreamweaver CS5.5
*Navcat
*Photoshop cs5
*Fireworks Cs5

-Habilidades necessárias
*Conhecimento sobre XHTML e CSS
*Conhecimento sobre Jquery / Javascript
*Conhecimento Intermediário sobre Linguagem SQL e Banco de dados MYSQL
*Conhecimento (ter desenvolvido algo) com Codeigniter
*Conhecimento sobre AMFPHP
*Conhecimento sobre PHP nativo
*Falicidade na integração de APIs

-Diferenciais
*HTML5 e CSS3
*Coldfusion 8 ou 9
—————————————————————————

Perfil Developer Actionscript 3.0

-Ferramentas de trabalho
*Dreamweaver CS5.5
*Flash Cs5.5
*Flash Builder 4.5 / FlashDeveloper 4.0 / FTD
*Photoshop cs5
*Fireworks Cs5

-Habilidades necessárias
*Conhecimento sobre Actionscript 3.0
*Conhecimento sobre Gaia Framework
*Conhecimento sobre adptação de layouts
*Conhecimento sobre OOP (Programação orientada a objeto)
*Falicidade na integração de APIs
*Sólidos conhecimentos sobre Motion via Timeline ou Greensock

-Diferenciais
*HTML5 e CSS3
*Coldfusion 8
*PHP (AMFPHP)
*Desenvolvimento de Apps para Android e IOS

Enviar CV para: trabalhecomagente@altacomunicazione.com.br
Assunto: DIGITAL
www.altacomunicazione.com.br

Durante o ando de 2010 diversos leitores me escreveram solicitando alguma forma de “receita de bolo” para a criação de projetos em Flex. Estavam buscando uma maneira de criar uma aplicação de forma que fosse mais correta e mais fácil, baseada em padrões de projeto e definida através de uma estrutura que facilitasse o desenvolvimento.

No início de 2011 comecei a pensar mais no assunto, pois irei implementar estas regras nos próximos livros, chegando a uma série de “regras” das quais estarei apresentando neste artigo. Inicialmente, queria dizer que eu não sou o dono da verdade, e estou longe de criar alguma regra que se não usada irá causar o seu insucesso. Estou disposto a receber críticas que sejam construtivas, com o intuito de melhorar o sistema cada vez mais, possibilitando assim que a comunidade tenha em mãos um bom documento para consulta.

PHP ou Java?

Uma das perguntas que mais recebi ao longo de 2010, por isso estarei discutindo um pouco sobre qual linguagem de servidor usar. Inicialmente você deve saber que não é a linguagem que vai fazer você ter sucesso ou não em um sistema, e sim o quanto você conhece a mesma. Por exemplo, se você conhece muito bem PHP, porque aventurar-se em Java se dá conta do recado? O mesmo vale para o Java, mas não recebi emails de nenhum programador Java querendo mudar para php… (sic.. hehe).

O que? é fato nesta “briguinha” é que, não existe melhor ou pior. Java é mais complexo que php, exige mais atenção mas traz muitos benefícios, até financeiros (sim você ganha mais). PHP é mais fácil, você cria tudo mais rápido e com isso fica mais feliz Qual você vai escolher? Escolha a que te faz mais feliz.

Zend_AMF ou AMFPHP ?

Outra dúvida muito comum entre os programadores PHP. Eu costumo selecionar um ou outro dependendo do projeto em sí. Se o seu projeto vai usar alguns recursos do Zend Framework, e são muitos, utilize o Zend_AMF. Caso contrário, use AMFPHP.? Aqui chegamos a um impasse do qual julgo ser mais importante do que a briga entre Zend e AMFPHP: você ainda pensa em criar um projeto sem o Zend Framework? Você irá criar tudo que precisa “na mão” ou vai usar componentes de terceiros? Falo isso porque se um projeto em PHP é iniciado, o uso do Zend Framework irá acelerar muito o processo do mesmo. Rotinas como enviar email, acessar a sessão do php, gerenciar usuários com ACL, persistência de dados, acesso ao twitter… são todos muito bem implementados com o Zend e o Zend Framework é mantido pela mesma empresa que mantém o PHP, então não existe biblioteca mais segura em termos de continuidade do que esta.

E quais tecnologias vamos usar nas “melhores práticas” ?

Agora que discutimos as duas perguntas mais perguntadas em 2010 vamos a esta solução que julgo, pessoalmente, ser muito boa:

No cliente:

• Adobe Flash Burrito e Flex SDK 4.5 (Basta baixar e instalar o Flash Burrito: http://labs.adobe.com/technologies/flashbuilder_burrito/).
• SWIZ Framework (http://swizframework.org/)

No servidor:

• PHP
• Zend Framework (http://www.zend.com/community/downloads)
• WAMP Server (para rodar o PHP na própria máquina – http://www.wampserver.com/en/download.php)
• Netbeans ou Eclipse PDT – Eu estou gostando mais do Netbeans, então vou usá-lo.? (http://netbeans.org/downloads/index.html? – Versão PHP)

?

Certifique-se de ter tudo instalado, para que possamos dar prosseguimento no artigo.

Estrutura de pastas e projetos

Outra dúvida comum dos usuários, é definir a estrutura de pastas do projeto. Como instalamos o WAMP Server, ele nos fornece uma pasta onde é possível ter acesso pelo nacegador, através do endereço “localhost”. Isto é, ao acessarmos http://localhost/ o WAMP Server cuida de apontar para o diretório c:wampwww (que é o que chamamos de “document root”). Para que possamos entender a estrutura do projeto, é necessário compreender uma particularidade do Flex. Diferentemente do PHP, os arquivos que estão dentro do projeto Flex não precisam ser enviados ao servidor (os arquivos mxml, as, etc). veja que o Flex compila todos os mxml/as do projeto e gera um único arquivo swf. Este arquivo sim DEVE estar no diretório web do projeto!

Vamos então criar o projeto “melhoresPraticas” da seguinte forma:

1. Crie a pasta c:wampwwwmelhoresPraticas Este é o diretório público do projeto, acessado através de http://localhost/melhoresPraticas?????????
2. Crie a pasta c:wampwwwmelhoresPraticasclasses Este é o diretório onde iremos criar as nossas classes PHP
3. Crie a pasta c:wampwwwmelhoresPraticasvos Este é o diretório onde as classes VOs serão criadas
4. Crie a pasta c:wampwwwmelhoresPraticasZend Aqui você copia/cola o Zend framework, de forma que o arquivo melhoresPraticasZendLoader.php esteja acessível
5. No Flash Builder, crie o projeto “melhoresPraticas”. Você pode deixar o DefaultLocation como está. Não clique em Finish, clique em Next, até chegar na configuração do “Compiled Flex application location”. Ou seja, aqui você irá informar para onde os aquivos compilados do flex irão ficar. Coloque o seguinte caminho: c:wampwwwmelhoresPraticasbin-debug. Não clique em Finish, clique em Next, e em Library Path, adicione a biblioteca swiz (o arquivo swc). Em “Output folder URL”, coloque: http://localhost/melhoresPraticas/bin-debug
6. Com o projeto pronto, clique no botão RUN. Deve então surgir uma página em branco no endereço: http://localhost/melhoresPraticas/bin-debug/melhoresPraticas.html
7. No Netbenas ou no eclipse, crie o projeto php apontando para c:wampwwwmelhoresPraticas

Testando a conexão

Com os projetos prontos, iremos inicialmente realizar uma simples conexão entre o Flex e o PHP. Isso é útil para que possamos começar com trabalho “pesado”. Para conectarmos o Flex no PHP, preciamos criar uma classe de conexão no Flex, que iremos chamar de ServiceBase, e um arquivo que recebe esta conexão no PHP, que chamaremos de gateway.php.

Para criar a classe ServiceBase, use o Flash Builder e acione o menu File > New > ActionScript Class e crie a classe de acordo com a imagem a seguir:

Classe ServiceBase:

package services
{
??? import mx.controls.Alert;
??? import mx.rpc.events.FaultEvent;
??? import mx.rpc.remoting.RemoteObject;
???
??? public dynamic class ServiceBase extends RemoteObject
??? {
??????? public function ServiceBase(classe:String)
??????? {
??????????? super(“zend”);
???????????
??????????? /*
???????????? * Como o arquivo swf está na pasta bin-debug,?
???????????? * precisamos subir um nível para chegarmos ao
???????????? * arquivo gateway.php
???????????? */
??????????? this.endpoint = “../gateway.php”;
???????????
??????????? this.source = classe;
??????????? this.addEventListener(FaultEvent.FAULT,OnFault);
??????? }
???????
??????? protected function OnFault(e:FaultEvent):void
??????? {
??????????? Alert.show(e.fault.faultString,”Erro” );
??????? }
??? }
}

Esta classe tem como principal objetivo estabelecer o endpoint, que é o gateway.php que ainda vamos criar. O atributo source define qual a classe que iremos acessar na pasta classes. Também adicionamos um listener genérico caso haja alguma falha na conexão. Veja que a classe é dinâmica (dynamic), ou seja, podemos chamar métodos da classe sem que eles estejam implementados na classe. Isso é útil pois os métodos chamados nesta classe serão os métodos remotos do PHP.

No servidor, temos que criar o arquivo gateway.php, com o seguinte código:

//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__).”/classes”);
set_include_path(dirname(__FILE__).”/vos”);

//TODO: Adicionar VOs

//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 fechar a tag PHP, nunca !!

?

O arquivo gateway.php é o ponto de entrada para as classes em PHP. Veja que inicialmente fazemos um include do Autoloader.php para que todas as classes do Zend Framework sejam instanciadas sem a necessidade de realizar requeires. Criamos então a instância do Zend_AMF_Server, que irá cuidar para que o flex consiga conversar com o PHP via AMF. Adicionamos o diretório classes como um diretório do AMF, onde as classes serão expostas ao flex e usamos o set_include_path para adicionar as classes que estão na pasta “vos” no path global do php, para que não precisamos fazer include das mesmas. Depois adicionaremos mais código sobre as classes VOs.

Na pasta “classes”, criamos a classe Teste, e o método sayHelloWorld. O nome do arquivo tem que ser o mesmo nome da classe, ou seja, Teste.php.

class Teste {
??? public function sayHelloWorld($name)
??? {
??????? return “Hello World $name”;
??? }
}

//Não feche a tag PHP!

?

Agora voltaremos ao Flex para que ele possa acessar a classe teste. No arquivo melhoresPraticas.mxml, adicionamos o seguinte código:

?

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″>
???
??????? ??????????? import mx.controls.Alert;
??????????? import mx.rpc.events.ResultEvent;
???????????
??????????? import org.swizframework.utils.services.ServiceHelper;
???????????
??????????? import services.ServiceBase;
??????? ]]>
???
???
???
??????? ???????????
??????????? var testeService:ServiceBase = new ServiceBase(“Teste”);
??????????? var serviceHelper:ServiceHelper = new ServiceHelper();
???????
??????? serviceHelper.executeServiceCall(
??????????? testeService.sayHelloWorld(“Daniel”),
??????????? function(e:ResultEvent):void{
??????????????? Alert.show(e.result.toString());
??????????? });
???????
??????? ]]>
???
???

?

Como estamos realizando um teste, fazemos o acesso ao PHP no evento creationComplete da aplicação. Criamos a variável testeService que é do tipo ServiceBase, repassando o parâmetro que é o nome da classe no PHP, ou seja, “Teste”. Também criamos a variável serviceHelper que pertence ao Swiz e é um facilitador de acessos ao PHP. Usamos no serviceHelper? o método executeServiceCall, que irá chamar remotamente o método sayHelloWorld repassando o parâmetro “Daniel” e quando concluído, executará a função que está no segundo parâmetro, realizando um Alert.

Ao executar esta aplicação, quando é carregada surgirá a mensagem de retorno do PHP:

?

Criando as classes em Service

Com o teste de conexão realizado, podemos avançar mais no código! A primeira refatoração que faremos é em relação as classes que estão na pasta service. Até agora criamos o seguinte código:

??? var testeService:ServiceBase = new ServiceBase(“Teste”);

Ao invés de criar a instância de ServiceBase repassando uma string que é o nome da classe, iremos criar a classe TesteService, da seguinte forma:

package services
{
??? public dynamic class TesteService extends ServiceBase
??? {
??????? public function TesteService()
??????? {
??????????? super(“Teste”);
??????? }
??? }
}

Veja que, ao criarmos a classe TesteService, podemos alterar o código da aplicação principal da seguinte forma:

var testeService:TesteService = new TesteService();

Implementando o SWIZ

Um dos melhores benefícios que o SWIZ traz é a possibilidade de separar todo o código Flex em camadas, assim como é feito no padrão MVC. Se você ainda não conhece SWIZ, é melhor conhecer, pois se está lendo este artigo está procurando criar aplicações com uma qualidade melhor e não há como chegar a esse nível sem um framework. O Swiz é o o melhor em termos de custo/benefício, porque nao é o mais fácil de aprender nem o mais complicado, e nao é o mais simples e nem o mais completo. É o meio termo em tudo.

Para usarmos o SWIZ, preciamos estabelecer algumas pastas dentro do projeto Flex, que serão nossas camadas. São elas:

• config: contém os arquivos que chamamos de “bean”, que são os arquivos que fornecem informações para serem injetadas em outras classes
• controllers: contém os arquivos que “ditam” a dinamica da camada de visualização
• services: contém os arquivos que fazem o acesso ao PHP
• events: contém eventos que podem ser disparados e mediados pelo flex
• valueObjects: são os VOs que iremos usar na aplicação
• views: contém os formúlários, é a camada de visão

Na pasta config, iremos criar o arquivo Bean.mxml, com o seguinte código:

??? xmlns:fx=”http://ns.adobe.com/mxml/2009″
??? xmlns:s=”library://ns.adobe.com/flex/spark”
??? xmlns:swiz=”http://swiz.swizframework.org”
??? xmlns:services=”services.*”
??? >
???
???
???

?

Neste bean, criamos a variável “testeService”, que é o tipo TesteService. Atenção quando ao uso de letras maiúsculas e minúsculas.? Sempre voltaremos no Bean.mxml para adicionar mais variáveis e com isso, injetá-las nos formulários e controllers da aplicação. Precisamos ainda configurar o Swiz no projeto principal da aplicação (melhoresPraticas.mxml):

http://ns.adobe.com/mxml/2009″
?????????????? xmlns:s=”library://ns.adobe.com/flex/spark”
?????????????? xmlns:mx=”library://ns.adobe.com/flex/mx”
?????????????? xmlns:swiz=”http://swiz.swizframework.org”
?????????????? minWidth=”955″ minHeight=”600″ xmlns:config=”config.*”>
???
???
???????
???????????
???????????????
???????????
???????????
???????????
??????????????? ??????????????????? eventPackages=”events.*”
??????????????????? viewPackages=”views.*”
??????????????????? />
???????????
???????????
???????????
???????????????
???????????
???????????
???????
???

???

?

Esta configuração, adicionada dentro do fx:Declarations, realiza uma configuração padrão no SWIZ. Basicamente adicionamos o Bean que criamos e definimos onde as classes relacionadas a eventos e formulários ficarão. Também definimos um LOG que será apresentado na aba Console do Flex se estiver rodando em modo de Debug.

Após a configuração

Podemos por exemplo criar a tela de login, e outras telas do sistema. Deixarei o código fonte da aplicação para que você possa olhar com calma.

Pegue o código fonte aqui

Conclusão

A lista a seguir é um resumo de melhores práticas que julgo importantes

• Use módulos/sub applications somente se precisar mesmo. Não comece um projeto de 10 telas querendo usar módulos para cada tela.
• Separe sua aplicação em camadas. Você escreve mais e cria mais artigos, mas o projeto fica mais consistente.
• Você não precisa criar o arquivo services-config.xml para conectar sua app no servidor. Pode-se criar uma classe cujo o endpoint é um caminho RELATIVO ao gateway.
• Use o caminho RELATIVO sempre, para faclitar o deploy da sua app. Isto é, use “../gateway.php” ao invés de “http://localhost/gateway.php”.
• Injete o controller na view, para passar dados à ela. Se deseja enviar mensagens para a view, então use eventos
• Não injete a view no controller.
• Use o dispatcher do SWIZ.
• Use o serviceHelper do SWIZ.
• Quando criar um formulário na view, faça o databind com uma variável do controller.
• Use eventos com moderação. Particularmente eu uso os eventos para notificar a view de alguma mudança, nunca para passar dados, que é função do controller.
• Se você quer chamar um método da view pelo controller, use eventos.
• Mais?

Seguindo o artigo anterior, iremos agora utilizar o Flex em conjunto com o PHP para salvar as imagens no servidor. A conexão entre o Flex e o PHP será realizada pelo AMFPHP.

Este artigo teve uma grande ajuda do Bruno Santana, que nos mandou o código sobre a gravação do arquivo pela webcam.

Pré requisitos

• Wamp Server instalado
• Biblioteca AMFPHP – http://www.amfphp.org/ 

Passos iniciais

• Cria a pasta c:wampwwwFlexFoto
• Crie o projeto FlexFoto. Atenção na parte de definição do Output Folder:

e

• Copie a pasta amfphp do zip para c:wampwwwFlexFoto
• O esquema de pastas fica como na figura a seguir:

Agora vamos configurar o services-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="amf-service"
            class="flex.messaging.services.RemotingService"
            messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amf">
                <channels>
                    <channel ref="amf-endpoint"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="amf-endpoint"
            class="mx.messaging.channels.AMFChannel">
            <endpoint uri="amfphp/gateway.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

E configuramos o services-config.xml nas propriedades do projeto Flex:

Agora vamos fazer um teste de conexão. Crie a seguinte classe: HelloWorld.php em www/FlexFoto/amfphp/services

<?php
class HelloWorld
{
  function Say()
  {
    return "Hello World from amfphp";
  }
}

E no Flex, adicione 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>
	<s:RemoteObject id="HelloWorld"
	                   destination="amf" source="HelloWorld">
		<s:method name="Say" result="OnSayResult(event)"/>
	</s:RemoteObject>
</fx:Declarations>

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

		protected function OnSayResult(e:ResultEvent):void
		{
			mx.controls.Alert.show(e.result.toString());
		}
	]]>
</fx:Script>

<s:Button label="Hello World">
	<s:click>
		<![CDATA[
		HelloWorld.Say();
		]]>
	</s:click>
</s:Button>

</s:Application>

Teste a aplicação. Veja inicialmente se a aplicação abre com o endereço "localhost" e não "c:….". Clique no botão e verifique se a mensagem "Hello World from AMFPHP" surgir. Se for algum erro, você precisa investigar o erro através da mensagem de erro padrão do log de erros do wamp (c:wamplogsapache_error.php). Se não achou nada, use o Firefox+Firebug+Flashbug ou então use o Charles Proxy(http://www.charlesproxy.com/)

Configurando a WebCam

Esta parte é tranquila, já que vimos isso no artigo anterior. Apague o “hello world” do teste de conexão e faça:

<?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>
		<s:RemoteObject id="Foto"
		               destination="amf" source="Foto">

		</s:RemoteObject>
	</fx:Declarations>

	<mx:VideoDisplay id="webcam"
				 	 width="160" height="120"
					 top="100"
					 left="100"
					 >
		<mx:creationComplete>
			<![CDATA[
				webcam.attachCamera(Camera.getCamera());
			]]>
		</mx:creationComplete>

	</mx:VideoDisplay>

	<s:Button label="Salvar!!" top="50" left="150">

	</s:Button>

</s:Application>

Salvando a imagem no servidor

Até aqui apenas exibimos a câmera e o botão salvar. Vamos agora dar a funcionalidade necessária para enviar a imagem da WebCam para o servidor. Crie o arquivo Foto.php na pasta services, com o seguinte conteúdo:

<?php
class Foto
{
 function __construct()
 {

 }

 function Save($fotoAsString)
 {
	//obtém um id unico para o arquivo
	$nomeArquivo = uniqid();

	//configura o nome do arquivo
	$nomeImagem = "imagem/{$nomeArquivo}.jpg";

	//abre o arquivo. A opção w vai criá-lo, caso nao exista
	$arquivo = fopen($nomeImagem, 'w');

	//escreve no arquivo
	fwrite($arquivo, base64_decode($fotoAsString));

	return "ok";

 }
}

Aqui, criamos no método Save uma rotina para salvar a imagem no disco. Isso é feito graças a transformação da foto em string e na sua volta, pelo método base64_decode.

Exibindo as imagens gravadas no Flex

Assim que a foto é gravada, a reqisição feita pelo Flex volta, com um "ok". Então podemos usar outra rotina para ler todas as imagens e apresentá-las no flex:

<s:List
	id="exibirImagens"
	top="10"
	left="150"
	right="10"
	bottom="10"
	width="530"
	height="400"
	>
	<s:layout>
		<s:TileLayout
			requestedColumnCount="5"
			requestedRowCount="8"
			horizontalGap="2"
			verticalGap="2"/>
	</s:layout>
	<s:itemRenderer>
		<fx:Component>
			<mx:Image source="{data}" />
		</fx:Component>
	</s:itemRenderer>
</s:List>

No código acima, criamos uma lista do tipo tile, cujo o itemrenderer é um componente do tipo image.

Para preencher esta lista, usamos o seguinte código:

protected function OnGetAll(event:ResultEvent):void
{
	exibirImagens.dataProvider = new ArrayList((event.result as Array));
}

Ou seja, sempre que chamamos o método GetAll, o php se encarrega de obter uma lista de imagens e retorná-la para o Flex. Com esta lista preenchemos o dataProvider da lista de imagens que possui o itemRenderer.

Para finalizar, o codigo php do método GetAll():

function GetAll()
{
	//http://snipplr.com/view/742/read-images-of-directory/
	$folder = opendir("imagem");
	$pic_types = array("jpg");
	$index = array();

	while ($file = readdir ($folder)) {
		if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
		{
			array_push($index,"amfphp/services/imagem/$file");
		}
	}
	closedir($folder);	

	return $index;
}

O código php lê o diretório e retorna uma array com o caminho completo da imagem.

O resultado final é visto na tela abaixo:

Código fonte

Hoje não trago nenhuma linha de código a vocês, mas sim um assunto interessante para entender como funciona o Flash Remoting na teoria.

O que é Flash Remoting?

Quando você está usando XML para enviar dados para sua aplicação cliente, muitos dos dados que você está transferindo não é absolutamente necessário. Pense em todos os caracteres extras que estão em um documento XML. Pense em quantas vezes você tem que enviar os atributos e nós, bem como ambas as tags início e tags de fim. XML é um formato grande, mas há uma grande sobrecarga no processamento desde documento.

Action Message Format

Action Message Format (AMF) funciona através de HTTP, como o XML, mas em vez de enviar diversas informações extras, o AMF envia as informações essenciais retirando estes caracteres desnecessários, ou seja é serializado dentro de um formato binário que usa bem menos banda e espaço do que um mesmo dado enviado com XML.

Isso torna útil quando você envia muitos dados. Em vez de enviar várias tags redundantes em XML, você está enviando pequenos registros AMF serializados.

Outro benefício do AMF é, que este é um tipo de dados nativo do Flash Player. Com isso o Flash Player não tem que fazer um “parse” dos resultados para obter as informações. Eles estão disponíveis no Flash Player como objetos nativos do ActionScript logo que é recebido através do servidor.

Flash Remoting usa AMF para expor objetos e web services em um servidor de aplicação, como se fossem objetos ActionScript locais. O único problema é que para usar AMF você tem que trabalhar com objetos no PHP. O gateway AMF ajuda a traduzir esses objetos PHP em objetos ActionScript no Flash Player. Com isso, você pode criar seus próprios objetos tipados no PHP e manter uma cópia destes objetos tipados no ActionScript.

Flash Remoting e o Zend Framework

Você já deve saber que recentemente a Adobe fez uma parceria com a Zend para fornecer suporte para o Flash Remoting com AMF no Zend Framework. Existem outros projetos como este, incluindo o AMFPHP para outros frameworks PHP, mas Zend AMF tem constante suporte para Flash Remoting. O Zend Framework é um robusto framework para PHP que pode ser usado para projetos muitos complexos. Para alguns desenvolvedores PHP qual apenas quer conectar PHP com Flex pode ser um caminhão de pedra para matar uma mosca. Você não precisa usar todo o Zend Framework, ou alterar a estrutura do seu projeto para usar o Zend AMF. Zend AMF baseia-se em um pequeno, mas poderoso, pacote que pode ser facilmente integrado a qualquer projeto PHP.

–

Por hoje é isso! O artigo original vocês podem acessar aqui. Espero que tenham gostado e sinta-se a vontade de deixar sugestões ou críticas.

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

Muitas pessoas tem a mesma dúvida: Zend_AMF ou AMFPHP? A resposta vem como uma receita de bolo. Você pode usá-la ou não…… Use o Zend_AMF se e somente se for usar as outras bibliotecas do Zend, tais como Zend_Db, Zend_Log, … Continue reading →