[初级教程]第五节--使用 WeeMVC 第一步
注：本节中所用到的代码为 AS3 版本。
本教程主要针对目前并不了解 MVC 框架的同学。希望对想了解并学习 MVC 框架的同学，特别是想了解 WeeMVC 的同学有一些启发和引导。由于时间仓促，本教程难免有不足之处，欢迎大家批评和指出。
在本教程中我们的主要目标是：1 怎样开始使用 WeeMVC；2 用控制器来改变视图。
一、注册视图和控制器
编写文档类 Main.as。
此文档类用于将类和 Flash 动画做关联，就是在 Flash IDE（Flash CS3或以上版本）的属性面板“文档类”处填写的一个类文件。
/**
* WeeMvc使用实例——第一步之数据如何连通
* 2010-8-24 21:53
* @author:zking
*/
package{
import org.weemvc.as3.control.Controller;
import application.actions.StartupCommand;
import flash.display.MovieClip;
public class Main extends MovieClip {
public function Main() {
init()
}
protected function init() {
//首先添加“初始化 Command”。
Controller.getInstance().addCommand(StartupCommand);
//然后执行此“初始化 Command”。这里的用途是一次性将所有的视图类、命令类、控制类注册到 WeeMVC 系统。
Controller.getInstance().executeCommand(StartupCommand, this);
}
}
}
如上代码中标红的类 StartupCommand 是初始化 WeeMVC 的命令类，代码如下：
/**
* 程序初始化命令
* ibio-develop
* 2009-10-21 18:46
*/
package application.actions {
//导入MVC的命令类包
import org.weemvc.as3.control.ICommand;
import org.weemvc.as3.control.SimpleCommand;
import application.view.*;
//import application.model.*;
import application.actions.*;
import flash.display.MovieClip;
public class StartupCommand extends SimpleCommand implements ICommand {
public override function execute(data:Object = null):void {
viewLocator.initialize(data as MovieClip);
addViews();
addModels();
addCommands();
}
//注册所有的视图类
protected function addViews():void {
viewLocator.addView(FirstView, "mc_firstView");
viewLocator.addView(SecondView, "mc_secondView");
}
//注册所有的模型类
protected function addModels():void {
//modelLocator.addModel(DataProxy);
}
//注册所有的命令类
protected function addCommands():void {
controller.addCommand(ShowFirstCommand);
}
}
}
二、编写第一个视图类
在这里我们有必要来说一下目录结构，如图：
org 里放 weemvc 框架，application 里的目录如下图：
大家可以清晰的看到目录结构了。那么接下来我们就分别编写里面的类了。第一个 view 类 FirstView 当然是要放入 view 文件夹。
/*
*编写的第一个View类 FirstView
* 2010-8-24 21:53
* @author:zking
*/
package application.view {
//导入weemvc的 View
import org.weemvc.as3.view.View;
import application.actions.ShowFirstCommand;
import flash.events.MouseEvent;
import flash.display.MovieClip;
public class FirstView extends View {
protected var m_panel:MovieClip;
//这里的 m_panel 就是指场景中的 mc_firstView 影片剪辑。
public function FirstView(panel:MovieClip){
m_panel = panel;
m_panel.mouseEnabled = false;
trace("m_panel.name", m_panel.name);
m_panel.btn_send.addEventListener(MouseEvent.CLICK, onMouseClickHandler);
}
//当鼠标点击场景中的“发送”按钮的时候，会发送 WeeMVC 事件，执行命令类 ShowFirstCommand，同时将文本框中输入的文本作为参数传递给 ShowFirstCommand
protected function onMouseClickHandler(e:MouseEvent):void {
sendWee(ShowFirstCommand, m_panel.txt_input.text);
}
}
}
这个视图类对应舞台中名为 mc_firstView 的影片剪辑。它的主要作用就是接收用户的输入（请求），并发送给模型。这里是将里面的 txt_input 输入框里的文字，在按下“发送”按钮的时候，发送给命令类。接下来就要编写这个命令类了 ShowFirstCommand。
/**
* 编写的第一个命令类
* 2010-8-24 12:00
* @author:zking
*/
package application.actions {
import org.weemvc.as3.control.SimpleCommand;
import application.actions.ShowFirstCommand;
//import application.model.DataProxy;
import application.view.FirstView;
import application.view.SecondView;
public class ShowFirstCommand extends SimpleCommand {
//这里的参数就是之前视图 FirstView 发送 WeeMVC 事件时所传递过来的参数
override public function execute(data:Object = null):void {
//获取视图 FirstView 的引用，在命令类中，能获得到所有已注册过的模型类和视图类的引用
var firstView:FirstView = viewLocator.getView(FirstView);
//这是第二个视图类的引用。用于显示第一个视图类传递过来的数据
//var secondView:SecondView = viewLocator.getView(SecondView);
//将 firstView 里的输入框中输入的文字 发送过来，并显示在 SecondView 的文本框里
secondView.inputTxt("这是从First里来的数据："+data)
}
}
}
三、编写第二个视图类 SecondView，用于接收第一个视图类里发送来的数据
/**
* SecondView
* 2010-8-24 22：04
*/
package application.view {
//导入 WeeMVC 的视图基类 View
import org.weemvc.as3.view.View;
import application.actions.ShowFirstCommand;
import flash.events.MouseEvent;
import flash.display.MovieClip;
public class SecondView extends View {
protected var m_panel:MovieClip;
//这里的 m_panel 就是指场景中的 mc_secondView 影片剪辑。
public function SecondView(panel:MovieClip) {
m_panel = panel;
}
public function inputTxt(data:String):void {
m_panel.txt_second.text = data;
}
}
}
四、重点剖析
在这里我们主要想表述：第一个类 FirstView 里的数据通过命令类 ShowFirstCommand 传送到 SecondView 里。此例主要实现了：接收用户的输入，然后告诉控制器，来改变视图。至此，MVC 框架中“视图接收用户数据并发送事件给控制器，控制器再改变视图”这一步已经实现。
五、demo 下载
六、问题反馈
没有看明白？直接问此篇教程的作者。联系方式：zyj10222#126.com（#号换成@，此地址同时也是 MSN 帐号）