BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Module Based Application In Flex 3.0

Posted by Shardul Singh Bartwal on March 9, 2008

Module Based Application in Flex 3.0

 Using  Module  in  flex 3.0  based  application  is one of the best approach from the performance perspective. The  importance  of  the  module based  application increases when this is a big one application.One of the major benifit by using module is the independecy during development phase. Let  uppose  I am dividing my  Project in 3 modules for the assigment of development to 3 developers.Now these 3 people can develop their own module(here module is reffering general term of Software Engineering)by using the Module(Flex 3.0’s Module).The  another  and  main  benifit is  related  to the performance.Let suppose my final swf’s size is 3 MB. So  for  using the application we have to load this 3 MB’s SWf. But let suppose I divide my Application  in  3  modules  then  definetly  the  size  of  the  Module  will  be  one  third  of  the Application.Now when I have to use the first Module I will load only it.When I have to use Second Module I Will simply unload the first one and will Load Second one.Hence my memory Consumption will be One by third of the Earlear non Module based approach.Further we can also divide a  Module in to the other Modules so this can be done up to any level.The important  thing  is  to  divide  your  needs in such  small unit of requirements. This will increase your performance in a amazing way. Here  one  thing  which  should  must  added  is  that  the  swf generated after the compilation of the Module will  not show  you  any  thing  if  you  will run  it  separetly. If  you  have  to  use  it  then  it is  must  to  load it  at  Application  level. It  is  also  allowed that  if  you  load  a  module  A into another module B then only after Loading B at Application level you can access module A.

Its all the theory related to the Modules now come to the implementation…………………………..

Open your Flex Builder and create a new Flex Project as I named it ‘ModuleBasedApplication’.Now under the ‘src’ folder create the folder structure as I have created.Here I am creating three folders under ‘modules’ folder named ‘mod1′,’mod2’ and ‘mod3’ for putting three modules.Look at Below.


Now you Have to place Module inside mod1,mod2 and mod3 folders.Just goto  File > New >MXML Module as below.Name it ‘Mod1’ and then put it into ‘mod1’.Simlarly create ‘Mod2’ Module in ‘mod2’ folder and ‘Mod3’ Module in ‘mod3’ folder.


After adding the Module in these folders it will look like below.


Now you have added the modules and you can code according to your use,for example I have simply placed one Label inside each which is just showing the name of that particular Module i.e Mod1,Mod2 or Mod3.Now go to the ‘Properties‘ of you project on Right Mouse Pressing on it you will find a window on the left of which you can see the ‘Flex Modules’  tab.Just click on this tab.A window with title ‘Flex Modules’ will open.At the right corner of this window is a ‘Add’ button click on it,‘Add Module’ window will open.Click on the ‘Borwse’ button then you will find ‘Select Module‘ window.Now just select the Module which you have to add as here ‘Mod1.MXML’ is selected,and then click ‘OK’.Again click ‘OK’ on ‘Add Module’ window.


Similarly add all other Modules.Yours Modules has been added and now just compile your project.After building it you will find the structure as below your project’s ‘bin-debug’ folder.


Now I am giving you the code related to the Application file in which I am showing these modules separetly on the click of a tab of TabBar.On click of each tab a separate module is can be seen.Just copy and paste the code below into your Application file i.e. main file.


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”” layout=”horizontal”
width=”60%” height=”60%” left=”15″ right=”15″ top=”15″ bottom=”15″
import mx.collections.ArrayCollection;

private var acTabBar:ArrayCollection=new ArrayCollection([

<mx:VBox width=”100%” height=”100%” left=”150″ right=”150″ top=”150″ bottom=”150″>
<mx:TabBar id=”tabModules” width=”80%” height=”25″ dataProvider=”{acTabBar}” />
<mx:ViewStack id=”v1Vstk” width=”100%” height=”100%” selectedIndex=”{tabModules.selectedIndex}”>
<mx:ModuleLoader url=”com\myProject\modules\mod1\Mod1.swf” width=”100%” height=”100%”/>
<mx:ModuleLoader url=”com\myProject\modules\mod2\Mod2.swf” width=”100%” height=”100%”/>
<mx:ModuleLoader url=”com\myProject\modules\mod3\Mod3.swf” width=”100%” height=”100%”/>


After this once again compile your Application.You will find a TabBar there as below on the click of which’s tabs you will find different modules.


Hope you will enjoy this.

Enjoy Flexing…………………………………………………………..


7 Responses to “Module Based Application In Flex 3.0”

  1. Umer said

    its a good code
    but i need one thing
    i want to capture an event dispatch in a module?
    like in module one if i click sum button like logout
    i should get a event catch in main application
    how can i do that?

  2. Adrian said

    Not working???

    Severity and Description Path Resource Location Creation Time Id
    Multiple initializers for property ‘dataProvider’. (note: ‘dataProvider’ is the default property of ‘mx.controls.TabBar’). Test/src Test.mxml line 19

  3. Rasmus said

    Google for the ALON Design pattern. I am using it in my application and it works great.
    There is a little bit of work in implementing it, but when its done, its really nice to use.

  4. beto said

    thanks !!

    I was looking for something like this =D

  5. sunil rana said

    Good Post

  6. Asking questions are really pleasant thing if you are not understanding something fully,
    but this article gives fastidious understanding even.

  7. Waldo said

    Your way of telling everything in this post is truly good, every
    one be able to effortlessly know it, Thanks a lot.

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: