Essa semana estou no desafio de construir uma app mobile usando Flex.

Algo bem simples até então, já que estou usando uma versão da prerelease do Flash Builder 4.5 for PHP.

O mais legal é simplicidade de conectar ao servidor, utilizando as mesmas classes de serviço do Zend usadas na app existente rodando hoje na web (Flex + PHP usando Zend Framework).

Muita gente já me adianta falando: “Vai funcionar só no Android né, já que o iPhone e iPad não tem Flash!”.

Maior engano destes ou de você que já pensou o mesmo.

Agora podemos compilar um arquivo APK para plataforma Android e um arquivo IPA para plataforma iOS. Fora as duas grandes plataformas ainda posso gerar para o BlackBerry PlayBook.

Assistam e confiram abaixo a breve experiência:

Pessoal,

no livro Dominando Flex e Zend existe um capítulo abordando a criação de uma app com acesso ao Twitter, que chamamos de FlexTwitter. Esta aplicação, quando foi criada em 2009, usava o próprio Zend Framework para se conectar no Twitter e realizar operações tais como obter seguidores, enviar mensagens, entre outros.

No final de 2010, a api do twitter mudou completamente a forma como o login é realizado. Veja as diferenças:

Antes:

• Usamos o Zend_Service_Twitter, repassando usuário e senha
• A API do twitter verifica login e senha, e retorna as informações do usuário
• A partir daí, começamos a usar o serviço

Agora:

• O usuário precisa registrar uma aplicação em dev.twitter.com
• Neste registro, o usuário precisa fornecer um “callback url”.
• Com a app registrada, ele obtém a chaves de acesso, como o consumer_secret e o consumer_key
• Através destes parâmetros, temos que instanciar o Zend_Oauth_Consumer e chamar um método chamado redirect, que irá redirecionar a página atual para o login do Twitter.
• O usuário loga no twitter e, ao clicar em “Allow”, o twitter retorna para a página de “callback url”
• A partir deste momento, pode-se utilizar ou outros métodos do Zend Framework.

Um dos maiores problemas nesta nova implementação é o redirecionamento da página, ou seja, como estamos utilizando AMF para comunicação entre flex e php, o redirecionamento vai falhar. O que temos que fazer é, de dentro da aplicação, abrir uma nova janela e proceder com o processo de login.

Outro problema encontrado é o callback url. Pelo que eu vi no google, existem problemas ao criar uma callback “http://localhost/flextwitter/callback.php”, pois o twitter não aceita um “localhost” como url. Resumindo, o que era simples e perfeito para o livro, ficou complicado de mais para se usar.

Desta forma, eu gostaria de propor uma discussão entre as pessoas que tenham o livro.  Vocês irão escolher entre a criação de um capítulo novo contendo esta implementação do Flex Twitter ou um capítulo novo contendo a implementação de algum sistema qualquer. Vocês escolhem!

Somente as pessoas que tenham o livro terão os comentários aprovados.

?

?

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?

Sim! Finalmente saiu o tão esperado portfólio. Prometi para mim mesmo ano passado em criar uma página toda elegante com alguns prints dos projetos que já participei.

Então esta meta de 2010 não foi cumprida e como vivo criando sistemas, desta vez eu criei vergonha na cara!

Sim, 2011 será diferente! Serei uma pessoa de mais atitude! Isso não significa que não tinha antes, mas em 2011 a minha atitude será maior.
Posso dizer que esta foi a primeira das demais metas profissionais a ser cumprida em 2011. Além disso, digo a vocês caros leitores, que estou sim e muito contente com esta conquista. Pode parecer pouco, mas devemos sim comemorar a cada meta cumprida. Isso me dá mais energia para cumprir as demais.

Este post serve como espelho para minhas futuras conquistas e para todos vocês que também tem sua meta num pedaço de papel ou em qualquer software enxuto. Bora tirar ela do papel e seguir em frente!
Para acessar o meu Portfólio, clique no menu acima ou acesse o link abaixo:

http://blog.josecarlosfiel.com.br/portfolio

Grande abraço e até a próxima.

Inicialmente um ótimo 2011 para todos! Esse ano promete!

Ajude a criar o livro Dominando Flex Mobile. Assim como foi feito em Dominando Adobe Flex 4 e Dominando Flex e Java, estamos convocando todos os interessados no desenvolvimento Mobile a comentar sobre quais tópicos devem ser abordados, de forma a criar uma obra com mais qualidade, voltada aos interesses dos leitores.

Após o desenvolvimento de 5 livros em 2010, percebemos que os leitores pedem exemplos práticos relacionado ao tema, e no livro Flex Mobile iremos criar uma aplicação completa para restaurantes, envolvendo as tecnologias nas mais diversas áreas (cliente, garçom, caixa, cozinha,gerente). Será uma aplicação completa, que lhe dará uma ótima base para criar aplicações mobile nos mais diversos níveis. O backend será com PHP e Zend Framework.

Mas antes de criar a aplicação, precisamos abordar a teoria e no desenvolvimento Mobile é muito importante saber o que fazer e o que não fazer, por questões de performance. Isto também será visto com detalhes.

Mais informações importantes:

1. Será livro impresso ou eBook? impresso
2. Data de lançamento: Assim que o Flex Hero e o Flash Builder Burrito forem oficialmente lançados – ainda está na versão rc. Todos os exemplos serão testados na versão oficial
3. Quantidade de páginas: 250
4. Preço: por volta de 58 reais
5. Haverá pré venda? Sim, siga @Daniel_Schmitz para saber quando

Agora é a sua vez! O que você quer ver no livro Dominando Flex Mobile? Deixe o seu comentário e vamos criar uma obra espetacular !!!!!

Este artigo surgiu da dúvida do leitor Henrique Felipe, que desejava usar o AdvancedDataGrid para agrupar dados entre o relacionamento Pessoas e Telefones.

Para facilitar, vou abstrair a parte da conexão com o PHP e do banco de dados, e vamos supor que ele retorne um array de dados conforme o código a seguir:

<fx:Script>
<![CDATA[

protected var dados:Object;

]]>
</fx:Script>

<s:creationComplete>
<![CDATA[
this.dados = Object([{nome:'fulano1',
	  telefones:[{numero:'001'},{numero:'002'},{numero:'003'}]},

	{nome:'fulano2',
	  telefones:[{numero:'004'},{numero:'005'},{numero:'006'}]},

	{nome:'fulano3',
	  telefones:[{numero:'007'},{numero:'008'},{numero:'009'}]}]);
]]>
</s:creationComplete>

Agora que criamos um Array de dados, podemos criar o AdvancedDataGrid e agrupá-lo por nome, veja:

<mx:AdvancedDataGrid x="38" y="37" id="adg1">
	<mx:dataProvider>
		<mx:HierarchicalData source="{dados}"
			childrenField="telefones"/>
	</mx:dataProvider>
	<mx:columns>
		<mx:AdvancedDataGridColumn
			headerText="Nome"
			dataField="nome"/>

		<mx:AdvancedDataGridColumn
			headerText="Telefone"
			dataField="numero"/>
	</mx:columns>
</mx:AdvancedDataGrid>

E o resultado é exibido na imagem a seguir:

Ok, até ai tudo bem. Agora vem a grande dica! O AdvancedDataGrid possui uma particularidade em sua forma de agrupar dados que está relacionado em como os dados estão organizados. No exemplo anterior, tinhamos um Array de pessoas e a propriedade telefones era um outro array, de telefones. Ou seja, os dados já estavam agrupados e por isso não existe a necessidade de agrupá-los novamente. Por isso não criamos o mx:Grouping conforme é visto na maioria dos exemplos. Ao invés do grouping, usamos mx:HierarchicalData  para representar os dados, pois eles já estão agrupados. É necessário apenas informar qual será a propriedade que conterá o grupo, no nosso caso telefones.

