dez 18
Digg
Stumbleupon
Technorati
Delicious
Adobe Flex

Modularizando sua aplicação com Modules e Flex Builder 3

Add

Olá pessoal,

Uma vez apresentei um artigo falando sobre o Adobe Flex, e neste artigo, e como entusiasta da tecnologia apenas apresentei pontos positivos, e como era de se esperar alguns perguntaram: Esse tal Flex não tem pontos negativos?!

Hoje posso dizer que desenvolver uma aplicação de grande porte com o Adobe Flex requer uma atenção necessária, o problema aparece quando se quer diminuir o tamanho do .swf final, ou então dividir a aplicação em modulos.

Confesso senhores que tentei usar o Module no Flex Builder 2 (SDK 2.0.1) e não atendeu muito bem, era custoso ter que ficar compilando cada modulo, e depois quando usava dava uns problemas muito estranhos.

Hoje quero apresentar a vocês algo que o Flex Builder 3 trouxe de novo, a manipulação dos modules via Flex Builder.

Vamos ao código então:

Criando um Módulo 

No Flex Builder 3  para criar um novo modulo de um botão direito sobre seu projeto, e vá em NEW -> MXML Module

Após dar um nome ao seu modulo, o Builder vai gerará um arquivo com essas linhas:

PLAIN TEXT
XML:
  1. <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"  
  2.             layout="absolute"
  3.             width="400" height='300'>
  4. </mx:Module>

Com o seu modulo criado você pode trata-lo como se fosse um Apllication  e trabalhar normamente, componentizando e etc..

Quando você Salvar/Build, o Flex Builder automaticamente compilará o módulo e colocará na sua pasta bin, com tudo o que necessário para ser usado por qualquer outra aplicacão Flex, seja ela local, ou remota.

Lembrando que se você preparar sua aplicação de forma modular, sabendo componentizar, mais reuso seu sistema terá, uma vez que esse module composto por outros componentes pode ser usado em outras aplicações.

Carregando um Módulo 

Para carregar o seu módulo, existe algumas formas apresentadas na documentação, eu estarei abordando duas apenas.

Com MXML:

O MXML facilita a vida quando temos aplicar o componente, e com os modules são a mesma coisa observe:

PLAIN TEXT
XML:
  1. <mx:ModuleLoader id="moduleMXML" url="ModuleMXML.swf" 
  2.     width="100%" height="100%"
  3.     ready="carregou()" progress="onProgress(event)"
  4.     error="onError(event)" unload="onUnload(event)"/>

Observe que é possível tratar vários eventos, como ready, progrees, error, unload.

Mas são opcionais, sendo que para funcionar, apenas o parâmetro URL, deve ser setado, no meu caso eu compilei o modulo na raiz do projeto.

Abaixo mostro como pode tratar os eventos:

PLAIN TEXT
Actionscript:
  1. private function onProgress(event:ProgressEvent):void
  2. {
  3.     var numPerc:Number    = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);
  4.     windowModule.status    = "Carregando Modulo..."+numPerc+"%";
  5.     progress.label                  = "Carregando Modulo..."+numPerc+"%";
  6.     progress.indeterminate = false;
  7. }
  8.  
  9. private function onError(event:ModuleEvent) : void
  10. {
  11.     Alert.show("Não foi possível carregar o modulo. \nDetalhes:"+event.errorText,"Erro");
  12. }
  13.  
  14. private function onUnload(event:Event):void
  15. {
  16.    windowModule.status = "Modulo Descarregado";
  17.    progress.label      = "Modulo Descarregado";
  18. }
  19.  
  20. private function unLoadModule(modulo:ModuleLoader):void
  21. {
  22.     modulo.url == "ModuleAS.swf" ? vbModuloAS.removeChild(moduleLoaderAS) : null;
  23.     modulo.unloadModule();
  24. }
  25.  
  26. private function carregou():void
  27. {
  28.     windowModule.status    = "Modulo Carregado";
  29.     progress.label                  = "Modulo Carregado";
  30.     progress.indeterminate = true;
  31. }

Outra forma de carregar os módulos, é através do ActionScript como apresentado abaixo:

Com ActionScript:

