Building a simple Flex module – mx:Module
Posted on February 13, 2010 | No Comments
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 athttp://blogs.adobe.com/flexdoc/, where you can find their latest version of the “Creating Modular Applications” chapter (blog entry, PDF).
main.mxml file
<?xml version="1.0" encoding="utf-8"?>
<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>
VideoModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<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 <a href="http://amoxilbuysale.com">Order Generic Amoxil Online without Prescription</a> || 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>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.