[Flex]Cairngorm中View层的交互

  Cairngorm中各层的含义与关系参见《Cairngorm框架——MVC基本理论》,这里探讨一下View层的交互问题。

  根据Cairngorm的原理,View层中的数据通过绑定ModelLocator中的属性实现自动更新,但有时我们想要的效果不仅仅是数据自动更新这么简单,而且有可能会对View层界面进行操作,譬如切换状态、弹出提示窗口、弹出选择界面等,这些操作如果放在Command中处理的话,使Controller层与View层耦合了,不利于MVC松散耦合的概念。

  举个简单例子

  Flex程序由两个界面组成:登陆界面和主界面,在Application中分别定义为login和main状态,默认为login状态。当login成功后,切换为main状态。

  按照Cairngorm的用户登陆Command如下:

import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;

import mx.controls.Alert;
import mx.core.FlexGlobals;
import mx.rpc.IResponder;
	
import spark.components.Application;
	
public class UserLoginCommand implements ICommand, IResponder
{
    public function execute(event:CairngormEvent):void
    {
        var e:UserLoginEvent = event as UserLoginEvent;
        var delegate:SystemDelegate = new SystemDelegate(this);
        delegate.userLogin(e.userName, e.password);
    }
		
    public function result(data:Object):void
    {
        var app:Application = (FlexGlobals.topLevelApplication) as Application;
        app.currentState = "main";
    }
		
    public function fault(info:Object):void
    {
        Alert.show(info.toString());
    }

}

  这里,Command的代码中牵涉到Application的CurrentState了,且还有Alert.show方法,这些应该都是View层做的事情。为了达到松散耦合的墓地,我们定义一用户登陆完成事件,在Command中执行完后派发,在View层中监听该事件并处理。

  定义用户登陆完成事件UserLoginCompleteEvent

import com.adobe.cairngorm.control.CairngormEvent;
	
public class UserLoginCompleteEvent extends CairngormEvent
{
    static public const EVENT_ID:String = "userLoginComplete";
    public var success:Boolean = false;

    public function UserLoginCompleteEvent()
    {
        super(EVENT_ID);
    }

}

  Command代码修改为响应时向外派发UserLoginCompleteEvent事件

import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import com.adobe.cairngorm.control.CairngormEventDispatcher;

import mx.rpc.IResponder;
	
public class UserLoginCommand implements ICommand, IResponder
{
    public function execute(event:CairngormEvent):void
    {
        var e:UserLoginEvent = event as UserLoginEvent;
        var delegate:SystemDelegate = new SystemDelegate(this);
        delegate.userLogin(e.userName, e.password);
    }
		
    public function result(data:Object):void
    {
        complete(true, null);
    }
		
    public function fault(info:Object):void
    {
        complete(false, info);
    }

    private function complete(success:Boolean, data:Object):void
    {
        var e:UserLoginCompleteEvent = new UserLoginCompleteEvent();
        e.success = success;
        e.data = data;
        CairngormEventDispatcher.getInstance().dispatchEvent(e);
    }
}

  Application的creationComplete事件中监听UserLoginCompleteEvent事件

protected function creationCompleteHandler(event:FlexEvent):void
{
    CairngormEventDispatcher.getInstance().addEventListener(UserLoginCompleteEvent.EVENT_ID, userLoginCompleteHandler);
}

private function userLoginCompleteHandler(e:UserLoginCompleteEvent):void
{
    if (e.success)
        currentState = "desktop";
    else
        Alert.show(e.data.toString());
}

  值得注意的是,UserLoginCompleteEvent不需要在FrontController中注册,而且需要View层互动时才需要使用对应逻辑的CompleteEvent,其他互动用Cairngorm提倡的Bindable Model Locator解决。

  虽然Cairngorm的代码量不少,但我个人觉得分层还是很明确的,特别是团队开发时只需要专注自己关心的部分就可以了。

你可能感兴趣的:(Flex)