Module Based Application In Flex 3.0

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=”http://www.adobe.com/2006/mxml” layout=”horizontal”
width=”60%” height=”60%” left=”15″ right=”15″ top=”15″ bottom=”15″
backgroundColor=”#000000″>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

private var acTabBar:ArrayCollection=new ArrayCollection([
{data:’tab1′,label:’tab1′},
{data:’tab2′,label:’tab2′},
{data:’tab3′,label:’tab3′}
])
]]>

</mx:Script>
<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%”/>
</mx:ViewStack>
</mx:VBox>
</mx:Application>

***************************************************************************************************************************

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…………………………………………………………..