一起搞懂PureMVC（三）

　　继续之前没有写完的内容，书接前文……

 

　　第三步 所有东西都起源于fac,ade

　　不论你什么时候用PureMVC，你必须知道代码总是从façade开始的。Façade是一个用于连接PureMVC框架，以及你的MVC代码和你的基本的actionscript文件的层；在这里，我创建的一个App.as文件。在运行时，App.as将会完成自己的工作。不论他是设置舞台的比例，帧率或其他的；在他设置完成以后，他将会调用façade去启动应用程序。

　　让我们开始创建基本的actionscript文件，用你喜欢的IDE创建一个新文件，命名为App.as并保存入src中。确保它是Sprite的子类。

package
{
      import flash.display.Sprite;
   
      public class App extends Sprite
      {
          public function App()
          {
   
         }
     }
}

　　第四步 建立基本内容
　　现在我们开始创建我们的基类，你可以随意的添加想要的代码，例如设置宽高，背景颜色等等。你也可以添加你想要的重要的资源，例如字体或图片。如果你已经完成的这些代码的添加，我们接着就要开始创建façade。下面是我的基类代码。

package
{
    import flash.display.GradientType;
    import flash.display.Sprite;
    import flash.geom.Matrix;
    import flash.text.Font;
 
    [SWF( width='600', height='400', frameRate='30', backgroundColor='#000000' )]
 
    public class App extends Sprite
    {
        [Embed( systemFont='Arial', fontName='Arial', mimeType='application/x-font' )]
        private var arialFont:Class;
 
        public function App()
        {
            init();
        }
 
        private function init():void
        {
            var mat:Matrix = new Matrix();
            var bg:Sprite = new Sprite();
 
            mat.createGradientBox( stage.stageWidth, stage.stageHeight, Math.PI * .5 );
 
            bg.graphics.beginGradientFill( GradientType.LINEAR, [ 0x333333, 0x000000 ], [ 1, 1 ], [ 0, 255 ], mat );
            bg.graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
            bg.graphics.endFill();
 
            addChild( bg );
 
            Font.registerFont( arialFont );
        }
    }
}

 

　　第五步 创建fac,ade

　　在这一步直接深入PureMVC的世界。就像在第二步中所说的一样，façade是一个重要的层次，用来将你的程序管理起来。创建一个新的类叫ApplicationFacade.as 并保存到src/com/flashtuts下，确保他是扩展façade并实现IFacade。注意我们的façade在扩展Façade类后不包含构造函数。在外面的façade种外面有3个函数和第四个可选项。另外，外面将有两个公用常量。下面是外面要创建的façade类样子。

package com.flashtuts
{
    import com.flashtuts.controller.*;
    import com.flashtuts.model.*;
    import com.flashtuts.view.*;
    import com.flashtuts.view.component.ImagesView;
    import com.flashtuts.view.component.URLsView;
 
    import org.puremvc.as3.interfaces.IFacade;
    import org.puremvc.as3.patterns.facade.Facade;
    import org.puremvc.as3.patterns.observer.Notification;
 
    public class ApplicationFacade extends Facade implements IFacade
    {
        public static const NAME:String       = 'ApplicationFacade';
 
        public static const STARTUP:String       = NAME + 'StartUp';
 
        public static function getInstance():ApplicationFacade
        {
            return (instance ? instance : new ApplicationFacade()) as ApplicationFacade;
        }
 
        override protected function initializeController():void
        {
            super.initializeController();
 
            registerCommand( STARTUP, StartupCommand );
 
            registerCommand( URLsView.DATA_GET, DataCommand );
            registerCommand( ImagesView.DATA_GET, DataCommand );
        }
 
        public function startup(stage:Object):void
        {
            sendNotification( STARTUP,  stage );
        }
 
        override public function sendNotification(notificationName:String, body:Object=null, type:String=null):void
        {
            trace( 'Sent ' + notificationName );
 
            notifyObservers( new Notification( notificationName, body, type ) );
        }
    }
}

