Artigos com o marcador Adobe Flex
App demo que será desenvolvida neste sábado (17/07) no #minizend
14/07/10
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.
Minizend – Aplicação Demo
29/04/10
No video abaixo apresento a aplicação de Distribuição de Fornecedores que irei desenvolver durante o mini curso online de Flex e Zend Framework (#minizend).
O curso ocorrerá neste sábado, dia 05/06. Para quem não se matriculou ainda, não se preocupe, pois ainda há tempo! Acesse www.riacycle.com/zend e garanta sua vaga.
[Fiel Cookbook] Manipulando Datas entre Flex e PHP
22/04/10
Problema
Temos um DateField no Flex e queremos enviar a data selecionada para o PHP como um objeto Date e não somente uma simples string no fomato DD/MM/YYYY. Enviando o objeto Date, teremos o benefício de ter todas as informações de Timezone, GMT e etc para serem manipuladas futuramente via backend.
Solução
Para resolvermos nosso problema, devemos utilizar o Zend Amf para serialização/deserialização de objetos entre Flex e PHP. No Flex simplesmente usaremos a propriedade selectedDate do DateField para selecionarmos o objeto Date e após enviar ao PHP via RemoteObject. O Zend Amf terá o papel de converter este objeto para Zend Date e vice versa.
Explicação Detalhada
Obs.: O ViewSource está habilitado no exemplo abaixo para quem quiser acompanhar melhor esta explicação.
1º – Capturamos o objeto Date pela propriedade selectedDate do DateField e enviamos para o PHP.
FlexPHPDate.mxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; public function getTimezone():void { remote.getTimezone(dt.selectedDate); } public function getTimestamp():void { remote.getTimestamp(dt.selectedDate); } protected function remote_resultHandler(event:ResultEvent):void { Alert.show(event.result.toString()); } ]]> </mx:Script> <mx:DateField id="dt" formatString="DD/MM/YYYY" /> <mx:Button label="Get Timezone" click="getTimezone()" enabled="{ dt.selectedDate != null }" /> <mx:Button label="Get UNIX timestamp" click="getTimestamp()" enabled="{ dt.selectedDate != null }" /> <mx:RemoteObject id="remote" destination="zend" endpoint="../gateway.php" source="DateService" result="remote_resultHandler(event)"/> </mx:Application> |
2º – Recebemos o objeto Date no PHP já convertido para Zend_Date. Isso é feito automaticamente pelo Zend_Amf.
DateService.php (está localizando dentro da pasta /services/)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php class DateService { public function getTimezone(Zend_Date $date) { return $date->getTimezone(); } public function getTimestamp(Zend_Date $date) { return $date->getTimestamp(); } } |
Exemplo da Solução: Ao selecionarmos a data e selecionando Get Timezone, mandaremos para o PHP o objeto Date e após o PHP enviará para nós um timestamp desta data atravéz do Zend_Date. Acontece o mesmo para Get UNIX Timestamp.
Baixe aqui o projeto Flex incluindo o PHP: FlexPHPDate.zip
Observações Finais
Esta prática é interessante para manipularmos o mesmo objeto Date de uma linguagem para outra, com várias informações de Timezone, GMT e etc, como citados acima.
Abraços a todos e até o próximo Fiel Cookbook.
[Fiel Cookbook] Resolvendo problema com Scroll em Apps Flex usando MacOSX
24/11/09
Problema
Você está usando o sistema operacional MacOSX e deseja que o scroll do mouse (mousewheel) funcione em suas aplicacões Flex.
Exemplo do Problema: Tente fazer a rolagem no DataGrid. Não será possível.
Solução
Use o projeto MouseWheelEnabler para resolver o problema existente. Você pode obte-lo pelo site http://code.google.com/p/flex-wmode-mousewheel-handler-example/ ou visualizar a classe no view source do exemplo logo abaixo.
Explicação Detalhada
Obs.: O ViewSource está habilitado no exemplo abaixo para quem quiser acompanhar melhor esta explicação.
Seguindo o exemplo do site oficial, apenas adicionamos no evento addToStage de sua Application a função initMouseWheel que inicializará a classe MouseWheelEnabler. Feito isso sua aplicação funcionará perfeitamente como no exemplo abaixo:
Exemplo da Solução: Adicionando a classe MouseWheelEnabler resolvemos nosso problema de scroll em aplicações Flex no sistema operacional MacOSX.
Observações Finais
Esta solução resolve nossos problemas imediatamente, claro que não podemos dizer que ela seja definitiva, sendo assim que em breve poderemos ter uma correção por parte da Adobe.
Outro detalhe que devemos considerar, é que o Mouse Mighty possui scroll horizontal, sendo que nesta classe ela não resolve o problema para este caso.
Abraços a todos e até o próximo Fiel Cookbook.
Missão cumprida! Agora sou Adobe Certified Expert Flex with AIR
16/11/09
Uma das minhas metas pessoais mais importantes do ano de 2009 era se tornar um Adobe Certified Expert Flex with AIR e finalmente consegui atingir o meu objetivo tão esperado.
Nesta última sexta-feira 13, isso mesmo sexta-feira 13, dia que muitos consideram “o dia do azar” ou outras supertições, fui lá e mostrei que é possivel sim obter um resultado positivo em dias superticiosos como este. Antes mesmo não estava tão confiante pois não tinha estudado o suficiente em uma prova que exige conhecimento de ambas plataformas Flex e AIR. Finalmente com apoio de algumas pessoas consegui ir confiante e fazer uma prova que no instante pensei que fosse complexa e complicada, mas vi que a minha experiência de 1 ano trabalhando no dia a dia com Adobe Flex me ajudou muito a resolver diversas questões.
Emocionante é terminar a prova e ver o “Congratulations”. Passei na prova com 74%, aonde o exigido mínimo para passar é 67%. A questões que mais me pegaram foram as de AIR, pois ainda não trabalho 100% nesta plataforma.
Os materiais de estudo que utilizei para o exame foram os seguintes:
- Livro: Flex 3 Cookbook
- Attest (Software que simula a certificação)
- Adobe Flex Video Training
- Adobe Flex Learn Path
Sabendo que não tive muito tempo para me dedicar nos estudos e contei muito com a experiência que eu tenho com a ferramenta.
Mais uma vez agradeço as pessoas que me apoiaram, e agora aqueles que almejam o mesmo objetivo deixo meu recado: Estudem bastante e explorem bem as ferramentas Flex e AIR, só assim vocês conseguiram passar numa prova que é bem direta no assunto e nada de pegadinhas para poder desafiar o seu conhecimento.
Abraços pessoal e até a próxima.
ZamfBrowser – O browser do Zend Amf
13/11/09
Olá pessoal. Para aqueles que acompanham meu blog, deve ter visto que eu sumi por um bom tempo, mas estou de volta e com novidades.
Primeiro o motivo de estar desaparecido pelo blog, é que estava estudando para a certificação Adobe Flex/AIR e consegui passar na prova hoje. Isso hoje, em plena sexta-feira 13.
A outra novidade trago no assunto do post mesmo, que é a melhor novidade para os PHPzeiros de plantão. O ZamfBrowser (Figura 1).
Figura 1: ZamfBrowser – O primeiro browser para Zend Amf desenvolvido em AIR.
Ele é o primeiro browser para o Zend Amf, como todos perguntavam, por que o Zend Amf não possuia ainda um browser e muitos desistiam dele por que não tinha este recurso e voltava para o AMFPHP, já sem manutenção a um bom tempo.
Vocês podem ver mais sobre o ZamfBrowser no site oficial: http://www.zamfbrowser.org/
Ainda não vou comentar sobre ele, até mesmo porque ainda não testei. Assim que testá-lo estarei trazendo notícias dele aqui e no twitter. Fique ligado!
Espero que seja útil para todos da turma do Zend Amf e aqueles que desejam finalmente migrar para ele.
Abraços e até a próxima.
[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.
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
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.