Building a simple Flex module

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

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml" >
     < 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  url ="VideoModule.swf"  id ="m1"  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 || 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 >