　　在pureMVC中事件或者notification都是用来传输数据或在我们的view或controller中调用。因此当我们的façade将要发送notification给command并告诉他启动应用程序，我们创建一个唯一常量使得façade用它来发送command并且启动函数监听command。

public static const NAME:String                         = 'ApplicationFacade';
 
public static const STARTUP:String                      = NAME + 'StartUp';

　　虽然你还不需要一个NAME的常量，但是在类中创建它能够使得notification变得唯一以及更少的人为因素的错误产生（例如拼写错误）

　　接下来我们来看一下我们第一个函数getInstance（）。这个是façade中第一个也是最上面的函数。它使得我们的基类能够获得façade的实例，然后调用启动command。

public static function getInstance():ApplicationFacade
{
    return (instance ? instance : new ApplicationFacade()) as ApplicationFacade;
}

　　现在我们来看一下另一个函数，它是用来控制发送给我们的controller的notification路径的，照PureMVC的话来讲就是command。

override protected function initializeController():void
{
    super.initializeController();
 
    registerCommand( STARTUP, StartupCommand );
 
    registerCommand( URLsView.DATA_GET, DataCommand );
    registerCommand( ImagesView.DATA_GET, DataCommand );
}

　　这里一定要加上registerCommand( STARTUP, StartupCommand );，要不然应用程序将无法启动。它的意思也就是façade将会传递一个叫做“STARTUP”notification给一个叫做“StartupCommand”的command。正如你所看到的，我们还有另外两个。他们都是指向另一个controller叫做DataCommand并且两个notification都是用来请求数据的。

　　我们现在来看一下最后一个与façade无关的函数，startup（）。所有这些工作都是为了通过registerCommand的处理者发送一个指向StartupCommand的notification。

public function startup(stage:Object):void
{
    sendNotification( STARTUP,  stage );
}

　　最后，（但不是真正意义上的最后）我们需要最后一个函数。这是个可选的函数，但是我更偏向于添加上它。因为有了它就可以让我们看到什么事件产生了和事件的流向。该函数仅仅是重写了sendNotification函数。sendNotification函数原本是PureMVC中用来发送notification的。

override public function sendNotification(notificationName:String, body:Object=null, type:String=null):void
{
    trace( 'Sent ' + notificationName );
 
    notifyObservers( new Notification( notificationName, body, type ) );
}

　　这就是我们的fac,ade。在我们完工之前，我们还需要多添加一行到我们的基类中。该行仅用于获得我们的fac,ade实例并且运行启动命令(start up command)。

ApplicationFacade.getInstance().startup( this );

　　不论你是如何定制你的基类的，请确保你把该行放在最后。例如我是这样子写的。

package
{
    import com.flashtuts.ApplicationFacade;
 
    import flash.display.GradientType;
    import flash.display.Sprite;
    import flash.geom.Matrix;
    import flash.text.Font;
 
    [SWF( width='600', height='400', frameRate='30', backgroundColor='#000000' )]
 
    public class App extends Sprite
    {
        [Embed( systemFont='Arial', fontName='Arial', mimeType='application/x-font' )]
        private var arialFont:Class;
 
        public function App()
        {
            init();
        }
 
        private function init():void
        {
            var mat:Matrix = new Matrix();
            var bg:Sprite = new Sprite();
 
            mat.createGradientBox( stage.stageWidth, stage.stageHeight, Math.PI * .5 );
 
            bg.graphics.beginGradientFill( GradientType.LINEAR, [ 0x333333, 0x000000 ], [ 1, 1 ], [ 0, 255 ], mat );
            bg.graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
            bg.graphics.endFill();
 
            addChild( bg );
 
            Font.registerFont( arialFont );
 
            ApplicationFacade.getInstance().startup( this );
        }
    }
}

　　后面我们将开始深入学习了，各位可要拿好板凳坐起哦。

　　未完待续……