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

Full code after the jump.

View MXML (main.mxml)

<?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>

View MXML (VideoModule.mxml)

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

Tagged as: child, parentApplication