[Fiel Cookbook] Previnindo que DataGrids aceitam itens de outros DataGrids
01/10/09
Problema
Você quer classificar itens (arrastando-os para cima e para baixo) de um DataGrid e evitar que outros componentes baseados na classe ListBase (DataGrid, List, Tree, etc.) aceitem estes itens.
Exemplo do Problema: Arraste um item do DataGrid do painel Itens para o DataGrid do painel Categorias. Terá um efeito de mover itens de um DataGrid para outro, algo que não queremos que aconteça.
Solução
Criar um componente DataGrid personalizado, setando as propriedades dragEnable, dropEnable e dragMoveEnable como TRUE e sobrescrever os métodos addDragData, dragEnterHandler, dragOverHandler, dragExitHandler, dragDropHandler da classe ListBase, para definir nosso próprio formato de dados que é definido pela classe DragSource.
Explicação Detalhada
Obs.: O ViewSource está habilitado no exemplo abaixo para quem quiser acompanhar melhor esta explicação.
Por padrão todos os componentes baseados na classe ListBase tem implementado um Drag and Drop. É definido também pela classe DragSource o formato de dados chamado “items”. Isso é uma espécie de controle de dados que estão sendo arrastados, ou seja, se o componente alvo esperado não possuir este formato, não será possível fazer um Drop destes dados. A ListBase trata o formato dos dados arrastados via drag and drop como “items”, então todos os componentes baseados nesta classe terão este formato.
Para alteramos isso, vamos sobrescrever os métodos addDragData, dragEnterHandler, dragOverHandler, dragExitHandler, dragDropHandler que contém uma validação dizendo se tem o formato como “items” para aceitar o Drop no componente alvo.
Criando um novo componente DataGrid personalizado, entre na classe ListBase e simplesmente copie os métodos acima para mantermos as mesmas funcionalidades. Não esqueça de importar as classes necessárias e o namespace mx_internal requerido para algumas variáveis que contém dentro dos métodos que estamos sobrescrevendo.
Feito isso vamos criar uma propriedade privada para este componente personalizado chamado format do tipo String e com valor de “items”. Em seguida criaremos um getter e setter para a propriedade recém criada. Agora substitui todas as strings “items” dentro dos métodos que copiamos da classe ListBase pelo método getter format, esse que será dinâmico quando utilizarmos nosso componente e poder definir o formato de dados a serem arrastados por cada componente instanciado.
Por último vamos definir no componente personalizado as propriedades dragEnable, dropEnable, dragMoveEnable como TRUE, para ativamos o drag and drop do nosso componente DataGrid e podermos mover os itens que queremos classificar.
Então em nossa aplicação incluimos nossos DataGrids personalizados e podemos setar a propriedade format com qualquer valor para referenciar aquele fomato para aquela instancia de DataGrid, ou seja, qualquer outro componente baseado no ListBase não poderá colocar seus itens dentro do seu DataGrid. Vejamos aplicação final com o viewSource habilitado:
Exemplo da Solução: Nosso DataGrid contendo os Itens agora possui um format chamado “dgItens” e o DataGrid contendo as categorias agora possui um format chamado “dgCategoria”, sendo que não pode ser aceito em outros componentes baseados no ListBase com format “items”, apenas em componentes que possuirão seus formatos definidos. Assim temos a solução final que é classificar os itens, arrastandos para cima e para baixo dentro do seu DataGrid sem que o item arrastado seja aceito por outros componentes.
Observações Finais
Este post foi baseado num problema que tivemos que solucionar nesta manhã. Posso dizer que boa parte dessa solução devo ao curso Imersão Flex. Como pode ver procurei entender os métodos relacionados ao Drag and Drop do ListBase e usei eles próprios para customizar o meu componente e solucionar o meu problema rapidamente. Se existe outras formas mais simples não sei, podem deixar comentários aqui, mas esta solução foi a única que venho em mente no momento. Então não se limitem e sim faça sua imersão em seus componentes Flex e procure entender como eles funcionam, certamente você encontrará a sua solução.
Abraços a todos e até o próximo Fiel Cookbook.
Treinamento Imersão Adobe Flex! Eu participei!
01/08/09
Foi difícil descidir em fazer um curso online de Flex, pois em minha mente pensava que poderia ser mais um curso daqueles que você simplesmente poderia pegar um livro e estudar, mas depois de pensar muito e ver que o conteúdo era interessante e o instrutor não era qualquer um e sim se tratava do Beck Novaes e sua ampla experiência e mais a parceria da E-Genial, resolvi me matricular no treinamento de Imersão Adobe Flex.
Algumas semanas depois vi a surpresa e que realmente valia fazer aquele treinamento, um grande video de apresentação #http://blip.tv/file/2303081 do que seria e o que ia ser desenvolvido durante as aulas. Até pensei na hora: “Bah! Ainda bem que me matriculei a tempo!” rsrs.
O resultado foi um SUCESSO GERAL!!!
Gostei do ambiente da E-Genial, das aulas, das músicas rsrs (Thumder Cats Wowwww!!!) e pode ter certeza que aproveitei cada minuto deste curso. Realmente o melhor treinamento que já fiz até agora.
Antes deste curso posso considerar que não era um programador Flex, mas depois dele me considero um programador Flex apto a construir grandes aplicações RIAs que faça o usuário sorrir na frente dela.
Para conferir o resultado final e o fechamento com chave de ouro do curso segue abaixo o grande vídeo do Imersão Flex.
Obs.: Assista em tela cheia para melhor experiência.
Valeu equipe da E-Genial e Beck Novaes, estão de parabéns!
Palestra Flex + PHP usando Zend Amf (Flex Mania)
09/07/09
Olá pessoal! Já está disponível a gravação da minha palestra sobre Flex + PHP usando Zend Amf no grande evento da Flex Mania. Peço desculpas pelo nervosismo, mas esta foi minha primeira palestra e tentei focar no objetivo que era integrar o Flex e PHP com o Zend Amf.
Os slides e o app de exemplo segue abaixo para download.
Agradeço a todos que me apoiaram e ao Igor Costa que me deu esta oportunidade para participar de um grande evento como foi o Flex Mania.
Acesse minha palestra aqui: http://tinyurl.com/lnphvc
Slides: http://tinyurl.com/m52dh6
App: http://tinyurl.com/m5xbrx
Também não percam as outras palestras do Flex Mania… é imperdível!!! Acesse e Assista: www.flexmania.com.br
Maior atualização do Zend Amf (1.8.4 release)
01/07/09
É bom estar de olho nas atualizações do Zend Framework, que sempre corrige bugs ou adiciona uma nova funcionalidade ou plugin para uso. Desde então é a maior atualização do componente Zend Amf desde o seu lançamento.
Atualmente o Zend Framework na versão 1.8.4 recebeu muitas alterações no componente Zend Amf que vale a pena ficar atento e testar novas funcionalidades ou verificar as correções efetuadas. Veja abaixo as alterações:
Maiores Alterações
ZF-6641 Shared references are duplicated
ZF-6205 Serializer does not support cyclic references
ZF-6393 Wrong Amf0_Amf3 reference counting
ZF-5382 Multiple calls seems to break the deserializer.
ZF-6625 Zend Amf can load any instantiated PHP class. Security
Menores alterações, mas significantes
ZF-6975 Adobe Flash Builder 4 wizard now supports data types for introspection.
ZF-6992 Negative integers on 64 bit system is resolved.
ZF-6775 Unable to send Array’s from Blaze DS.
Ainda foi detectado um bug nesta nova versão 1.8.4. Quando usado o método addDirectory() a classe a ser chamada pára de carregar. Isso já foi resolvido, mas será lançado amanhã dia 2 de julho a correção. Veja abaixo a solução para este problema:
Substitua o Zend/Loader/PluginLoader.php pela nova versão localizada em
http://framework.zend.com/svn/framework/standard/branches/release-1.8/library/Zend/Loader/PluginLoader.php
======== Atualização 7 de Julho ========
Liberada a versão que resolve o problema do método addDirectory:
http://devzone.zend.com/article/4808-Zend-Framework-1.8.4pl1-Now-Available
Fontes:
http://wadearnold.com/blog/flash/amfphp/major-zend-amf-updates-for-184-release
http://wadearnold.com/blog/flash/zf-184-breaks-adddirectory
Compreendendo a Arquitetura de uma Rich Internet Application
14/06/09
Se você está usando Flex, Ajax, Silverlight, JavaFx, ou outras tecnologias de RIA, a arquitetura básica vai ser muito semelhante… Na maioria dos casos você normalmente terá uma aplicação cliente osiosa e uma camada de serviços distintos no backend. É importante entender essa diferenciação e para compreender que este desempenha um papel importantíssimo na forma como você projeta e constroi suas aplicações.
RIA se presta mais ao desenvolvimento de cliente-servidor, do que o tradicional desenvolvimento web onde o estado é mantido no servidor em uma aplicação ou sessão. O cliente deste modo sabe de si mesmo, e tipos de dados que está solicitando. Será solicitado apenas os dados que precisa do servidor e nada mais. Isto leva frequentemente a uma camada de serviços mais limpa e menos complicado a requisição do servidor, ainda, em alguns casos, uma redução global de carga no servidor.
É também importante compreender a sub-arquiteturas dentro da arquitetura global da aplicação. Na imagem acima, você tem a comunicação do cliente com o servidor através de camada de serviços. Se você estiver usando AMF, XML sobre HTTP, JSON, ou SOAP, não faz nenhuma diferença neste assunto. Há prós e contras de cada uma dessas citadas e que pode ser discutido no futuro, mas agora estou focado na própria arquitetura. Cada componente da arquitetura, tem uma maior dimensão da sua própria arquitetura. Você pode ouvir pessoas discutindo o uso do MVC em suas aplicações, mas a interpletação do MVC depende de quem está fazendo e essa pessoa explicar de que forma está usando o padrão.
Model-View-Controller (MVC) é um padrão de arquitetura de software onde uma aplicação é quebrada dentro de camadas separadas para um modelo de dados, a interface do usuário (visão), e a lógica do negócio. A lógica, modelo e visões são desacopladas, e comunicam através de um controlador intermediario. Esse padrão permite completamente ambas abstração da lógica e reuso do código/componentes da aplicação. Você pode ler mais sobre MVC aqui.
Num desenvolvimento web tradicional, houve basicamente um MVC singular. Onde as páginas solicitadas fosse manipuladas por um controlador, qual delega como uma página é processada e como os dados são inseridos dentro da visão (ou como dados são recuperados dentro do modelo).
No mundo da RIA, você realmente tem duas camadas de MVC. Existe um MVC dentro da própria aplicação cliente, e um MVC no backend também. Nem todas as aplicações utiliza um MVC formal ou um super framework para manipular o cliente e serviços, mas cada lado tem pelo menos um tipo de funcionalidade do MVC.
O MVC no cliente gerencia a interação entre o usuário e sua interface. Você invoca comandos, atualizações das visões, carrega os dados e etc… O MVC cliente mantém o estado da aplicação, manipula todas as requisições de dados do servidor e controla como os dados são apresentados na visão.
O MVC no servidor manipula as requisições através do cliente. A camada de serviços do MVC, processa as requisições de uma aplicação cliente e delega ações para o servidor. Isto pode significar o salvamento dos dados em um banco de dados, atualizando o sistema de arquivos, algum tipo de tratamento analítico, ou retornando dados para o servidor. A grande diferença aqui é que não existe qualquer interface do usuário. Em vez da interface do usuário, o ponto de vista seria o formato dos dados que está sendo devolvido a aplicação cliente. Neste caso o ponto de vista poderia determinar o formato do resultado (JSON, XML, etc…). Outro benefício de uma camada de serviço diferenciada, é que você já pode ter a infra-estrutura construída para criar uma API pública em cima de suas lógicas de serviços, se você tiver a necessidade (ou vontade) para manter uma.
Não já escolha definitiva da tecnologia para RIA. Você pode fazer muitas coisas legais com muitas tecnologias diferentes. Backends podem ser escritos em Java, ColdFusion, PHP, Rails, .NET, etc… No lado cliente, são estabelecidos frameworks MVC para Flex/Actionscript e Ajax, alguns emergentes, para o Silverlight, e adaptando para frameworks Java para JavaFX. A determinação de ambos, back-end e front-end, deve ser determinada pelas necessidades e capacidades de sua aplicação e também de sua infra-estrutura existente.
Post original de Andrew Trice. Veja aqui.
Sim! Flash Builder 4 + Flash Catalyst
01/06/09
Segunda-feira, 1º de junho e não 1º de abril hehe, finalmente saiu o tal do Flash Builder, que era dúvida até algumas semanas atrás e junto com ele também está disponível para download o Flash Catalyst.
Ambos na versão Beta, podem ser baixados pelo site da Adobe Labs (http://labs.adobe.com/).
O Flex Builder foi renomeado para Flash Builder na versão 4, para distinguir entre a IDE que é paga e o framework Flex que é open-source.
O Flash Catalyst como muitos já devem ter ouvido falar, é uma ferramenta para integrar os trabalhos de um Designer de Interação ao Desenvolvedor, ou seja, os prototipos feitos no Adobe Photoshop/Adobe Fireworks/Adobe Flash/Adobe Illustrator podem ser exportados para o Flash Builder 4 e gerar todo o código para que o desenvolvedor prossiga o trabalho que o Designer fez sem perder nenhum recurso criado por ele.
Bom pessoal são 2 ferramentas poderosas e agora basta aproveitar a oportunidade e dar um feedback para Adobe, para que ela continue sempre facilitando nossas vidas.
Abraços e boa semana a todos.
Resta dúvida ainda para que usar Flex?
28/05/09
Olá galera, tudo bem? Espero que sim. Bom vim à este post dizer que estava passeando pelo AIR Developer Center e logo de cara vi um grande exemplo chamado SalesBuilder feito em AIR e resolvi entrar. Bom visualizei o vídeo e fiquei impressionado com a riqueza de recursos, obviamente a cara de uma típica aplicação RIA.
Mas não foi só ela que me deixou impressionado e sim que logo abaixo tinha disponível o código fonte para download. Realmente é o melhor exemplo que já vi, e ainda com a possibilidade de explorar o código fonte e aprender novos recursos. Então acredito que vale a pena compartilhar para quem ainda não viu.
Segue abaixo o link desse belo exemplo:
SalesBuilder Adobe AIR sample aplication
Depois de ver o exemplo ainda resta uma dúvida. Porque usar Flex hein? Hehehe
Abraços pessoal e até a próxima!
Guia de estudos Adobe Flex (Recursos Online)
25/05/09
Olá pessoal, estou aqui para mais um post e hoje compartilharei uma dica para os novos amigos que estão iniciando no Adobe Flex e tem dificuldade de encontrar materiais para estudo.
Bom claro que a primeira dica e acredito que todos sabem é efetuar uma busca no Google, antes de tudo ele poderá te salvar, mas tem um porém, que as vezes a gente quer algo que siga uma sequencia de estudos sem se perder no conteúdo novo que estamos aprendendo. Para isso resolvi fazer um guia para meus estudos e claro estou compartilhando para vocês.
Antes de trabalhar com uma nova linguagem eu gosto de entender desde a história dela até seus recursos, objetivos, vantagens e desvantagens. Para isso a Adobe tem de sobra em seu site, então tomei como base dos meus estudos Flex em cima do site oficial da Adobe.
Segue abaixo o meu Guia de Estudos:
Saiba mais sobre o produto Adobe Flex:
http://www.adobe.com/br/products/flex/?promoid=BOZRZ
Visão Geral do Flex
http://www.adobe.com/br/products/flex/overview/
1 – Benefícios do Flex 3
http://www.adobe.com/br/products/flex/features/flex3/
2 – Estrutura do Flex
http://www.adobe.com/br/products/flex/features/flex_framework/
3 – Detalhes de Atualização Flex Builder 3
http://www.adobe.com/br/products/flex/upgrade/
4 – Recursos do Flex Builder 3
http://www.adobe.com/br/products/flex/features/flex_builder/
5 – Fluxo de trabalho do designer/desenvolvedor
http://www.adobe.com/br/products/flex/workflow/
6 – Saiba mais sobre BlazeDS
http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/
Saiba mais sobre RIAs e a Plataforma da Adobe.
Vantagens, Porque usar RIAs?, Relatórios de Analistas, etc.
http://www.adobe.com/br/resources/business/rich_internet_apps/
Guia de aprendizado (Flex Learning Paths)
http://www.adobe.com/devnet/flex/learn/
Suporte do Flex
Documentação, Tutoriais, Guias de aprendizados, Artigos e etc.
http://www.adobe.com/support/flex/
Centro de desenvolvimento do Flex
Exemplos, Artigos, Guias de aprendizados, documentação e etc.
http://www.adobe.com/devnet/flex/
Bom este é o guia que criei para meus estudos Flex, destaco bastante o Guia de aprendizado (Flex Learning Paths) que contém passo a passo como você pode aprender Flex e tem desde teoria à prática, realmente recomendo.
Claro eu tomei base o conteúdo oficial da Adobe, mas você pode simplesmente procurar por blogs e muitos sites de referencia para somar aos seus estudos.
Espero que gostem do conteúdo e também aceito sugestões, sintam-se a vontade em comentar.
Abraços até mais galera.
Flash Builder? Será mesmo?!
18/05/09
Iniciando mais uma semana de maio e me deparo com a seguinte notícia na lista FlexDev, “Novo nome do Flex Builder”, será?!
Pois é não vi nada oficial vindo da Adobe, mas dizem que a notícia vem sendo comentada pelos envagelistas da Adobe e que queiram ou não o nome Flex Builder vem trazendo confusão para algumas pessoas que acham que Flex é uma nova linguagem e não lembram que é um framework aonde desenvolvemos em ActionScript 3.0 e MXML, para outros mudar o nome para Flash Builder trará a mesma repercusão pois vão pensar que estaremos desenvolvendo animações berrantes em vez de criar RIAs.
Nem vou discutir muito agora, mas até então não passa de boatos e é bom estar de olho no futuro do Flex.
Deixarei para vocês a discussão nos blogs abaixo e na própria thread da lista do FlexDev:
Integrando Flex + Zend Framework (Usando o Quickstart da Zend) – PARTE 3
18/05/09
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.
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.
Prosseguindo coloque o seu Output Folder a pasta public, aonde acessaremos diretamente nossa aplicação Flex.
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”.
Na Application ZendFrameworkQuickstart criamos um simples botão e em seguida criaremos um RemoteObject no próprio MXML.
ZendFrameworkQuickstart.mxml
1 2 3 4 5 6 7 8 9 10 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?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.