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

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:

[xml]
<mx:Module xmlns:mx=”http://www.adobe.com/2006/mxml”  
            layout=”absolute”
            width=”400″ height=’300′>
</mx:Module>
[/xml]

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:

[xml]

<mx:ModuleLoader id=”moduleMXML” url=”ModuleMXML.swf” 
    width=”100%” height=”100%”
    ready=”carregou()” progress=”onProgress(event)”
    error=”onError(event)” unload=”onUnload(event)”/>

[/xml]

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:

[as]

private function onProgress(event:ProgressEvent):void
{
    var numPerc:Number    = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);
    windowModule.status    = “Carregando Modulo…”+numPerc+”%”;
    progress.label                  = “Carregando Modulo…”+numPerc+”%”;
    progress.indeterminate = false;
}

private function onError(event:ModuleEvent) : void
{
    Alert.show(“Não foi possível carregar o modulo. nDetalhes:”+event.errorText,”Erro”);
}

private function onUnload(event:Event):void
{
   windowModule.status = “Modulo Descarregado”;
   progress.label      = “Modulo Descarregado”;
}

private function unLoadModule(modulo:ModuleLoader):void
{
    modulo.url == “ModuleAS.swf” ? vbModuloAS.removeChild(moduleLoaderAS) : null;
    modulo.unloadModule();
}

private function carregou():void
{
    windowModule.status    = “Modulo Carregado”;
    progress.label                  = “Modulo Carregado”;
    progress.indeterminate = true;
}

[/as]

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

Com ActionScript:

[as]

private var moduleLoaderAS:ModuleLoader = new ModuleLoader();

private function loadAS() : void
{       
    //Progresso do download…
    moduleLoaderAS.addEventListener(ModuleEvent.PROGRESS,onProgress);
    //Ao estar carregado e pronto….
    moduleLoaderAS.addEventListener(ModuleEvent.READY,onReady);
    //Se ocorrer algum erro…
    moduleLoaderAS.addEventListener(ModuleEvent.ERROR,onError);
    moduleLoaderAS.addEventListener(ModuleEvent.UNLOAD,onUnload);
    moduleLoaderAS.url = “ModuleAS.swf”;
    moduleLoaderAS.loadModule();
}

private function onReady(event:ModuleEvent):void
{               
    vbModuloAS.addChild(moduleLoaderAS);
    carregou();
}

[/as]

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:

http://23.20.48.222/downloads/postagens/moduleflex/index.html

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.. =***

14 thoughts on “Modularizando sua aplicação com Modules e Flex Builder 3

  1. bruno

    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.

    Like

    Reply
  2. Ricardo

    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!

    Like

    Reply
  3. Rodrigo Pereira Fraga

    É 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

    Like

    Reply
  4. Pingback: Trabalhando com módulos e componentes no Flex « ADS - Arte De Ser

  5. Thiago Cavalcanti

    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

    Like

    Reply
  6. carbonete

    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

    Like

    Reply
  7. dentist pasadena ca

    Excellent job here. I truly enjoyed what you had to say. Keep heading because you certainly bring a new voice to this topic. Not many people would say what youve said and still make it interesting. Well, at least Im interested. Cant wait to see much more of this from you.

    Like

    Reply
  8. jano

    Se eu leio um swf num moduleLoader e esse swf quer ler outro swf no mesmo moduleLoader, qual seria a pratica correta, ou seja como o modulo lido referencia ao moduleLoader. Isso na aplicabilidade de por exemplo ler uma aplicacao main tem um moduleLoader que chama um modulo cliente e no cliente quer ler a selecao de clientes no mesmo moduleLoader.
    Att

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s