翼灵AS程序员之路 - 教程

MVC

sstpc@163.com (jacky) — Mon, 23 Mar 2009 14:07:19 +0800

有关MVC的介绍，下文是转载！出于arrowyoung

MVC模式是"Model-View-Controller"的缩写，中文翻译为"模式-视图-控制器"。
MVC应用程序总是由这三个部分组成。Event(事件)导致Controller改变Model或View，或者同时改变两者。只要Controller改变了Models的数据或者属性，所有依赖的View都会自动更新。

MVC模式能使界面（Viwe）和数据（Model）能有效的分开，由控制器（Controller）去控制。

我们现在以一个比较简单的电子时钟的例子来看看如何使用MVC模式来架构我们的程序.

首先我们来看一下Model,Model按照我的理解是数据,就是所有的共用数据都是存储在Model里面的,时钟里有这样的数据,小时,分钟,秒;现在我们来建立一个Model,ModelLocator.as：

package net.smilecn.clock.model{

    import flash.events.EventDispatcher;
    import flash.events.Event;

    public class ModelLocator extends EventDispatcher{

        private var _hour:String;

        private var _minutes:String;

        private var _second:String;

        public function ModelLocator():void{
        }

        public function get hour():String{
            return _hour;
        }

        public function set hour(value:String):void{
            _hour = value;
            dispatchEvent(new Event("changeHour"));
        }

        public function get minutes():String{
            return _minutes;
        }

        public function set minutes(value:String):void{
            _minutes = value;
            dispatchEvent(new Event("changeMinutes"));
        }

        public function get second():String{
            return _second;
        }

        public function set second(value:String):void{
            _second = value;
            dispatchEvent(new Event("changeSecond"));
        }

    }

}

这个代码应该会好懂,这里ModelLocator继承了EventDispatcher这个类,继承这个类的原因是ModelLocator需要用dispatchEvent发消息出去。再来看一下Controller.as这个类：

package net.smilecn.clock.control{

    import flash.utils.Timer;
    import flash.events.TimerEvent;

    import net.smilecn.clock.model.ModelLocator;

    public class Controller{

        private var _model:ModelLocator;
        private var _timer:Timer;

        public function Controller(model:ModelLocator):void{
            _model = model;
        }

        public function startTime():void{
            _timer = new Timer(1000,0);
            _timer.addEventListener(TimerEvent.TIMER,timerHandler);
            _timer.start();
        }

        private function timerHandler(event:TimerEvent):void{
            var nowDate:Date = new Date();
            _model.hour = nowDate.getHours()>9?String(nowDate.getHours()):"0"+nowDate.getHours();
            _model.minutes = nowDate.getMinutes()>9?String(nowDate.getMinutes()):"0"+nowDate.getMinutes();
            _model.second = nowDate.getSeconds()>9?String(nowDate.getSeconds()):"0"+nowDate.getSeconds();
        }

    }
}

这个类中我们用到了Timer类，因为我们用的是时钟，所以需要一个定时器，Timer是一个很好的定时器，Timer(1000,0)，这里1000是指1000毫秒，就是1秒钟触发一次定时钟，0表示次数，这里0是无限次，如果是大于0的数就是这个数的次数。侦听TimerEvent.TIMER事件就是1秒钟去执行一次timerHandler方法，timerHandler方法的功能是得到当前的时间然后去改变_model里面的值，再看一下ModelLocator.as里面的代码，当hour,minutes,second的值改变的时候就会去发消

息出去，那么谁来侦听这些消息呢，当然是View,现在来看下View.as：

package net.smilecn.clock.view{

    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;

    import net.smilecn.clock.model.ModelLocator;
    import net.smilecn.clock.control.Controller;

    public class View extends Sprite{

        private var _model:ModelLocator;
        private var _controller:Controller;
        private var time_txt:TextField;

        public function View(model:ModelLocator,controller:Controller):void{
            _model = model;
            _controller = controller;
            time_txt = new TextField();
            addChild(time_txt);
            _model.addEventListener("changeHour",changeTimeHandler);
            _model.addEventListener("changeMinutes",changeTimeHandler);
            _model.addEventListener("changeSecond",changeTimeHandler);

            _controller.startTime();
        }

        private function changeTimeHandler(event:Event):void{
            time_txt.text = _model.hour+" : "+_model.minutes+" : "+_model.second;
        }

    }
}

