I’ve been playing around with Flex Modules lately and thought I’d post this. It’s pretty basic, but it is kind of a “my first module” type experiment. I tried to show a few different things including: calling a module’s methods from the parent application as well as setting properties in the parent application from the loaded module.
If you haven’t looked at modules in Flex yet, I highly encourage you to check out the Flex Doc Team blog at http://blogs.adobe.com/flexdoc/, where you can find their latest version of the “Creating Modular Applications” chapter (blog entry, PDF).
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/06/building-a-simple-flex-module/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.VideoEvent;
[Bindable]
private var moduleTitle:String;
private var vm:VideoModule;
private function init():void {
vm = VideoModule(m1.child);
moduleTitle = vm.getModuleTitle();
}
private function stopVideo():void {
vm.stopVideo();
}
private function playPauseVideo():void {
vm.playPauseVideo();
}
]]>
</mx:Script>
<mx:Panel id="panel"
title="Module: {moduleTitle}">
<mx:ModuleLoader id="m1"
url="VideoModule.swf"
ready="init();"/>
<mx:ControlBar>
<mx:Button label="Play/Pause" click="playPauseVideo()" />
<mx:Button label="Stop" click="stopVideo()" />
<mx:Spacer width="100%" />
<mx:Label id="playheadTime" fontWeight="bold" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/06/building-a-simple-flex-module/ -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%">
<mx:Script>
<![CDATA[
public function getModuleTitle():String {
return "Video Module";
}
/* Stop the video playback. */
public function stopVideo():void {
videoDisplay.stop();
}
/* If the video is currently playing, pause playback. Otherwise, resume playback. */
public function playPauseVideo():void {
if (videoDisplay.playing) {
videoDisplay.pause();
} else {
videoDisplay.play();
}
}
private function updateVideoTime():void {
/* If the playheadTime is 0, the DateFormatter returns an empty string.
To work around this we can default the time to 10ms if the playheadTime
is zero. */
var pTime:Date = new Date(videoDisplay.playheadTime * 1000 || 10);
var tTime:Date = new Date(videoDisplay.totalTime * 1000);
parentApplication.playheadTime.text = dateFormatter.format(pTime) + " / " + dateFormatter.format(tTime);
}
]]>
</mx:Script>
<mx:DateFormatter id="dateFormatter"
formatString="NN:SS" />
<mx:VideoDisplay id="videoDisplay"
source="http://www.helpexamples.com/flash/video/cuepoints.flv"
playheadUpdate="updateVideoTime();" />
</mx:Module>
View source is enabled in the following example.
Easy enough, but what’s the difference/advantage of doing this vs. just creating a custom class?
I’m wondering the same thing as the previous poster, what’s the difference/advantage of doing this vs. just creating a custom class in an mxml/AS file?
I want to develop these modules as different projects. I’ve been looking for how this is done and how you would reference the different modules but I’m not having much luck. Any suggestions?
I’ll take the liberty of answering the first two questions, which are important ones: why use Modules over classes or componenets?
A module is compiled separately, as a unique SWF and is then loaded, as needed, by the shell Application. The immediate reason one would go to the trouble to work this way is that modules do not contribute to the file size of the main SWF — they are loaded progressively, much in the way we used to load additional SWFs on-the-fly in Flash with loadMovie().
What is the advantage of modules over just loading an application as a swf - which can be developed and tested alone, etc.
你好，我来自中国，看了你写的觉得很好，但是我是属于初学者，希望能和你交个朋友，以后互相学习学习，谢谢哦！
I want to add effects when a module loads . like a wipe left .Is it possible .Can you help me out on this
prasanth,
Does this snippet work for you?
<mx:WipeDown id="wipeEffect" duration="6000" /> <mx:Panel id="panel" title="Module: {moduleTitle}"> <mx:ModuleLoader id="m1" url="VideoModule.swf" ready="init(); wipeEffect.play([m1]);" />Basically it uses the
readyevent to play a wipe effect.Peter
To answer Joe’s question:
Module vs. Application
I turned the VideoModule into an application by just changing the module tags and then loaded it via a swf loader in the main.mxml application.
What happens is your module and main application aren’t able to talk to each other as easily anymore. Not to mention the size of a module is about 10 times smaller than a application. You have to load all the application framework if you swf load an app but you don’t have to do that if you load a module.
Size differences:
[SWF] VideoApp.swf - 624,958 bytes after decompression
[SWF] ApplicationLoader.swf - 681,000 bytes after decompression
[SWF] VideoModule.swf - 63,301 bytes after decompression
[SWF] main.swf - 670,323 bytes after decompression
You can also use modules as building blocks in one application to make a modular application.
Hey thanks a lot Peter for the snippet .It worked for me.
Thank you for this very handy example. It was very useful for me while implementing Flex modules.
Is there a way to load an MXML module compiled SWF into an actionscript only project?