Read in english (Automatic translate wiht Google)
Olá pessoal, antendendo a pedidos e aproveitando que estou fazendo as apostilas finais do curso de Flex da egenial, que tratam exatamente sobre módulos, vamos falar de módulos hoje.
O que são módulos?
Módulos são arquivos swf separados que podem ser carregados ou descarregados em tempo de execução. Este mecanismo foi inventado por Roger Gonzalez mas só depois do Flex 3 passou a ser integrado diretamente no Flex Builder.
É comum vermos confusões entre RSL’s e módulos, aplicações grandes quase sempre vão tirar proveito de módulos mas nem sempre de RSL. Então não confudam, módulo é uma coisa e RSL é outra totalmente diferente.
Quando usar?
Quando o tempo de carga inicial de sua APP começar a se tornar um problema.
Quando você quiser escolher dinâmicamente o que carregar.
Quando você não quiser recompilar tudo a cada alteração.
Quando quiser compartilhar código entre aplicações
Como módulos é um tema bem extenso, vamos para um pouco de prática.
Em nossa aplicação de exemplos queremos criar um painel administrativo para um site. Nossa aplicação é o painel e cada módulo será uma seção do nosso painel. Teremos seções de artigos, links, eventos (não vamos implementar as funcionalidades destas seções pois é apenas um exemplo).
Criamos o nosso application normalmente desta forma (desculpem a falta de beleza no código, ainda não instalei nenhum plugin para highlight de código):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="br.com.area.*"
layout="vertical"
creationComplete="loadModule('Artigos.swf',mdlArtigos)">
<mx:Script>
<![CDATA[
import mx.core.Container;
import mx.modules.ModuleLoader;
import mx.modules.ModuleManager;
import mx.modules.IModuleInfo;
//recebe a url do modulo e o container(ModuleLoader extende VBox) que será mostrado
public function loadModule(moduleUrl:String, module:Container):void
{
//mudo o viewstack para o modulo escolhido
vsModules.selectedChild = module;
if (!ModuleManager.getModule(moduleUrl).loaded)
{
//fazendo um cast do container para
//ModuleLoader e setando a url do swf do ModuleLoader
//de acordo com a string moduleUrl recebida
ModuleLoader(module).url = moduleUrl;
}
}
]]>
</mx:Script>
<mx:ApplicationControlBar>
<mx:Button label="Artigos" id="btnArtigos" click="loadModule('Artigos.swf',mdlArtigos)"/>
<mx:Button label="Links" id="btnLinks" click="loadModule('Links.swf',mdlLinks)"/>
<mx:Button label="Eventos" id="btnEventos" click="loadModule('Eventos.swf',mdlEventos)"/>
</mx:ApplicationControlBar>
<mx:Spacer height="30" width="100%" />
<!-- Nosso viewstack recebe o custom component ModLoader que será mostrado abaixo -->
<mx:ViewStack id="vsModules" height="100%" width="600" historyManagementEnabled="true">
<comps:ModLoader id="mdlArtigos"/>
<comps:ModLoader id="mdlLinks"/>
<comps:ModLoader id="mdlEventos"/>
</mx:ViewStack>
</mx:Application>
|
Agora o nosso ModLoader.mxml :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?xml version="1.0" encoding="utf-8"?>
<mx:ModuleLoader xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="400"
horizontalAlign="center"
verticalAlign="middle"
ready="readyHandler(event)"
loading="this.loading.visible = true">
<mx:Script>
<![CDATA[
private function readyHandler(event:Event):void{
event.target.removeChild(loading);
}
]]>
</mx:Script>
<mx:Label id="loading" text="CARREGANDO" visible="true" />
</mx:ModuleLoader>
|
O código acima apenas mostra um labe de carregando enquanto o módulo é carregado. Poderia substituir por um progressbar ou outro loading sem problemas.
Agora o conteúdo de nosso módulo Artigos.mxml :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Module
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
percentWidth="90" percentHeight="100"
horizontalAlign="center">
<mx:Label text="Modulo de Artigos" />
<mx:Text width="300">
<mx:htmlText>
<![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing elit]]>
</mx:htmlText>
</mx:Text>
</mx:Module>
|
Coloquei apenas o conteúdo do arquivo Artigos.mxml (os outros são extamente iguais).
Crie os arquivos Links.mxml e Evento.mxml da forma que quiser, apenas é obrigatório que extendam de Module, igual acima.
Outro detalhe que talvez não tenham percebido é a propriedade percentHeight e percentWidth, elas estão refrenciando o quanto este Module irá ocupar em relação ao seu Pai, no nosso caso o ViewStack em Application.
Agora vem a parte mágica, que antes do Flex 3 beta 2 era bem chato de fazer.
Clique com o botão direito sobre o nome de seu projeto na view “Flex Navigator” de seu Flex Builder.
Acesse Propriedades, em seguida acesse “Flex Modules”.
Agora clique em ADD, em source escolha um módulo e depois certifique-se que a opção Optimize for Application está apontada para sua aplicação. Esta propriedade faz com que o seu módulo aproveite as classes utilizadas em sua aplicação, diminuindo o tamanho e o gasto de memória.
Repita esse passo para todos os arquivos e pronto!!! Simple não?! Não!
Módulo é um tema bem complexo e pode ser abordado de várias formas, e não conseguirei cobrir tudo em único tutorial.
Ressalto a importância em estudar os métodos unload e load do ModuleLoader e também estudar a classe ModuleManager.
A melhor leitura possível para isso é:
flex3beta2 documentação
Módulos no livedocs
Está em anexo o código do exemplo acima, e espero que tenham gostado e até a próxima.
Download
PARA MAIS INFORMAÇÕES INTERESSANTES SOBRE FLEX ACESSE: curso flex
08/04/2008 em 06:56 AM
Muito, muito, muito bom mesmo amigo parabéns!! Eu estou procurando isso já a algum tempo e até em forums gringos o pessoal se embaralha com isso. Esse tutorial foi bem básico mas creio que o objetivo dele foi alcançado que era apresentar a funcionalidade. Espero ver mais bons artigos como esse por aqui. Novamete parabéns!!
08/04/2008 em 07:49 AM
Valeu Daniel, excelente tutorial... Semana passada eu li outro artigo seu sobre Flex 3 Frameworking Caching e também estava muito bom... continue assim garoto!!!
08/04/2008 em 08:07 AM
Show de bola cara. Parabéns Tava mesmo precisando d euma explicação mais clara sobre Modules. Aguardo pela continuação! Sucesso! Léo
08/04/2008 em 08:48 AM
Belíssima iniciativa, parabéns ! Estou construindo uma aplicação muito grande, teria problemas futuros não fosse pelo seu esclarecimento. Abraço
08/04/2008 em 08:51 AM
Olha eu aqui outra vez querendo sugar tudo hehe Eu já vi isso em alguns lugares mas não sei o porque é invertido ou se é um padrão qualquer ou mesmo o que é o comps xmlns:comps="br.com.area.*" O que faz isso? Continue com os conteúdos que agente lê viu ?! Abraço
08/04/2008 em 10:47 AM
Muito bom! Parabens.
08/04/2008 em 11:06 AM
Olá pessoal, muito obrigado, vou continuar fazendo mais tutoriais de Flex. @Villas: xmlns:comp="br.com.area" quer dizer que estou usando esse name space para meu componentes. Repare que em xmlns:mx="http://xxxx" temos o namespace da adobe, e toda vez que usamos mx:AlgumComponente estamos usando este name space, é propriamente o caminho onde estão armazenados os componentes. No caso do exemplo acima está armazenado dentro da pasta br/com/area .... é o conceito de package semelhante ao que o pessoal usa em Java. Abraços.
09/04/2008 em 03:58 PM
Excelente!!! Valeu demais!!!
12/04/2008 em 11:01 AM
Gostaria de saber se da pra usar os Módulos com a FLexMDI, ou seja cada janela MDI é um swf separado. Me refiro a FLEXMDI do projeto Flexlib. Aguardo retorno, ótimo post, Abraço, Renan
12/04/2008 em 10:12 PM
Olá Renan. FlexMDI que você se refere é o componente da FlexLib? Não sou muito fã de MDI, ai nunca uso MDI. Mas com certeza você consegue usar sim, pois a classe ModuleLoader é um container que estende do VBox.
14/04/2008 em 08:19 AM
Bobageira mas esse fundo preto do código não está muito legal não mas o post foi muito útil Obrigado.
14/06/2008 em 09:08 PM
Olá Daniel, me diga uma coisa, aquele problema de sobrecarga de memória quando se carrega módulo, você sabe se tem alguma solução pra isso?
14/06/2008 em 11:16 PM
E ai Quinhone, blz? Quanto ao problema de memória, se você utilizar o ModuleManager e sempre descarregar os módulos desnessários, provavelmente não terá muito problema. Também é interessante seguir essa dica do pessoal da dclick: http://blog.dclick.com.br/2007/01/23/gerenciamento-de-memoria-e-tamanho-dos-arquivos-em-grandes-aplicativos-utilizando-o-modules-do-flex-201/ ...
O código do exemplo acima está bem parecido e funciona de forma semelhante através do viewstack.
15/06/2008 em 10:03 AM
Valeu Daniel!!!!!
15/06/2008 em 04:23 PM
Dessa forma, em verificar se á foi carregado e só mostrar e não carregar de novo, isso não daria problema, se o módulo tiver algum método sendo chamado no createComplete por exemplo?
15/06/2008 em 04:48 PM
outra coisa que percebi também, criei um módulo Eventos.mxml, ele carrega certinho, coloquei alguns componentes nele e de o seguinte erro quando clico em cima do DateField e ColorPicker.
TypeError: Error #1034: Type Coercion failed: cannot convert mx.managers::PopUpManagerImpl@89b1981 to mx.managers.IPopUpManager. at mx.managers::PopUpManager$/get impl()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\PopUpManager.as:68] at mx.managers::PopUpManager$/addPopUp()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\PopUpManager.as:169]
15/06/2008 em 08:38 PM
@Quinhone, respondendo a primeira: de fato o creationComplete só será disparado uma vez, mas se a idéia e disparar toda vez que o módulo for mostrado realmente você não pode usar o creationComplete mas use o evento show por exemplo.
A segunda: este erro acontece por compartilhamento de código, ou melhor, a falta dele. Basta você fazer um import do manager desejado e criar uma variável a partir desta classe… Você também pode colocar todas as classes compartilhadas em um swf separado o que vai facilitar o reaproveitamento entre vário módulos. Na verdade existe várias formas de resolver isso, mas a que eu mais gosto e sempre uso é usar framework caching. Aqui no blog tem um tutorial de como usar o framework caching.
07/07/2008 em 03:58 PM
Aproveitando o assundo de modulos gostaria de saber se existe a posibilidade de modulo caregar modulo e se existe a posibilidade de transaçõa de informações entre esse modulos, e o que compensa mais trabalhar com mudulos ou componentes.
A segunda duvida e se eu caregar um componente atraves de um modulo esse componente vai ser caregado junto com a aplicação principal ou com o modulo???
08/07/2008 em 09:51 PM
@Flávio, carregar módulos dentro de módulos é perfeitamente possível e comum. Quanto a trocar informações entre módulos também é simples, mas existem várias formas, usando um formato pouco acoplado ou muito acoplado, na documentação do Flex existe um bom capítulo sobre módulos que fala bem sobre isso. Trabalhar com módulo ou componentes não tem muito a ver, pois no Flex tudo é componente, módulo é apenas uma forma de não ter que carregar a app toda no inicializar e poder dividir as funcionalidades de acordo com a necessidade do usuário, você ainda continuará usando componentes. Quanto a carregar comps através de módulos, eles só serão carregados quando a aplicação carregar o módulo, existem formas de compartilhar os componentes já carregados na aplicação principal e os módulos e também entre módulos com módulos.
26/07/2008 em 10:17 AM
Simplesmente Fantastico…..
ótimo material parabens.
14/08/2008 em 08:58 AM
Olá Daniel ótimo post!
Cara tenho uma dúvida! Tenho que dividir meu sistema em Módulos, tenho vários módulos ex. fiscal, financeiro, contábil, etc… tenho que separar isto de uma forma dinâmica por demanda, ou seja, o que o cliente pedir tenho que liberar pra ele, já tenho minha app com meu menu tudo pronto, gostaria de saber como faço isso de forma dinâmica sem precisar ficar digitando para cada cliente um menu e outra como faço pra separar os módulos ex. tenho o fiscal más ele quer só determinada tela, tenho que separar isso por bibliotecas?
Daniel preciso mesmo de sua ajuda, já que comecei a pesquisar isto agora e não entendo muito do assunto.
Se puder me ajudar fico muito agradecido, deixo aqui meu email para contato!
No aguardo Leandro.
14/08/2008 em 12:04 PM
Olá Leandro, você precisa criar um módulo como mostramos aqui para cada módulo do seu sistema.
Quanto ao menu existe várias formas de fazer isso. Mas eu não entendi o que vc está chamando de cliente, é dono do sistema ou os usuários dele? Se for os usuários vc pode criar um xml por exemplo com o conteudo do menu e criar perfil explicitando a quais partes aquele perfil tem acesso do menu.
Se for o cliente vc também pode usar o lance do xml com o nome do item do menu e url do modulo ai a medida que o cliente vai pedindo para incluir mais modulos vc vai adicionando nós a este xml apontando para um novo módulo.
Mas existem centenas de formas de fazer isso, essa foi a primeira que pensei.
14/08/2008 em 02:05 PM
Daniel muito obrigado por responder as minhas perguntas, as vezes tem pessoal que nem responde!!!
Assim então tenho que criar vamos supor o módulo de financeiro do jeito que vc fez ai com todas as telas juntas do módulo, mesmo que o usuário do sistema não queira COMPRAR todas as telas do módulo?
Outra dúvida é a seguinte: Tenho o módulo de Contábil e outro de Financeiro criado já como módulo cada um do jeito que ta no tutorial acima, tem como eu juntar os dois módulos num só sistema? Tipo: o usuário irá utilizar os módulos Financeiro e Fiscal do sistema, teria como colocar os dois módulos juntos num só sistema?
O tamanho dos dois módulos juntos num só sistema irá ficar muito grande? Pois meus MXMLs são todos componentes pois os mesmos descendem de outros arquivos .AS.
Vc teria algum email pra mim poder enviar diretamente pra vc minhas perguntas?
14/08/2008 em 09:50 PM
Se eu fosse desenvolver um sistema que tivesse vários módulos o cliente pudesse comprar os módulos eu iria me preocupar na melhor forma de organizar o código. Se tem várias funcionalidades financeiras, faço um módulo financeiro e utilizaria um esquema de perfis… mas se são muitas funcionalidades específica então separe em outro módulos.
Se você criar seus módulos independentes da aplicação pode usar o mesmo módulo em várias aplicações não precisa mesclar tudo em um único programa.
Quanto a MXML ou AS ficar maior ou menor que outro isso é lenda, e isso não tem relação alguma.
Qualquer dúvida manda aqui se for relacionado ao post e outras dúvidas manda na Flexdev.
15/08/2008 em 07:46 AM
Daniel bom dia!
Vc saberia me dizer como fazer isso? Usar vários módulos em várias app e mesclar tudo num único programa?
Então esse negócio de diminuir o tamanho do SWF é balela? Mesmo se eu fizer tudo numa única app ou usar várias apps em um único programa da na mesma se for o caso do tamanho? A única coisa que muda é a organização do projeto?
15/08/2008 em 08:58 AM
Daniel como faço pra utilizar dentro de um mesmo projeto com duas apps o mesmo módulo nas duas apps????
Adicionando pelo addModule do próprio Flex não consigo vizualizar mais o módulo que foi já inserido para dar o build no projeto! Tem que ser por linha de comando mesmo?