在View里面，侦听了_model的事件，所以当收到数据改变的消息后，将_model的数据显示到文本框中。

要使程序运行，我们现加一个文档类：

package net.smilecn.clock{

    import flash.display.Sprite;

    import net.smilecn.clock.model.ModelLocator;
    import net.smilecn.clock.control.Controller;
    import net.smilecn.clock.view.View;

    public class Clock extends Sprite{

        private var _model:ModelLocator;
        private var _controller:Controller;
        private var _view:View;

        public function Clock():void{
            _model = new ModelLocator();
            _controller = new Controller(_model);
            _view = new View(_model,_controller);
            addChild(_view);
        }

    }
}

在文档类中建立了ModelLocator、Controller、View的实例，ModelLocator产生的实例被传到了Controller和View中，这样就保证了Controller和View使用是相同的ModelLocator，其实要达到这种效果不用这种方法也可以，可以用到上一节中用到的单例模式。

这里作一个总结，Controller是一个控制者，它去改变ModelLocator，ModelLocator的数据被改变后去更新View，使我们能看到数据。如果界面上有一些按钮交互，那么就应该是Controller去响应View里的按钮交互，响应后去通过一些操作后改变ModelLocator,ModelLocator数据改变后通知View去改变界面。

有人可以会说这个程序用更少的代码就可以完成，但这里只是演示程序的架构，当程序很大时，好的架构会使程序更清晰。

单例模式

sstpc@163.com (jacky) — Mon, 23 Mar 2009 13:27:52 +0800

起初在讨论如何访问文档类的时候，九月给了我一个mController的类，之后我又看了一篇博文原来这叫单例模式。
C++,JAVA 会用到一些设计模式，设计模式中最基本的一种就是单例模式。先来看下这个mController 类

package
{
import flash.events.Event
import flash.events.EventDispatcher
public class mController extends EventDispatcher
{
//这个对象实例
private static var instance:mController
/**
* 返回这个类的实例，做为静态方法返回实例。这样保证这个实例是唯一
*/
public static function getInstance():mController {
if (instance == null)instance= new mController();
return instance;
}
private var _root:*
public function mController()
{
}
public function set root(value:*):void
{ _root = value
//这里还可以设置指定文档类后还能做些什么操作
}
public function get root():*{ return _root; }
}
}

此类中定义的root指向了一个Main的类。
应用如下：
public function Main():void
{
mController.getInstance().root = this

}

在其他类中我需要访问到这个Main里的方法。只需要 "mController.getInstance().root.方法" 即可，因为mController.getInstance()已经指向了Main。
单例模式的意思是不管怎么样都只产生一个实例，在这里我们加了一个getInstance的方法，一个instance的静态变量，getInstance也是静态的，静态的作用在于我们可以用类名.方法名来访问这个方法
单例模式的好处在于，不管在多少个类中产生实例，都是共用一个.这样只要一处改变mController.getInstance().root ，其他地方就可以共享这一改变后的数据。

getDefinitionByName

sstpc@163.com (jacky) — Mon, 23 Mar 2009 13:24:17 +0800

for(var i=1;i<=20;i++){
                var ClassReference:Class = getDefinitionByName("Mc"+i) as Class;
                var instance:MovieClip = new ClassReference();
                addChild(instance)
            }

当你要链接库中的mc1~mc20时。。getDefinitionByName ^o^

遮罩类

sstpc@163.com (jacky) — Fri, 20 Feb 2009 12:29:37 +0800

package com.sprite{
//绘制遮罩;
import flash.display.Sprite;
public class Mask extends Sprite
{
public function Mask(w:Number,h:Number){
with(this.graphics)
{
beginFill(0x000000);
drawRect(0,0,w,h);
endFill();
}
}
}
}

