MVC与FLEX的简单例子

MVC与FLEX的简单例子

2008-06-01 17:31

pureMVC的官方网站:http://puremvc.org/
这里仅做一些简单的提示.
PureMVC是由controller、Model 、view 轻量级的mvc，由Facade(为子系统中的接口提供一个一致的界面)实现统一管理。pureMVC中的command、meditor、proxy和controller、view 、Model 双双协作.command、meditor、proxy,Notifiter
都实现了INotifiter,参与处理Notification.pureMVC包含非常详细的文档,大家有兴趣的话,到官方网站下载一些例子测试和学习.

关于MVC讲详细了可以写本厚厚的书，这里简单可以理解为：

M-Model 负责装载数据和数据行为

V-View 定义界面显示

C-Control 控制各种行为动作，更新M和V

要做出松耦合的健壮程序，就必须保证M的独立性，使界面和数据分离。要做到这一点就要使用单例模式（限制一个类只能有一个实例），让M在全局保持唯一，当M数据变更时，所有监听M的V都同步更新。

MVC和FLEX是天生一对，以下此例就显示了他们的无缝结合

model/ModelLocator.as

package model{
import flash.events.EventDispatcher;
import vo.User;
[Bindable]
public class ModelLocator extends EventDispatcher{  
   private static var _instance:ModelLocator;  
   public var user:User
   public static const USERNAMECHANGE:String="usernameChange"  
public static function getInstance():ModelLocator{
    if(_instance == null){
     _instance = new ModelLocator();
    }
    return _instance;
   }
}
}

这个类中定义了一个静态方法getInstance和静态变量_instance——这个类的唯一实例对象，要取得这个对象，必须调用getInstance方法，而无法通过构造函数new出来，除了第一次调用时会调用构造函数，创建实例，以后每次调用都只会返回该实例而不再创建新实例从而保证了M的唯一性。

view/UserPanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="234" height="188" >
<mx:Script>
   <![CDATA[
    import model.ModelLocator
    //设置对象绑定  
    [Bindable]
    public var instance:ModelLocator = ModelLocator.getInstance();
   
   
   ]]>
</mx:Script>
<mx:Label x="10" y="10" text="{instance.user.user_name}" />

</mx:Panel>

ModelExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:view="view.*" creationComplete="initApp()" >
<mx:Script>
   <![CDATA[
    import vo.User;
    import control.Control;
    import model.ModelLocator
    internal var ctr:Control = new Control();
  
    internal function doChange():void{    
    ctr.changeUsername("wlx")
    }
    [Bindable]
    public var instance:ModelLocator = ModelLocator.getInstance();
    internal function initApp():void{
     var obj:Object=new Object()
     obj.user_name="tim"
     var user:User=new User()
     user..fill(obj)
    instance.user=user
   instance.addEventListener(ModelLocator.USERNAMECHANGE,handler)
    }
    internal function handler(e:Event):void{
    userpanel.title=e.type
    }
   ]]>
</mx:Script>
<mx:Button x="348" y="25" label="Button" click="doChange()"/>
<view:UserPanel id="userpanel" x="26" y="25" title="Event info">
</view:UserPanel>

</mx:Application>

control/Control.as

package control
{

import flash.events.Event;
import vo.User
import model.ModelLocator;
public class Control
{
   internal var theModel:ModelLocator = ModelLocator.getInstance()

   public function Control()
   {
   }
   public function changeUsername(n:String):void{
   theModel.dispatchEvent(new Event(ModelLocator.USERNAMECHANGE))
   theModel.user.user_name=n
   }

}
}

vo/User.as

package vo{
[Bindable]
public class User {
   public var user_name:String
   public function fill(obj:Object):void{
    for(var i: * in obj){   
     this[i]=obj[i]   
    }  
   }
}
}

数据结构采用官方推荐的Value Object可以支持数据绑定，如果是Object或数组就没有绑定这么便利了

当属性很多时，用fill方法可以快速赋值