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.




 
 

 
CQ5
adobe aem56 dam logo

Setting Images in DAM

All images are loaded into the DAM (Digital Assets Management). To upload an image, you’ll need to use your Activator login. From the tree, click +Digital Assets Find the way to the tree to suitable folder (AAFP, images, ANN,...
by Nouman Naveed
0

 
 
 

Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed
0

 
 
CQ5
aem 5.6.1 features pic

Many New Features in AEM 5.6.1

AEM 5.6.1 is a easy to use, unified experience management collection for marketers in the digital sphere to use in creating, managing, and delivering unique online experiences that are brand-entered and increase demand across d...
by Nouman Naveed
0

 

 
CQ5
Adobe CQ5 WEM, SOCO, Tagging, DAM

What’s New in CQ 5.6

1: It’s called AEM (Adobe Experience Manager) now Though I guess not that essential, it’s going to be exciting if the name is going to attach – there were other occasions where Adobe tried to rename this result and at the...
by Nouman Naveed
0

 
 
CQ5
content management for web and mobile

Content Management for Web & Mobile

Adobe CQ is a WCM and gives a better browser-based user interface. It is best suitable for business and IT for creating interactive, multimedia rich, multichannel consumer understanding to make an engaging digital existence, ma...
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 *