Fiel Cookbook
[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.
[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.
