AIR

June 2nd, 2012

Using Flex Moduls in your Application

More articles by »
Written by: Nouman Naveed
Tags:
adobe flex modules

Increasing application performance is very critical for anyone who is building mid-size to large application. It is seen in many applications that everything you have in your application is loaded on start-up. This loading of all components on initial load is very time consuming and frustrates your visitors. I have been working on various applications which are initially built without modules in mind. It does not mean that everyone does not know about modules. There are certain situations where loading of all components at initial load is required based on the type of application.

I this post I am going to explain you about the importance of modules and when to use them. I might not be able to give you in-depth knowledge about all capabilities of modules. However, will provide as much information as possible. It is important to understand that modules are built for modularizing your application and increasing the performance of any size flex application by dividing the loading into segments. For example you might be having some navigation bar and content areas for your application and whenever user clicks on any link you might be interested in showing respective content in content area below the navigation bar. Also there is a possibility that you might have more than one content areas below the navigation bar which show other contents based on the interaction from one content area. Modules are built to communicate with other modules and pass data if required. Following is the example of common scenario:

adobe flex modules

Using Modules will not only make your main application light weight but also allow you to have liberty of when to load application parts and what data to pass between modules. Flex modules have gain popularity because of its capabilities and features for creating high performance applications. I would encourage you to look into some various resources for learning more on modules. I will be providing few help links and examples below for you take your study on modules forward.

Example 1 – Modules1.mxml

<?xml version=”1.0″?>
<!– modules/ComplexProgressEventHandler.mxml –>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:local=”*”>

<s:layout>
<s:VerticalLayout/>
</s:layout>

<mx:Panel title=”Module Example”
height=”90%” width=”90%”
paddingTop=”10″ paddingLeft=”10″
paddingRight=”10″ paddingBottom=”10″>
<s:Label text=”Use the buttons below to load and unload the module.”/>
<local:ProgressModule id=”customLoader”/>
</mx:Panel>

</s:Application>

Above is an example of main application which will have facility of loading and unloading modules at run-time. There is also a progress bar component to track loading of module and give indication to visitor about loading of flex application areas. Using progress bar is not compulsory for showing progress of module loading, you can also use simple text field to show loading in percent.

ProgressModule.mxml

<?xml version=”1.0″?>
<mx:ModuleLoader
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>

<fx:Script>
<![CDATA[
private function clickHandler():void {
if (!url) {
url=”ColumnChartModule.swf”;
}
loadModule();
}
]]>
</fx:Script>

<mx:ProgressBar id=”progress” width=”100%” source=”{this}”/>
<s:HGroup width=”100%”>
<s:Button id=”load” label=”Load” click=”clickHandler()”/>
<s:Button id=”unload” label=”Unload” click=”unloadModule()”/>
<s:Button id=”reload” label=”Reload” click=”unloadModule();loadModule();”/>
</s:HGroup>
</mx:ModuleLoader>

Above code is related to load and unload module. As you see the root tag of this component is <mx:ModuleLoader> and has logic of targeting the .swf of file of module. The module loader class is responsible of load and unload module by supplying URL of module.  This .swf file supplied in URL is actually a compiled MXML module component which outputs a .swf file. You use loadModule() method of ModuleLoader class to initiate the loading of .swf in the application and unloadModule() method to unload it thus freeing the memory.

ColumnChartModule.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Module xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” width=”672″ height=”420″>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
</fx:Declarations>
<mx:ColumnChart id=”columnchart1″ x=”110″ y=”69″ width=”486″ height=”317″>
<mx:series>
<mx:ColumnSeries displayName=”Series 1″ yField=””/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=”{columnchart1}”/>

</s:Module>

All modules should be created based on Module class of flex framework. You can either use mxml / ActionScript approach of building modules. For simplicity sake I have created module in mxml component. You can have almost anything between opening and closing of <s:Module> tag. It is important to notice that modules cannot run independently, they should run in lieu of main application. Once the module is saved, Flash Builder generates .swf file in bin-debug folder automatically. If you have disabled “Build Automatically” option then you an enable it for automatic .swf creation from module file. Hope this gives you a quick understanding of how modules work. Following are some of the links for your further help.

References:

http://livedocs.adobe.com/flex/3/html/modular_5.html

 

http://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CGgQFjAA&url=http%3A%2F%2Flivedocs.adobe.com%2Fflex%2F3%2Fhtml%2Fmodular_5.html&ei=NTbKT_KUA8W4rAf3t9HMDg&usg=AFQjCNF_LtnNypo_fFHcqxrid-aQjw_I1A&sig2=2e6RbO406ONvFgjJlXhSdQ


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.




 
 

 
AIR
myimge

Adobe Flash Builder 4.7 Beta Available !

Recently Adobe released Adobe Flash Builder 4.7 beta which will support Adobe Flash 11.4 and Adobe AIR 3.4. It will also support Apache Flex 4.8 release. This version has improved workflow for iOS application development with s...
by Nouman Naveed
0

 
 
AIR
customize-datatips-for-flex-column-chart

Custom DataTip Renderers for ColumnChart

Flex provides many types of charts which allow raw data to show in meaningful format. ColumnChart component is one of the commonly used chart component in many flex applications. Customization of column chart datatip box is not...
by Nouman Naveed
0

 
 
AIR
flex-inspectable-metatag1

Using [inspectable] metatag

Every experienced Flex developer knows about [Bindable] & [Event] metatags. However, I was surprised to know that some developers don’t know the purpose of [inspectable] metatag. Here I am going to discuss purpose of ...
by Nouman Naveed
0

 

 
AIR
flexatom.com adobe certified

Get Adobe Certified

During my recent assignment client was asking many questions on certification process. Sotoday I have decided to add some light on how certification is acquired to make you proud.There are many quality resources already on the ...
by Nouman Naveed
1

 
 
AIR
adobe flex custom event

Using Custom Events in Adobe Flex

Using Flex is very easy and there are many features which will allow you to make communication between custom components easy. And Custom Events capability is one of the great facility of exchanging data between custom componen...
by Nouman Naveed
0

 




0 Comments


Be the first to comment!


Leave a Reply

Your email address will not be published. Required fields are marked *