Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC

2,945 views

Published on

Palestra Desafios no desenvolvimento de uma aplicação real com Flex" no primeiro encontro do FUGSC

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC

  1. 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. 2. Eu Flex desde 2007 Informant <www.informant.com.br> NOUS <www.noussoftware.com> blog.joaoaugusto.com.br @joaozaratine
  3. 3. A APLICAÇÃO
  4. 4. http://vimeo.com/13278187 Texto
  5. 5. DESAFIO #1 Criando textos de verdade
  6. 6. O que queríamos...
  7. 7. O que tínhamos...
  8. 8. ✓Alinhamento ✓Tamanhos ๏Imagens ✓sublinhado Negrito, itálico, x Colunas x Tabelas ✓Marcadores x Embed ✓Cores x Ctrl+V do Word ✓Links
  9. 9. ✓Alinhamento ✓Tamanhos ✓Colunas ✓sublinhado Negrito, itálico, ๏Imagens x Tabelas ✓Marcadores x Embed ✓Cores x Ctrl+V do Word ✓Links
  10. 10. É quase impossível usar o TLF
  11. 11. “O CKEditor é o que precisamos... Isso não é Flex, é?”
  12. 12. “Já sei, vamos fazer um popup”
  13. 13. Bom, agora só falta exibir o texto....
  14. 14. DESAFIO #2 Exibindo conteúdo HTML
  15. 15. Tentativa #1 htmlText
  16. 16. ✓ <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
  17. 17. Tentativas #2 #3 #4 #5 #6...
  18. 18. DENG
  19. 19. DENG IFrame 1
  20. 20. DENG IFrame 1 IFrame 2
  21. 21. DENG IFrame 1 IFrame 2 IFrame 3
  22. 22. DENG IFrame 1 IFrame 2 IFrame 3 IFrame 4
  23. 23. DENG IFrame 5 IFrame 1 IFrame 2 IFrame 3 IFrame 4
  24. 24. DENG IFrame 6 IFrame 5 IFrame 1 IFrame 2 IFrame 3 IFrame 4
  25. 25. Qual é o melhor lugar para exibir HTML?
  26. 26. Qual é o melhor lugar para exibir HTML? Talvez numa página HTML?
  27. 27. Largura:100% Altura: 100% Aplicação Flex Tradicional Flex ScrollBars
  28. 28. Largura:100% Altura definida pela conteúdo NOUS (Flex) Browser ScrollBar HTML
  29. 29. 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.
  30. 30. Área que mostra conteúdo apareceu? ADDED_TO_STAGE ou SHOW ExternalInterface.call(mostraDivECarreg aConteudoPorAjax)
  31. 31. Área que mostra conteúdo desapareceu? REMOVED_TO_STAGE ou HIDE ExternalInterface.call(escondeDivEApaga SeuConteudo)
  32. 32. DESAFIO #3 Eternal Loading....
  33. 33. AÇÃO #1 Recompactar todas as imagens
  34. 34. AÇÃO #2 Remover todos Embed das imagens (a não ser que elas apareçam na primeira tela)
  35. 35. AÇÃO #3 Criar mais Modules e não carregá-los com a aplicação
  36. 36. “Mas agora quando eu entro no módulo administração a tela demora pra aparecer”
  37. 37. Depois que a aplicação é carregada e aparece na tela, carregamos todos os módulos sem que o usuário saiba
  38. 38. “Mas essa aplicação ainda demora muito pra abrir”
  39. 39. AÇÃO #4 Login antes de carregar a aplicação
  40. 40. Pessoas consideram uma aplicação rápida por duas razões:
  41. 41. 1) Ou elas são rápidas de verdade ou...
  42. 42. 2) Ou elas dão a impressão de serem rápidas
  43. 43. Passo #1 Exterminar a tela de login do Flex
  44. 44. Passo #2 Criar uma nova tela de login em HTML
  45. 45. Passo #3 Colocar a nova tela de login em cima da tela de loading do Flex
  46. 46. DESAFIO #4 Performance
  47. 47. 90% dos problemas de performance estavam no back-end
  48. 48. ANTES select t from Topic t
  49. 49. DEPOIS select t.name, t.description, t.date from Topic t
  50. 50. ANTES public class Package { public var id:Number; public var status:String; public var packageBarcode:String; public var orderItem:OrderItem; }
  51. 51. OrderItem tem: • Order •Shipment •Terminal •OrderItem[] •Product
  52. 52. 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; }
  53. 53. 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>
  54. 54. DEPOIS <mx:Canvas> <mx:Label text="Hello"/> </mx:Canvas>
  55. 55. ANTES model.user.name = "Joao" model.user.abstract = "" model.user.birthdate = new Date(1988, 04, 26) model.user.administrator = true
  56. 56. DEPOIS var user:User = model.user user.name = "Joao" user.abstract = "" user.birthdate = new Date(1988, 04, 26) user.administrator = true
  57. 57. Dúvidas?
  58. 58. Obrigado!

×