Example Of Using Modules In Flex 2.01
Flex 2.01 includes support for modules. Modules can be used to organize your Flex code into separate files. These files are compiled into SWFs and then can be loaded into your main application SWF at runtime. This is my first attempt are using modules and I've posted an example application (right click on the example to view the source files).
My references are:
- Flex 2.01 Developer's Guide, Creating Modular Applications, http://livedocs.macromedia.com/flex/201/html/modular_083_1.html
- Flex 2.01 Language Reference, Class Module, http://livedocs.macromedia.com/flex/201/langref/mx/modules/Module.html
- Flex 2.01 Language Reference, Class ModuleLoader, http://livedocs.macromedia.com/flex/201/langref/mx/modules/ModuleLoader.html
- FlexCoders Yahoo Group, Compiling Flex Modules, http://tech.groups.yahoo.com/group/flexcoders/message/60494
My module demonstration application is based on the example in chapter 31 of the Flex 2.01 Developer's Guide (see reference 1). I am using a tab navigator to display various charts. Each chart's MXML code is stored in a separate module (right click on the example application, view source, and select LineChartModule.mxml or PieChartModule.mxml or ColumnChartModule.mxml).
Modules can be used to separate out of the main application, code that doesn't need to be loaded when the Flex application first loads in the user's browser. In my example, the charts that are on the non-visible tabs don't need to be loaded initially. When the user clicks on a tab, the SWF file containing that tab's chart is loaded.
Since not all the code is wrapped into one large SWF, using modules can reduce the initial load time. Also using modules can make your code easier to maintain and reuse. Since the code in a module is a self-contained entity, I could use the same chart module in another application. Additionally, if I change just the base application, I don't need to recompile all the other modules. If I change one of the modules, I only need to recompile that module. Using modules also supports team creation of a Flex application. According to reference 1, it is also possible to link to modules that are on different servers.
To create a module, I used File - New MXML Component and in the list of "Based On" components, I selected module. Between the opening and closing module tag, you place your code. In my example application, the modules are loaded automatically when a tab is selected. However, you can load and unload your modules manually. There is an example of how to do that in reference 1 above. Additionally, the loading and unloading of modules can generate events.
To load a module you use the ModuleLoader tag. You provide the URL attribute the path to and the name of the SWF that contains the code for the module. I did notice a slight delay the first time a tab was selected until the SWF for that module was loaded. It appears that the browser must go back to the server to download the SWF (I thought perhaps all the module SWFs would be downloaded in the background after the application loads).
Compiling a module in Flex Builder 2.01 is not self-evident. There is no "compile module" command button or menu choice. Consult reference 4 above for some ways to compile a module. What I did in my example, was to right-click on the module name in the navigator panel, select Run As Flex Application. This command will create the .swf and .html files for the module and try to load it in the browser (where nothing will display). When you upload your application, you just need to upload the SWF files for each module, in addition to the other main application files.
As I mentioned at the beginning, this is my first attempt using the new module feature. Please post any comments to other module examples and let me know if I have misunderstood something about modules.
That is correct: There will be a delay because the modules are not downloaded in teh background. They are only loaded when requested. The browser caches them, though, so if you unload a module and then load it again, there will be no delay due to downloading.
For example:
ModuleManager.getModule("BarChartModule.swf").load();
hth,
matt horn
flex docs
Much as I appreciate Adobes hard work I think I would have rather waited another week and had some *usable* documentation. We know you're busy guys but so are we - my job is to build apps to deadline for clients, not to spend hours (along with hundreds of other people) second-guessing how changes to the tools work!
Ark - I'll continue to research and experiment with modules. But right now I'm thinking of using modules only as completely self-contained entities. My main application will not be exchanging data with the modules. I envision using modules to help me organize my code, make it easier to maintian, and lessen the initial download when its appropriate. Using modules may not be correct in some cases.
Adobe has posted updated documentation (see my references) and will continue to post new examples in their Developer center and Quick Start center on http://www.adobe.com/flex. Also much smarter Flex developers than I will be posting about how to use modules and what we can do with them. Finally, hopefully, some really good Flex 2 books will come out with even better code examples and information.
Lastly, since I don't work for Adobe, you may want to submit a change request to their Live Docs (see reference 2 above) for more examples and clarification. I've submitted changes to Adobe's Live Docs in the past and was impressed by their quick response. Just click on the Comment button that is on the bottom of a Live Docs page.
I a design an modular application and having the following problem:
I've built a module (called Modulo1.swf) that contains a DataGrid and a couple of controls.
Then I made another module (called Modulo2.swf) that also contains a DataGrid and an Accordion.
Then I made a project called VisorModulos (ModuleViewer), it only load and unload this modules.
The error occurs after loading and unloading twice a module. It fails with the first module and also with the second, here is the link:
http://www.managernet.com.ar/modulos/VisorModulos....
To reproduce the error you must load and unload at least twice any module. In case of the first module, after loading for the second time, try using the DataGrid.
Right click to view source.
Any idea?
The code for module2.swf was not included in the view source.
I too recive the error where use tabnavigator, accordion or others controls. The problem is where unload and load the module.
thanks Bruce
Now Update the sample :
http://www.managernet.com.ar/modulos/VisorModulos....
I have tried to do it.. but debugger "freezes" when the module is being loaded...
(am i doing something wrong?)
have you ever tried to load a module by using the moduleLoader as instance in a Actionscript (e.g. modLoader:ModuleLoader = new ModuleLoader()). I did that and I received no runtime-error but as a result the module to be loaded becomes never visible although I get the ready event from the loader.
Any ideas?
Regards Juergen
just found my mistake. I forgot to add the modLoader as a child of my application.
Sorry for this!
Juergen
I'm not sure what the "best practices" are for debugging modules. I've not done that myself. You may want to post your question on the FlexCoders Yahoo group (see my reference 4 above).
Fabian: I'm not able to determine what the problem is in your code.
See: http://weblogs.macromedia.com/pent/archives/2007/0...
;)
implements... that is a good one..
my version is <a href="http://flex2colombia.wordpress.com/2007/01/11/debu...;
very nice works..
thanks
thankss
See: http://weblogs.macromedia.com/pent/archives/2007/0......
I tried to work out the sample in my Flex Builder. But my Flex builder doesn't recognizes mx:Module as well as mx:ModuleLoader command. What could be the problem.
I am using Flex builder 2.01
See: http://www.adobe.com/support/flex/ for the 2.0.1 download.
I've never understood why Adobe released a new version of Flex and Flex Builder but named the version 2.0.1 instead of something like 2.5.
very nice works..
thanks
I got a problem and need some help!
I init my mainApp with flashVars in the wrapper. Then I load a module in tha mainApp and want the module to get access the flashVars-String. I don't know how?
In other words, how can I get access to the functions or variables of the main-application within a module? Because, tryin the application.application.parameters failed, because its a module with the tag: mx:module !
Thanks, Steven
Research the ActionScript 3.0 ExternalInterface class. It allows your Flex app to communicate with the JavaScript that is in the outer HTML wrapper.
See this tutorial on dmxzone.com:
http://www.dmxzone.com/ShowDetail.asp?NewsId=13688...
That tutorial helped me learn how to use the ExternalInterface class. It does cost $2.99 so you may also want to first review the ExternalInterface class information found in chapter 34, communicating with the wrapper, in the Flex Developer's Guide (see flex.org for a link to the developers guide).
thank you for your quick answer! I will look at this tutor shortly!
I found out, that it is very easy - it's normally so ;-)
When a User loads my Page, my mainApp will be loaded from an wrapper with flashVars and then init. So now I can access the flashVars in my Application with - for example: variable = Application.application.parameters.sampleParameter !
That's in my Application.
So now, if I use a module and want to access the flashVar from that, I can use the following code in my module - for example: variable = parentApplication.parameters.sampleParameter !
And that's all for this little problem.
I use this for an relative path to the Host. My PHP save the HostURL as an FlashVar in the wrapper and call the mainApp. Now the mainApp and any Modules in there know where to call the other PHP-files with an HTTPService and request dbData which return as XML. I setup my hole application in one settings.php in which the HostURL is defined. So now if this changes, I don't need to recompile my App and Modules.
Thanks for answer and maybe my response could help another one with the same problem ;-)
Steven
Its very Urgent As My Next Projects Most Important need is to Crop the images.
Please....Please....Please....Please.... Help Me Out.....
I got a problem and need some help!
I init my mainApp with flashVars in the wrapper. Then I load a module in tha mainApp and want the module to get access the flashVars-String. I don't know how?
In other words, how can I get access to the functions or variables of the main-application within a module? Because, tryin the application.application.parameters failed, because its a module with the tag: mx:module !
Thanks, Steven
http://blogs.adobe.com/flexdoc/modules/
hth,
matt horn
flex docs
Nice posts. Thank you.
In other words, how can I get access to the functions or variables of the main-application within a module?
just found my mistake. I forgot to add the modLoader as a child of my application.
Sorry for this!
PDF about Modular Application is great start point for learners.
All I can think of is to keep passing that reference down to each subsequent child, but that seems a bit kludgy.
sory
I've never understood why Adobe released a new version of Flex and Flex Builder but named the version 2.0.1 instead of something like 2.5.
http://www.aydincelikkapi.com
at ModuleInfo/completeHandler()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\modules\ModuleManager.as:671]
I am getting this error. I cannot understand why. I have a very simple module with just a panel.
This is my module -pieModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"; creationComplete="initPieModule()" layout="absolute" width="400" height="300">
<mx:Script><![CDATA[
import mx.controls.Alert;
public function initPieModule():void {
Alert.show("In Pie Module");
}
]]></mx:Script>
<mx:Panel title="Pie Chart" height="100%" x="390" y="0" id="PnlPieChart" paddingBottom="10" paddingLeft="10" paddingRight="10">
</mx:Panel>
</mx:Module>
And this where I am calling it from
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; backgroundColor="green" height="100%" width="100%">
<mx:RemoteObject showBusyCursor="true" id="NGGraphRequest"
destination="ColdFusion"
source="FlexProjects.NGData">
<mx:method name="getNGGraphList" result="returnGraphHandler(event)" fault="mx.controls.Alert.show(event.fault.faultString)"/>
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import flash.events.Event;
import mx.collections.ArrayCollection;
import mx.utils.ArrayUtil;
import mx.controls.Alert;
import mx.binding.utils.*;
import mx.utils.ObjectUtil;
import mx.charts.ChartItem;
import mx.charts.HitData;
import mx.charts.chartClasses.IAxis;
import mx.charts.chartClasses.Series;
import mx.charts.series.ColumnSet;
import mx.charts.series.items.ColumnSeriesItem;
import mx.utils.StringUtil;
import mx.modules.*;
import mx.events.ModuleEvent;
import mx.managers.SystemManager;
public var lcModule:IModuleInfo;
public var lcm:Object;
public var firsttime:Boolean;
[Bindable]
private var graphData:ArrayCollection;
public var headerid:int;
private var gindex:int;
[Bindable]
public var dpGraph:ArrayCollection;
[Bindable]
public var dpRowData:Object;
//public var dpRowData:Object;
public function initGraph():void
{
NGGraphRequest.getNGGraphList(headerid);
}
private function returnGraphHandler(e:ResultEvent):void
{
graphData = e.result as ArrayCollection;
//Alert.show("array length is " + graphData.length);
for (gindex=0;gindex<=graphData.length-1; gindex++) {
//Alert.show("Graphtype is " + graphData[i].GRAPHTYPE);
switch(graphData[gindex].GRAPHTYPE) {
case "LINE GRAPH":
case "STACKED LINE CHART":
//lcModule = ModuleManager.getModule("LineChartModule.swf");
//lcModule.addEventListener("ready", getLCModuleInstance);
//lcModule.load();
//if (firsttime == true) {
var m1:ModuleLoader = new ModuleLoader();
var gid:int = graphData[gindex].GRAPHID;
m1.url = "LineChartModule.swf";
m1.addEventListener(ModuleEvent.READY, function (e:ModuleEvent) : void {
LCListener(e,gid,gindex,m1); });
m1.addEventListener(ModuleEvent.ERROR, LCListenerErr);
m1.loadModule();
this.addChildAt(m1,gindex);
//this.addChild(m1);
//}
break;
case "COLUMN CHART":
var m2:ModuleLoader = new ModuleLoader();
var gid_cc:int = graphData[gindex].GRAPHID;
m2.url = "ColChartModule.swf";
m2.addEventListener(ModuleEvent.READY, function (e:ModuleEvent) : void {
CCListener(e,gid_cc,gindex,m2); });
m2.addEventListener(ModuleEvent.ERROR, CCListenerErr);
m2.loadModule();
this.addChildAt(m2,gindex);
break;
case "PIE CHART":
var mPie:ModuleLoader = new ModuleLoader();
mPie.url = "PieModule.swf";
mPie.addEventListener(ModuleEvent.READY,pieListener);
//mPie.loadModule();
this.addChild(mPie);
/*
var m3:ModuleLoader = new ModuleLoader();
var gid_pie:int = graphData[gindex].GRAPHID;
Alert.show("graphid - pie is " + gid_pie);
Alert.show("In Graph Component " + ObjectUtil.toString(dpRowData));
m3.url = "PieChartModule.swf";
m3.addEventListener(ModuleEvent.READY, function (e:ModuleEvent) : void {
PieListener(e,gid_pie,gindex,m3); });
m3.addEventListener(ModuleEvent.ERROR, PieListenerErr);
m3.loadModule();
this.addChild(m3);
*/
break;
case "STACKED COLUMN CHART":
break;
}
}
}
public function LCListenerErr(e:ModuleEvent):void {
Alert.show("Errror in Line Chart Module");
}
public function CCListenerErr(e:ModuleEvent):void {
Alert.show("Errror in Column Chart Module");
}
public function PieListenerErr(e:ModuleEvent):void {
Alert.show("Errror in PieChart Module" + e.errorText);
}
public function pieListener(e:ModuleEvent):void{
Alert.show("Pie chart module is ready");
}
/*
public function PieListener(e:ModuleEvent,graphid:int,graphinx:int,m3:ModuleLoader):void {
//Alert.show("In Graph Component " + ObjectUtil.toString(dpRowData));
var ichild3:* = m3.child as IPieChart;
if(ichild3 != null) {
ichild3.setpieDataProvider(dpRowData);
ichild3.setpieGraphid(graphid);
ichild3.setpieGraphinx(graphinx);
}
//Alert.show("In ready event listener");
}
*/
public function LCListener(e:ModuleEvent,graphid:int,graphinx:int,m1:ModuleLoader):void {
var ichild:* = m1.child as ILineChart;
if(ichild != null) {
ichild.setlcDataProvider(dpGraph);
ichild.setlcGraphid(graphid);
ichild.setlcGraphinx(graphinx);
}
//Alert.show("In ready event listener");
}
public function CCListener(e:ModuleEvent,graphid:int,graphinx:int,m2:ModuleLoader):void {
//Alert.show("In Grph Componenet " + ObjectUtil.toString(dpRowData));
var ichild:* = m2.child as IColChart;
if(ichild != null) {
ichild.setccDataProvider(dpRowData);
ichild.setccGraphid(graphid);
ichild.setccGraphinx(graphinx);
}
//Alert.show("In ready event listener");
}
]]>
</mx:Script>
</mx:Canvas>
Please let me know why I get this error. And another point to note - this error is sporadic. Sometimes it goes through and sometimes it doesn't.
Thanks
I'm beginner in using flex n also i do not know much about action scripts
I wonder if any one cud show me how i can load my generated application from a database??
i made my database using wamp, phpmyadmin.
many thanx in advance.