应用：
import com.sprite.Mask;
var _maskMC: Mask= new Mask(w,h);
mc.mask = _maskMC;
this.addChild(_maskMC)

不要小看这样的类，管理好了对你的项目省心不少。

加载类2

sstpc@163.com (jacky) — Thu, 19 Feb 2009 12:53:24 +0800

下面是根据上节完善

package com.sprite{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.*;
import flash.net.URLRequest;
import flash.text.*;

public class DisSwf extends Sprite{
  private var label:TextField;
  private var format:TextFormat;
public function DisSwf(){
label=new TextField();
format=new TextFormat();
format.font="微软雅黑"
format.color=0xFFCC00;
format.size=12;
label.autoSize=TextFieldAutoSize.LEFT;
label.selectable=false;
}
public function loadSwf(url:String)
{
  while(this.numChildren > 0){
    this.removeChildAt(0)
   }//如果已经有影片存在先删除
  if(url =="") return;//没有地址则返回
  var loader:Loader=new Loader();
  var _urlRequest:URLRequest=new URLRequest();
  _urlRequest.url=url;
  loader.load(_urlRequest);
  loader.alpha=0;
  this.addChild(loader)//这里只是把loader添加到DisSwf显示列表，到了舞台上不要忘了把DisSwf添加到舞台显示列表
  if(! this.contains(label)){
  this.addChild(label)//加载百分比的文本，判断是否存在不存在时显示到DisSwf
  }
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
  loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,loading);
  loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadError);
}
private function loading(evt:Event)
{
  label.text="影片已加载："+Math.floor(evt.target.bytesLoaded/evt.target.bytesTotal*100)+"%";
  label.setTextFormat(format);
}
private function loadComplete(evt:Event)
{
  var loader:Loader=evt.target.loader as Loader;
  loader.alpha=1;
  this.removeChild(label);
}
private function loadError(evt:Event)
{
  label.text="LOAD ERROR"
}
}
}

用法：

var disSwf:DisSwf=new DisSwf();
disSwf.loadSwf("***");
disSwf.x=disSwf.y=150;
addChild(disSwf)

加载类1

sstpc@163.com (jacky) — Thu, 19 Feb 2009 09:30:13 +0800

//加载封装方法
function loadswf(swfurl:String):Loader
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,ProgressHandler);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadSwfComplete);
loader.load(new URLRequest(swfurl));
return loader;//为便于其他地方对loader的引用
}
function ProgressHandler(evt:ProgressEvent){
var loaded:Number = evt.target.bytesLoaded / evt.target.bytesTotal;
}

function loadSwfComplete(evt:Event){
evt.target.removeEventListener(ProgressEvent.PROGRESS,ProgressHandler);
evt.target.removeEventListener(Event.COMPLETE,loadSwfComplete);
}

/*应用：
var loader:Loader=loadswf("***");
mc.addChild(loader)*/

下节看下我常用的swf加载类。

XML解析类

sstpc@163.com (jacky) — Wed, 18 Feb 2009 17:52:32 +0800

以上是我们给出的XML结构，3.0中解析XML再也不像2.0那样繁琐了（不过我有和3.0一样解析的方便类）

下面是我们的XML解析类，本系列教程主要针对2.0转3.0的朋友，所以不会逐行解释

package com.net
{
import flash.events.*;
import flash.net.*;
import com.event.MyEvent;//这里是我们上节自定义的事件扩展类，为什么要用到他呢。因为3.0中事件机制类与类之间不能随便传参数，跟2.0不一样了。通常解析所得的数据要传递的并不是在本类中；
public class ReadXml extends EventDispatcher//这里为什么要继承EventDispatcher，能理解吗？不能的话往下看
{
  public function ReadXml(serveURL:String):void
  {
   var _urlLoader=new URLLoader();
   var _urlRequest=new URLRequest(serveURL);
   _urlLoader.load(_urlRequest);
   _urlLoader.addEventListener(Event.COMPLETE,loadComplete);
  }
  private function loadComplete(evt:Event)
  {
   var xml:XML=new XML(evt.target.data);
   var myEvent:MyEvent = new MyEvent();//实例化MyEvent
   var arr:Array = new Array();//通常解析的XML数据是需要二维数组来保存的，这里XML结构比较简单
   var len:uint=xml.children().length();
   for (var i:uint = 0; i    var obj:Object = new Object();
    obj.id = i;
    obj.thumb = xml.item[i].@thumb;
    obj.img = xml.item[i].@img;
    obj.bigImg = xml.item[i].@bigImg;
    arr.push(obj);
   }
   myEvent.arr = arr;//上节的事件扩展类中的隐式设置变量方法的简用
   dispatchEvent(myEvent);//发送事件，如果需要得到myEvent.arr也就是XML解析后的数据，势必要在需要的地方侦听事件；
   evt.target.removeEventListener(Event.COMPLETE, loadComplete);
  }
}
}

应用：以上XML解析类如果在新建fla类应用的话。如下写：

import com.event.MyEvent;
import com.net.ReadXml;
var readXml:ReadXml = new ReadXml("data.xml");
readXml.addEventListener(MyEvent.over, Complete)//那一开始我们为什么要继承EventDispatcher能理解了吧，当我们实例化ReadXml 的时候，就可以ReadXml .addEventListener
function Complete(evt:MyEvent){
   trace(evt.arr)
   evt.target.removeEventListener(MyEvent.over, Complete);

}

我常用到的事件扩展类

sstpc@163.com (jacky) — Wed, 18 Feb 2009 17:48:30 +0800

package com.event{

import flash.events.Event;

public class MyEvent extends Event{

  public static var over:String = "Complete";
  private var _arr:Array;

  public function MyEvent(){
   super(over)
  }

  public function set arr(p_arr:Array){
   _arr = p_arr;
  }

  public function get arr():Array{
   return _arr;
  }

}
}

代码都很简单不作解释。其实在小项目开发中就会注意到，代码设计规范很少会用到这个扩展类，要不Adobe也不会让我们这样“多此一举”拉。下一节我们讲下这个扩展类的应用；

右键菜单代码类

sstpc@163.com (jacky) — Wed, 18 Feb 2009 17:36:59 +0800

package com.sprite
{
import flash.display.*;
import flash.events.Event;
import flash.events.ContextMenuEvent;
import flash.net.*;
import flash.ui.*;
public class StageInit
{
  public function StageInit(obj:Object):void
  {
   obj.stage.scaleMode=StageScaleMode.NO_SCALE;
   obj.stage.align=StageAlign.TOP_LEFT;
   var menuItem1:ContextMenuItem = new ContextMenuItem("Create By Jacky(翼灵)");
   var menuItem2:ContextMenuItem = new ContextMenuItem("Contact me!");
   menuItem1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,reg);
   menuItem2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,F);
   var myMenu:ContextMenu = new ContextMenu();
   myMenu.hideBuiltInItems();
   myMenu.customItems.push(menuItem1);
   myMenu.customItems.push(menuItem2);
   obj.contextMenu = myMenu;
   function reg(e:ContextMenuEvent)
   {
    var tagetURL:URLRequest = new URLRequest("http://www.dodochen.com");
    navigateToURL(tagetURL);
   }
   function F(e:ContextMenuEvent)
   {
    var tagetURL:URLRequest = new URLRequest("tencent://message/?uin=416545903&Site=magic0&Menu=yes/");
    navigateToURL(tagetURL);
   }
  }
}
}

这段代码的功能实现是，1初始化舞台。不能缩放，左上对齐，然后添加版权信息的右键菜单。包括连接作者个站及与其QQ对话；

应用方法新建3.0fla后在帧上写：
import com.sprite.StageInit;
var staIn:StageInit=new StageInit(this);

尝试下看看吧 enjoy it!