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>