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