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.

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

4. http://vimeo.com/13278187
Texto

5. DESAFIO #1
Criando textos de verdade

6. O que queríamos...

9. O que tínhamos...

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)

41. DESAFIO #3
Eternal Loading....

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

61. DESAFIO #4
Performance

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>

69. DEPOIS
<mx:Canvas>
<mx:Label text="Hello"/>
</mx:Canvas>

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!