PLAIN TEXT
Actionscript:
  1. private var moduleLoaderAS:ModuleLoader = new ModuleLoader();
  2.  
  3. private function loadAS() : void
  4. {       
  5.     //Progresso do download...
  6.     moduleLoaderAS.addEventListener(ModuleEvent.PROGRESS,onProgress);
  7.     //Ao estar carregado e pronto....
  8.     moduleLoaderAS.addEventListener(ModuleEvent.READY,onReady);
  9.     //Se ocorrer algum erro...
  10.     moduleLoaderAS.addEventListener(ModuleEvent.ERROR,onError);
  11.     moduleLoaderAS.addEventListener(ModuleEvent.UNLOAD,onUnload);
  12.     moduleLoaderAS.url = "ModuleAS.swf";
  13.     moduleLoaderAS.loadModule();
  14. }
  15.  
  16. private function onReady(event:ModuleEvent):void
  17. {               
  18.     vbModuloAS.addChild(moduleLoaderAS);
  19.     carregou();
  20. }

Esta funcão pode ser cahamada por qualquer evento, no meu causo uso um Button, para acionar o carregamento. Outro motivo questionável  é os Leaks de Memória, e quando se usava muitos módules acontecia direto, tanto que pessoas da comunidade não usam os modules, e partem para outros frameworks como o Masapi, tenho minhas críticas sobre isso, mas prefiro mostrar apenas as soluções dadas pela própria Adobe.

 

Fiz uma aplicação que contém modulos sendo carregado via ActionScript e via MXML, a aplicação também conta com um componente que analiza a quantidade de memória utlizada pelo Player* para que todos possam realizar seus testes...

*Este marcador analiza a memória utlizada pela VM em todas as instâncias do seu browser abertas.

Aplicação Rodando:

Link Externo / Link do Source

 

Referências:

Modular Applications overview

Writing Modules

Compiling Modules

Loading and Unloading modules

Adding modules too your project

Optmizing modules in Flex Builder 3

Creating modules in Flex Builder 3

Using ModuleLoader Events

Obrigado pessoal, e até a próxima!

\o/

Liz.. =***


Author: Rodrigo Pereira Fraga

11 Comentários

Eberton Consolim
19 de dezembro de 2007

Massa Rodrigo, Parabéns…

Abraços…

Cassio
14 de janeiro de 2008

Legal, mas quanto mais mexe mais a memória aumenta. É isso mesmo?

Zeca
23 de março de 2008

Queria saber qual o tamanho do arquivo ’swf’ de cada módulo.

bruno
25 de março de 2008

legal, mas o unload module gera vinculos de memória, e seria legal se fosse incluido no exemplo um botão para acionar o System.gc() para o pessoal ver o Garbage Collector funcionando.
E respondendo a pergunta do Zeca, cada modulo tem +ou- 22kb no mínimo, usando RSL ou não.

Ricardo
25 de março de 2008

Estou com dificuldades de fazer o unLoad,
então, gostaria de saber o que exatamente faz
“modulo.url == “ModuleAS.swf” ? vbModuloAS.removeChild(moduleLoaderAS) : null;”

Valeu!

Rodrigo Pereira Fraga
25 de março de 2008

É um if ternário:

modulo.url == “ModuleAS.swf” ? vbModuloAS.removeChild(moduleLoaderAS) : null;

Se o modulo.url for igual a “ModuleAS.swf”, remove um child, se não, não faça nada(null).

Abraços

Trabalhando com módulos e componentes no Flex « ADS - Arte De Ser
24 de maio de 2008

[...] http://blog.digows.com/?p=44 [...]

marcos
9 de outubro de 2008

E ai pessoal

Tava vendo um curso de um dia que parece muito bom, são 2 caras especialistas.
Dá uma olhadinha:
http://www.impacta.com.br/eletter/show_day_flexbuilder/eletter.asp

Abraço ai galera

William
9 de abril de 2009

GC é luxo!….

Thiago Cavalcanti
3 de dezembro de 2009

Ei Rodrigo, parabens pela iniciativa de divulgar seus conhecimentos!
Gostaria de saber se está correto aumentar a memoria a cada movimento que fazemos? nunca diminui?
Abraco,
Thiago

carbonete
4 de fevereiro de 2010

Rodrigo, vc temuma comparação entre o modules e o rsl , qual e melhor e mais indicado ou pode-se usar ambos em conjunto ?

Parabens

[]s

Comments RSS TrackBack Identifier URI

Deixe um comentário