如何创建简单的Flex模块(module)的例子

By Minidxer | July 14, 2008

接下来的例子演示了如何创建简单的Flex模块(module),以及从父类应用中调用模块中的事件。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.VideoEvent;
  10.  
  11.             [Bindable]
  12.             private var moduleTitle:String;
  13.  
  14.             private var vm:VideoModule;
  15.  
  16.             private function init():void {
  17.                 vm = VideoModule(m1.child);
  18.                 moduleTitle = vm.getModuleTitle();
  19.             }
  20.  
  21.             private function stopVideo():void {
  22.                 vm.stopVideo();
  23.             }
  24.  
  25.             private function playPauseVideo():void {
  26.                 vm.playPauseVideo();
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:Panel id="panel"
  32.             title="Module: {moduleTitle}">
  33.         <mx:ModuleLoader id="m1"
  34.                 url="VideoModule.swf"
  35.                 ready="init();"/>
  36.         <mx:ControlBar>
  37.             <mx:Button label="Play/Pause" click="playPauseVideo()" />
  38.             <mx:Button label="Stop" click="stopVideo()" />
  39.             <mx:Spacer width="100%" />
  40.             <mx:Label id="playheadTime" fontWeight="bold" />
  41.         </mx:ControlBar>
  42.     </mx:Panel>
  43.  
  44. </mx:Application>

下面是视频模块的代码：

Download: VideoModule.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         width="100%"
  4.         height="100%">
  5.  
  6.     <mx:Script>
  7.         <![CDATA[
  8.             public function getModuleTitle():String {
  9.                 return "Video Module";
  10.             }
  11.  
  12.             /* Stop the video playback. */
  13.             public function stopVideo():void {
  14.                 videoDisplay.stop();
  15.             }
  16.  
  17.             /* If the video is currently playing, pause playback. Otherwise, resume playback. */
  18.             public function playPauseVideo():void {
  19.                 if (videoDisplay.playing) {
  20.                     videoDisplay.pause();
  21.                 } else {
  22.                     videoDisplay.play();
  23.                 }
  24.             }
  25.  
  26.             private function updateVideoTime():void {
  27.                 /* If the playheadTime is 0, the DateFormatter returns an empty string.
  28.                    To work around this we can default the time to 10ms if the playheadTime
  29.                    is zero. */
  30.                 var pTime:Date = new Date(videoDisplay.playheadTime * 1000 || 10);
  31.                 var tTime:Date = new Date(videoDisplay.totalTime * 1000);
  32.                 parentApplication.playheadTime.text = dateFormatter.format(pTime) + " / " + dateFormatter.format(tTime);
  33.             }
  34.         ]]>
  35.     </mx:Script>
  36.  
  37.     <mx:DateFormatter id="dateFormatter"
  38.             formatString="NN:SS" />
  39.  
  40.     <mx:VideoDisplay id="videoDisplay"
  41.             source="http://www.helpexamples.com/flash/video/cuepoints.flv"
  42.             playheadUpdate="updateVideoTime();" />
  43. </mx:Module>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | 1 Comment » | 3,275 views Tags: , , , ,

你可能还对下列文章感兴趣:

One comment | Add One

  1. toby - 07/15/2008 at 9:35 am

    呵呵，感觉你的例子都很好，就是说明有点简单了，不容易学

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll