Carregado porFernando Montenegro
Driver Flash para o ISFramework
O documento descreve o Driver Framework, uma biblioteca que permite desenvolver aplicativos multiplataforma de forma independente da tecnologia subjacente, usando "drivers" que cuidam da comunicação com cada plataforma. O framework permite projetar aplicativos apenas uma vez e fazê-los rodar em qualquer tecnologia com suporte.
Driver Flash para o ISFramework
- 1. Driver Flash IntroduçãoVantagens e desvantagens Planejamento
- 2. Perguntas Existem dezenasde opções tecnológicas, e cada dia há o surgimento de novas: Como criar aplicações sem dependência da tecnologia da moda? Como padronizar o trabalho da equipe sem depender das mudanças de tecnologia? Como evitar o redesenvolvimento de aplicações e a manutenção dos códigos legados? Como criar uma única aplicação para mais de uma plataforma ou ambiente?
- 3. Recordando ISFramework DriverFramework de desenvolvimento de software de alto nível de abstração. Baseia-se numa meta biblioteca de componentes para o desenvolvimento de aplicativos de interface rica multiplataforma que permite projetar aplicativos apenas uma vez e fazer o deployment em qualquer tecnologia, usando drivers de tecnologia. Elemento que cuida da comunicação entre a metabiblioteca e a tecnologia que se deseja utilizar, contendo implementações de componentes gráficos e infra-estrutura de organização dos componentes gráficos (layout) e interação com o usuário (controles de foco e teclado).
- 4.
- 5. Recordando: Driver baseadoem script // JavaScript 14Kb // Style 2Kb // Subsequentes reloads trarão somente o HTML abaixo e os reloads são necessários <html> <head> <title></title> <link href="menu.css" rel="stylesheet" type="text/css"> <script src="menu.js" type="text/javascript"> </script> </head> <body> <div class="cswmPopupBox" id="cswmPopup0" style=""> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="border-style:solid;border-width: 1px;border-color:#d4d0c8 #d4d0c8 #d4d0c8 #d4d0c8;"> <div style="border-style:solid;border-width: 1px;border-color:#FFFFFF #000000 #000000 #FFFFFF;"> <table border="0" cellpadding="0" cellspacing="0"> <tr onmouseover="DynObject.all.DynObject23.MouseOver(1,'1');" onmouseout="DynObject.all.DynObject23.MouseOut();" onclick="DynObject.all.DynObject23.HP(0);DynObject.all.DynObject24.invokeEvent('click');"> <td unselectable="on" nowrap bgcolor="#D4D0C8" id="cswmItem1" class="cswmItem"><span><img align="absmiddle" id="cswmIco1" src="images/btn_save.gif" alt="" border="0" height="16" width="16" name="cswmIco1"><img align="absmiddle" alt="" border="0" height="1" width="12" src="../src/info/stela/gui/images/clearpixel.gif"></span>Cv robertoPacheco</td> <td unselectable="on" bgcolor="#D4D0C8" id="cswmExpand1" class="cswmExpand"></td> </tr> <tr onmouseover="DynObject.all.DynObject23.MouseOver(1,'2');" onmouseout="DynObject.all.DynObject23.MouseOut();" onclick="DynObject.all.DynObject23.HP(0);DynObject.all.DynObject25.invokeEvent('click');"> <td unselectable="on" nowrap bgcolor="#D4D0C8" id="cswmItem2" class="cswmItem"><span><img align="absmiddle" id="cswmIco2" src="images/file.gif" alt="" border="0" height="16" width="16" name="cswmIco2"><img align="absmiddle" alt="" border="0" height= "1" width="12" src="../src/info/stela/gui/images/clearpixel.gif"></span>Cv marceloDomingos</td> <td unselectable="on" bgcolor="#D4D0C8" id="cswmExpand2" class="cswmExpand"></td> </tr> </table> </div> </div> </td> </tr> </table> </div> <div class="cswmPopupBox" id="cswmPopup3" style=""> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="border-style:solid;border-width: 1px;border-color:#d4d0c8 #d4d0c8 #d4d0c8 #d4d0c8;"> <div style="border-style:solid;border-width: 1px;border-color:#FFFFFF #000000 #000000 #FFFFFF;"> <table border="0" cellpadding="0" cellspacing="0"> <tr onmouseover="DynObject.all.DynObject23.MouseOver(1,'4');" onmouseout="DynObject.all.DynObject23.MouseOut();" onclick="DynObject.all.DynObject23.HP(0);DynObject.all.DynObject26.invokeEvent('click');"> <td unselectable="on" nowrap bgcolor="#D4D0C8" id="cswmItem4" class="cswmItem"><span><img align="absmiddle" id="cswmIco4" src="images/btn_undo.gif" alt="" border="0" height="16" width="16" name="cswmIco4"><img align="absmiddle" alt="" border="0" height="1" width="12" src="../src/info/stela/gui/images/clearpixel.gif"></span>Edit</td> <td unselectable="on" bgcolor="#D4D0C8" id="cswmExpand4" class="cswmExpand"></td> </tr> <tr onmouseover="DynObject.all.DynObject23.MouseOverSep(1);" onmouseout="DynObject.all.DynObject23.T(350);"> <td unselectable="on" align="left" valign="botton" bgcolor="#D4D0C8" colspan="2" height="2"></td> </tr> <tr onmouseover="DynObject.all.DynObject23.MouseOverSep(1);" onmouseout="DynObject.all.DynObject23.T(350);"> <td unselectable="on" align="left" valign="botton" bgcolor="#A5A6A6" colspan="2" height="1"></td> </tr> <tr onmouseover="DynObject.all.DynObject23.MouseOverSep(1);" onmouseout="DynObject.all.DynObject23.T(350);"> <td unselectable="on" align="left" valign="top" bgcolor="#FFFFFF" colspan="2" height="1"></td> </tr> <tr onmouseover="DynObject.all.DynObject23.MouseOverSep(1);" onmouseout="DynObject.all.DynObject23.T(350);"> <td unselectable="on" align="left" valign="botton" bgcolor="#D4D0C8" colspan="2" height="3"></td> </tr> <tr onmouseover="DynObject.all.DynObject23.MouseOver(1,'6','5');" onmouseout="DynObject.all.DynObject23.MouseOut();" onclick="DynObject.all.DynObject23.HP(0);"> <td unselectable="on" nowrap bgcolor="#D4D0C8" id="cswmItem6" class="cswmItem"><span><img align="absmiddle" id="cswmIco6" src="images/btn_delete.gif" alt="" border="0" height="16" width="16" name="cswmIco6"> <img align="absmiddle" alt="" border="0" height="1" width="12" src="../src/info/stela/gui/images/clearpixel.gif"></span>Cut</td> <td unselectable="on" bgcolor="#D4D0C8" id="cswmExpand6" class="cswmExpand"><img id="cswmExpandIc6" src="../src/info/stela/gui/images/Popup.gif" width="10" height="10" alt="" border="0" name="cswmExpandIc6"></td> </tr> <tr onmouseover="DynObject.all.DynObject23.MouseOver(1,'15');" onmouseout="DynObject.all.DynObject23.MouseOut();" onclick="DynObject.all.DynObject23.HP(0);DynObject.all.DynObject35.invokeEvent('click');"> <td unselectable="on" nowrap bgcolor="#D4D0C8" id="cswmItem15" class="cswmItem"><span><img align="absmiddle" id="cswmIco15" src="../src/info/stela/gui/images/blank.gif" alt="" border="0" height="16" width="16" name="cswmIco15"><img align="absmiddle" alt="" border="0" height="1" width="12" src="../src/info/stela/gui/images/clearpixel.gif"></span>Paste</td> <td unselectable="on" bgcolor="#D4D0C8" id="cswmExpand15" class="cswmExpand"></td> </tr> </table> </div> </div> </td> </tr> </table> </div> // JavaScript 25Kb enviado uma única vez // Subsequentes reloads trarão somente o JS abaixo e os reloads são desnecessários var menuBar = main.getMainMenu(); var mnufile = menuBar.addMenu('File'); { mnufile.addItem('Cv robertoPacheco','images/btn_save.gif'); mnufile.addItem('Cv marceloDomingos','images/file.gif'); } var mnuedit = menuBar.addMenu('Edit'); { mnuedit.addItem('Edit','images/btn_undo.gif'); mnuedit.addSeparator(); var mnucut = mnuedit.addMenu('Cut','images/btn_delete.gif'); { mnucut.addItem('Item 1'); mnucut.addItem('Item 2'); var mnucut_item3 = mnucut.addMenu('Item 3'); { mnucut_item3.addItem('Item 31'); mnucut_item3.addItem('Item 32'); mnucut_item3.addSeparator(); mnucut_item3.addItem('Item 33'); mnucut_item3.addItem('Item 34'); } } mnuedit.addItem('Paste'); }
- 6. Recordando: Fluxo deDesenvolvimento de Aplicações Início Protótipo das telas Implementar view Implementar Validações Complementares Integrar View e Business Modelo de dados Cliente Tema Gerador de Business Teste Teste Teste Bean Manager Persistence
- 7. Recordando: Partes daarquitetura ISFramework Controle da Metabiblioteca Driver – Componentes View, Layout, Foco,... Componentes Model,Gerador de Business,... Componentes “compostos” ISSearch ISExtracta Identificação ISPublish2 Design e Tema
- 8. Recordando: Componentes deGUI (total = 34)
- 9. Visualizadores de indicadores e conteúdos. Perfil (buscas do Portal Inovação) Pizza (DCVISA e SINAES) Já utilizamos Flash - TFlashView http://solucoes.stela.org.br:8080/dcvisa/ http://vminep.stela.org.br:8080/sinaes/
- 10. Cartogramas: PortalInovação DCVISASINAES Já utilizamos Flash - TFlashView
- 11. Avatares: Portal InovaçãoDCVISA Outras apresentações ... Já utilizamos Flash - TFlashView
- 12. Grafos: DCVISA Jáutilizamos Flash - TFlashView
- 13. Agentes: Agente deBusca do Portal Inovação (em breve Google e ISCrawler) Já utilizamos Flash - TFlashView
- 14. Geo: ISGeo Soluçõesem desenvolvimento http://webdes.stela.org.br/otte/ISGEO/ISGeo . swf
- 15. Geo: Cartograma 2.0Soluções em desenvolvimento
- 16. 3D: 3DCube Soluçõesem desenvolvimento http://webdes.stela.org.br/otte/COMPONENTES/3DCube/demo.html
- 17. 3D: 3DGraph Soluçõesem desenvolvimento http://webdes.stela.org.br/otte/FLASH3d/parser4c.html
- 18. Flash Estigma doflash Filmes – ferramenta de animação Design bonito Jogos Ou seja, ferramenta de design Hoje Em processo de evolução ( desde a versão 6) Procura atender necessidade de aplicações web A partir da versão 9 transformou-se em uma plataforma Ambiente de compilação integrado Maquina virtual robusta Modelo de componentes Atende as necessidades de programadores
- 19. Desvantagens do DriverDHTML Diferença de browsers Diferentes tipos de bugs Baixa performance Falta recursos de manipulação de imagens Mecanismo de comunicação não padronizada e com performance ruim
- 20. Driver Flash VantagensFácil atualização de versão Muito Rápido Flash 9 10x mais rápido que o flash 8 Flash 8 10x mais rápido que o Java script Tamanho pequeno Conceito de controles Construção de Aplicações inteiramente flash Design mais ergonomicos Opção de gerar aplicações em 2 tecnologias distintas Desvantagens Tempo de dedicação de alguns colaboradores para o desenvolvimento Adaptação da célula de design a nova realidade Escolha correta da linguagem/biblioteca flash para gerar movie clip.
- 21. Decisão do FlashOpção 1: Construção de todo núcleo e biblioteca de componentes no IS Opção 2: Construção de toda a biblioteca de componentes a partir de um núcleo estável Opção 3 Partir de um núcleo e biblioteca de componentes Linguagem Biblioteca Compilador swf Foco Controle de teclado Layout Controle de popup Comunicação Núcleo
- 22. Simulações Opção 1Opção 2
- 23.
- 24. Matriz de decisãoNeoswiff Adobe open lazlo MotionTwin Knectifusion Empresa/Produto Foco, Controle de teclado, Abstração de componente Foco, Controle de teclado, Abstração de componente, layout Foco, Controle de teclado, Abstração de componente - núcleo 7.0 9.0 7.0 9.0 8.0 MV U$600 Sem código fonte, componente de qualidade Windows forms C# U$ 499 (versão básica) U$ 799 (com charts) SWF gerado com grande tamanho flex Actionscript 3.0 Open source Action script 1.0 sim Lzx Open source Boa, mas tem que construir tudo não Haxe (dilema comercial ou gratis) Excelente – xml com action script Problema de continuidade Qualquer action script RVML/Action Script2.0 custo observação biblioteca linguagem
- 25. Conclusão Necessidades: Tempode 2 ou 3 colaboradores Comprometimento de todos com a construção Perguntas: É importante para o IS ter aplicações flash? Podemos obter contribuição de outras empresas? (Agriness, Digitro, ...) Qual o periodo mais adequado para inicializar e finalizar o driver flash?
- 26. Resultados É muitoimportante para o IS ter um driver Flash Tentar obter ajuda externa para o desenvolvimento do driver Flash Construção do Núcleo deve ser apenas coordenada pelo Domingos, envolvendo outros colaboradores internos e externos no seu desenvolvimento. Data adequada indefinida
- 27.
- 28. Macromedia Flex: Descrição: Define XML e actionscript (MXML) como linguagem de desenvolvimento. Site: http:// www.macromedia.com /software/ flex / Custo: Demo page: http://www.macromedia.com/software/flex/solutions/developers/ # Browsers: qualquer browser que aceite plugin. O plugin esta disponível para várias plataformas S/H Requer Flash 7 Comentários: A biblioteca de componentes inicial possui o tamanho de 1.400kb (mx.swc) (Versão 1.0 do framework, não sei quanto a vesão 1.5) Se o browser não possuir a versão compatível do plug-in (7+) será baixado mais 700Kb Uma aplicação flex parte de 120Kb se já possuir todos os componentes. O XML da interface e os scripts são inteiramente compilados no servidor sobre demanda, embora haja um mecanismo de cache no servidor O plugin recebe sempre a versão binária do script Possui vários componentes de qualidade: Grid, Butões, layouts, fades, janelas modais, etc. É possível criar novos componentes sobre a linguagem MXML Os componentes básicos aceitam skin, mas é bem difícil configurá-los.
- 29. OpenLaszlo: Descrição: Define XML e actionscript () como linguagem de desenvolvimento. Site: http://www.laszlosystems.com Custo: OpenSource, cobra-se suporte e treinamento Demo page: http://www.laszlosystems.com/lps/laszlo-in-ten-minutes/ e http://www.laszlosystems.com/developers/learn/sample-apps/ Browsers: qualquer browser que aceite plugin. O plugin esta disponível para várias plataformas S/H Requer Flash 6 Comentários: Solução concorrente com Flex. É praticamente a mesma solução só que fornecida por outro desenvolvedor. Componentes de qualidadE Por utilizar a versão 6 do flash, normalmente não precisa baixar o plug-in A biblioteca de componentes é trazida por demanda, ao invés de totalemte como no caso do Flex 1.0. Linguagem XML orientada a objetos Skinnable UI
- 30. GhostWire: Descrição: biblioteca componentes actionscript 1.0 para uso em qualquer aplicação flash Site: http://ghostwire.com/ Custo: US$279 per single-user license Demo page: http://ghostwire.com/go/48 Comentários: Apenas uma biblioteca de componentes flash. Para ser utilizada é necessário um compilador Flash como o da Macromedia ou KineticFusion (Open source)
- 31. Neoswiff http://www.globfx.com/products/neoswiff/ Bibliotecaproprietária sem fontes Empresa não respondeu e-mails de consulta
- 32. Flash Descrição: Baseadoem script binário (byte code) gerado a partir da compilação de ActionScript Funciona plugado nos browsers (todos) Site: Custo: Gratuíto sem fontes