Quando os dados não estão agrupados, então temos que usar o grouping, conforme o exemplo a seguir (retirado da adobe):

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
	import mx.collections.ArrayCollection;

	[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
	Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
	Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
	Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
	Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
	Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
	]);
]]>
</mx:Script>

<mx:Panel title="AdvancedDataGrid Control Example"
	  height="75%" width="75%" layout="horizontal"
	  paddingTop="10" paddingBottom="10"
          paddingLeft="10" paddingRight="10">

<mx:AdvancedDataGrid id="myADG"
					 width="100%" height="100%"
					 initialize="gc.refresh();">
	<mx:dataProvider>
		<mx:GroupingCollection id="gc" source="{dpFlat}">
	 	 <mx:grouping>
		 	<mx:Grouping>
		 	  <mx:GroupingField name="Region"/>
			  <mx:GroupingField name="Territory"/>
			</mx:Grouping>
		  </mx:grouping>
		</mx:GroupingCollection>
	</mx:dataProvider>        

	<mx:columns>
	 <mx:AdvancedDataGridColumn dataField="Region"/>
	 <mx:AdvancedDataGridColumn dataField="Territory"/>
	 <mx:AdvancedDataGridColumn dataField="Territory_Rep"
					   headerText="Territory Rep"/>
	 <mx:AdvancedDataGridColumn dataField="Actual"/>
	 <mx:AdvancedDataGridColumn dataField="Estimate"/>
	</mx:columns>
</mx:AdvancedDataGrid>
</mx:Panel>

</mx:Application>

Neste exemplo, os dados não estão agrupos, e por isso usamos:

<mx:dataProvider>
		<mx:GroupingCollection id="gc" source="{dpFlat}">
	 	 <mx:grouping>
		 	<mx:Grouping>
		 	  <mx:GroupingField name="Region"/>
			  <mx:GroupingField name="Territory"/>
			</mx:Grouping>
		  </mx:grouping>
		</mx:GroupingCollection>
	</mx:dataProvider>

Então fica a dica: antes de preencher os dados do AdovancedDataGrid, veja qual será a forma ideal de preenchimento de dados, para
agrupar corretamente os mesmos.

E qual a melhor forma? Trazer os dados agrupados ou deixar o AdvancedDataGrid agrupá-los? Depende! Ao trazer os dados agrupados,
você ganha em performance, principalmente se forem muitos dados. Ao agrupar os dados dinamicamente, você ganha em usabilidade, pois pode
reagrupar os dados de formas diferentes, sem a necessidade de refazer uma conexão no servidor.

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.

Neste sábado (17/07) será a terceira vez que ministrarei o Mini curso On-line de Flex e Zend Framework (#minizend).

Então apresento no vídeo abaixo a aplicação demo que será desenvolvida. Além dela será criado um aplicativo AIR para cadastrar pedidos de vendas.

Pretendo também mostrar um pouco sobre Mate Framework no lado do Flex, deixando o projeto mais organizado.

Para quem não se matriculou ainda, não se preocupe, pois ainda há tempo!

Acesse www.riacycle.com/zend e garanta sua vaga.

Primeiramente, obrigado a todos que participaram da minha palestra.

Deixo aqui neste post o link para os slides: http://www.slideshare.net/josecarlosfiel/debugando-flex-e-php

Espero que vocês tenham gostado e para maiores dúvidas a respeito da palestra ou sugestões de post (screencasts), sintam-se a vontade em enviar um comentário.

Atenderei aos pedidos assim que for possível.

Mais uma vez obrigado e convido a todos ao Mini Curso On-line de Flex e Zend Framework neste próximo sábado (17/07), lembrando que quem participou da palestra e enviou o código da promoção ganhou 30% de desconto!

Grande abraço!

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