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