Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Transferir como KEY, PDF0 gostou1,023 visualizações
O documento discute três desafios no desenvolvimento de uma aplicação Flex: 1) Criar textos ricos com formatação, 2) Exibir conteúdo HTML complexo, e 3) Otimizar o carregamento e performance da aplicação. Vários métodos são testados antes de encontrar soluções como usar um editor HTML externo, exibir conteúdo em iframes, e carregar módulos de forma assíncrona após o carregamento inicial.
![OrderItem tem:
• Order
•Shipment
•Terminal
•OrderItem[]
•Product](https://image.slidesharecdn.com/desafiosfugscblog-100715230529-phpapp01/85/Desafios-no-desenvolvimento-de-uma-aplicacao-real-com-Flex-FUGSC-66-320.jpg)
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
- 1. Desafios no desenvolvimento de uma aplicação real com Flex João Augusto Zaratine <zaratine@gmail.com> blog.joaoaugusto.com.br @joaozaratine Julho/2010
- 2. Eu Flex desde 2007 Informant <www.informant.com.br> NOUS <www.noussoftware.com> blog.joaoaugusto.com.br @joaozaratine
- 3. A APLICAÇÃO
- 5. DESAFIO #1 Criando textos de verdade
- 11. ✓Alinhamento ✓Tamanhos ๏Imagens ✓sublinhado Negrito, itálico, x Colunas x Tabelas ✓Marcadores x Embed ✓Cores x Ctrl+V do Word ✓Links
- 13. ✓Alinhamento ✓Tamanhos ✓Colunas ✓sublinhado Negrito, itálico, ๏Imagens x Tabelas ✓Marcadores x Embed ✓Cores x Ctrl+V do Word ✓Links
- 14. É quase impossível usar o TLF
- 17. “O CKEditor é o que precisamos... Isso não é Flex, é?”
- 18. “Já sei, vamos fazer um popup”
- 20. Bom, agora só falta exibir o texto....
- 21. DESAFIO #2 Exibindo conteúdo HTML
- 22. Tentativa #1 htmlText
- 23. ✓ <a> ✓ <u> ✓ <b> x <div> ✓ <br> x <table>, <th>, <tr>, <td> ✓ <font> x <object>, <embed> ✓ <img> x <em> ✓ <i> x <form> ✓ <li> x <input> ✓ <p> x <h1>, <h2>, <h3>, <h4>... ✓ <textformat> x Etc e tal
- 24. Tentativas #2 #3 #4 #5 #6...
- 26. DENG
- 27. DENG IFrame 1
- 28. DENG IFrame 1 IFrame 2
- 29. DENG IFrame 1 IFrame 2 IFrame 3
- 30. DENG IFrame 1 IFrame 2 IFrame 3 IFrame 4
- 31. DENG IFrame 5 IFrame 1 IFrame 2 IFrame 3 IFrame 4
- 32. DENG IFrame 6 IFrame 5 IFrame 1 IFrame 2 IFrame 3 IFrame 4
- 34. Qual é o melhor lugar para exibir HTML?
- 35. Qual é o melhor lugar para exibir HTML? Talvez numa página HTML?
- 36. Largura:100% Altura: 100% Aplicação Flex Tradicional Flex ScrollBars
- 37. Largura:100% Altura definida pela conteúdo NOUS (Flex) Browser ScrollBar HTML
- 38. Browser Página HTML NOUS (Flex) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae elit placerat justo sollicitudin posuere. Sed pulvinar velit eu elit pellentesque tristique. Nam consectetur dui eu elit consectetur eget tincidunt massa vestibulum. Vivamus nisi libero, pretium et aliquet ut, ultrices ac purus. Etiam nibh dui, faucibus ut venenatis ut, accumsan a augue. Conteúdo HTML Sed feugiat nisi sed ipsum bibendum imperdiet. Etiam lobortis vulputate metus ac interdum. Morbi porta semper vestibulum. Pellentesque lobortis quam non diam sagittis vitae rhoncus tortor viverra. Nam ut ultricies urna.
- 39. Área que mostra conteúdo apareceu? ADDED_TO_STAGE ou SHOW ExternalInterface.call(mostraDivECarreg aConteudoPorAjax)
- 40. Área que mostra conteúdo desapareceu? REMOVED_TO_STAGE ou HIDE ExternalInterface.call(escondeDivEApaga SeuConteudo)
- 44. AÇÃO #1 Recompactar todas as imagens
- 45. AÇÃO #2 Remover todos Embed das imagens (a não ser que elas apareçam na primeira tela)
- 46. AÇÃO #3 Criar mais Modules e não carregá-los com a aplicação
- 47. “Mas agora quando eu entro no módulo administração a tela demora pra aparecer”
- 48. Depois que a aplicação é carregada e aparece na tela, carregamos todos os módulos sem que o usuário saiba
- 49. “Mas essa aplicação ainda demora muito pra abrir”
- 50. AÇÃO #4 Login antes de carregar a aplicação
- 51. Pessoas consideram uma aplicação rápida por duas razões:
- 52. 1) Ou elas são rápidas de verdade ou...
- 53. 2) Ou elas dão a impressão de serem rápidas
- 54. Passo #1 Exterminar a tela de login do Flex
- 56. Passo #2 Criar uma nova tela de login em HTML
- 58. Passo #3 Colocar a nova tela de login em cima da tela de loading do Flex
- 62. 90% dos problemas de performance estavam no back-end
- 63. ANTES select t from Topic t
- 64. DEPOIS select t.name, t.description, t.date from Topic t
- 65. ANTES public class Package { public var id:Number; public var status:String; public var packageBarcode:String; public var orderItem:OrderItem; }
- 66. OrderItem tem: • Order •Shipment •Terminal •OrderItem[] •Product
- 67. DEPOIS public class Package { public var id:Number; public var orderId:Number; public var orderItemId:Number; public var status:String; public var packageBarcode:String; public var postalBarcode:String; public var shipWay:String; public var productName:String; public var reference:String; public var date:Date; public var name:String; public var address:String; public var number:String; public var city:String; public var country:String; public var postalCode:String; public var neighborhood:String; public var phone:String; }
- 68. ANTES <mx:Box> <mx:Canvas> <mx:HBox> <mx:Canvas> <mx:VBox> <mx:Label text="Hello"/> </mx:VBox> </mx:Canvas> </mx:HBox> </mx:Canvas> </mx:Box>
- 70. ANTES model.user.name = "Joao" model.user.abstract = "" model.user.birthdate = new Date(1988, 04, 26) model.user.administrator = true
- 71. DEPOIS var user:User = model.user user.name = "Joao" user.abstract = "" user.birthdate = new Date(1988, 04, 26) user.administrator = true
- 72. Dúvidas?
- 73. Obrigado!