Flex——命令管理，Undo来Redo去

前言

Undo，Redo是编辑环境里常见的并且非常重要的功能，下面介绍【命令模式】在Flex/AS3下的实现。

ICommand接口

定义ICommand接口，其中Execute和UnExecute是相反的2个操作，Title属性用于命令显示，例如显示在操作历史列表里。

package cwn.wb.ui.core.command

{

import cwn.core.IDispose;

public interface ICommand extends IDispose

{

function get Title():String

function Execute():void

function UnExecute():void

}

}

CommandBase基类

CommandBase类主要实现ICommand接口，所有Command类都将继承CommandBase类。

package cwn.wb.ui.core.command

{

import cwn.core.IDispose;

public class CommandBase implements ICommand

{

public function CommandBase()

{

}

//===================ICommand========================

protected var _Title:String;

public function get Title():String

{

return _Title;

}

public function Execute():void

{

throw new Error("Not implementation.");

}

public function UnExecute():void

{

throw new Error("Not implementation.");

}

//========================IDispose==========================

private var _Disposed:Boolean = false;

protected function Disposing():void

{

}

public function Dispose():void

{

if (_Disposed)

return;

Disposing();

_Disposed = true;

}

}

}

AddCommand类

AddCommand用于处理向界面容器添加子元件的操作，定义如下：

package cwn.wb.ui.core.command

{

import mx.core.UIComponent;

public class AddCommand extends CommandBase

{

private var _Parent:UIComponent;

private var _Target:UIComponent;

private var _Index:int;

public function AddCommand(parent:UIComponent, target:UIComponent)

{

_Parent = parent;

_Target = target;

_Index = _Parent.numChildren;

if (_Parent.contains(_Target))

_Index = _Parent.getChildIndex(_Target);

_Title = "添加" + _Target.name;

}

override public function Execute():void

{

if(_Parent.contains(_Target))

return;

_Parent.addChildAt(_Target, Math.min(_Parent.numChildren, _Index));

}

override public function UnExecute():void

{

if(!_Parent.contains(_Target))

return;

_Parent.removeChild(_Target);

}

override protected function Disposing():void

{

_Parent = null;

_Target = null;

super.Disposing();

}

}

}

DeleteCommand类

DeleteCommand用于处理向界面容器删除子元件的操作，效果与AddCommand相反，定义如下：

package cwn.wb.ui.core.command

{

import mx.core.UIComponent;

public class DeleteCommand extends CommandBase

{

private var _Parent:UIComponent;

private var _Target:UIComponent;

private var _Index:int;

public function DeleteCommand(parent:UIComponent, target:UIComponent)

{

_Parent = parent;

_Target = target;

_Index = _Parent.numChildren;

if (_Parent.contains(_Target))

_Index = _Parent.getChildIndex(_Target);

_Title = "删除" + _Target.name;

}

override public function Execute():void

{

if (!_Parent.contains(_Target))

return;

_Parent.removeChild(_Target);

}

override public function UnExecute():void

{

if (_Parent.contains(_Target))

return;

_Parent.addChildAt(_Target, Math.min(_Parent.numChildren, _Index));

}

override protected function Disposing():void

{

_Parent = null;

_Target = null;

super.Disposing();

}

}

}

EditCommand类

EditCommand用于处理元件的属性编辑操作，定义如下：

package cwn.wb.ui.core.command

{

import mx.core.UIComponent;

public class EditCommand extends CommandBase

{

private var _Property:String;

private var _Target:Object;

private var _OldValue:Object;

private var _NewValue:Object;

public function EditCommand(property:String, target:Object, oldValue:Object, newValue:Object)

{

_Property = property;

_Target = target;

_OldValue = oldValue;

_NewValue = newValue;

_Title = "编辑" + _Property;

}

override public function Execute():void

{

_Target[_Property] = _NewValue;

}

override public function UnExecute():void

{

_Target[_Property] = _OldValue;

}

override protected function Disposing():void

{

_Target = null;

_OldValue = null;

_NewValue = null;

super.Disposing();

}

}

}

例子：编辑宽度

var edit:EditCommand = new EditCommand("width", target, target.width, 500);

CommandManager类

添加，删除，编辑3个主要命令已经定义完成，现在要定义一个命令管理的类对命令进行管理，集中调用，其中Undo，Redo操作都在该类实现。

package cwn.wb.ui.core.command

{

import cwn.core.DisposeUtil;

import flash.events.EventDispatcher;

import mx.collections.ArrayCollection;

import mx.core.UIComponent;

public class CommandManager extends EventDispatcher

{

private static var g_Created:Boolean = false;

public static var Instance:CommandManager = new CommandManager();

public function CommandManager()

{

super();

if (g_Created)

throw new Error("Singleton class. Please use Instance static filed.");

g_Created = true;

}

//======================命令管理：Undo，Redo=============================

private var _UndoList:ArrayCollection = new ArrayCollection();

private var _RedoList:ArrayCollection = new ArrayCollection();

public function get CanRedo():Boolean

{

return _RedoList.length > 0;

}

public function get CanUndo():Boolean

{

return _UndoList.length > 0;

}

public function Redo():void

{

if (!CanRedo)

return;

var command:ICommand = _RedoList.removeItemAt(_RedoList.length - 1) as ICommand;

command.Execute();

_UndoList.addItem(command);

}

public function Undo():void

{

if (!CanUndo)

return;

var command:ICommand = _UndoList.removeItemAt(_UndoList.length - 1) as ICommand;

command.UnExecute();

_RedoList.addItem(command);

}

//======================命令调用=============================

private function ExecuteCommand(command:ICommand):void

{

command.Execute();

AppendCommand(command);

}

private function AppendCommand(command:ICommand):void

{

//有新命令添加时清空RedoList，

DisposeUtil.Dispose(_RedoList);

_UndoList.addItem(command);

}

//======================添加、删除、编辑命令=============================

public function Add(parent:UIComponent, target:UIComponent):void

{

var command:ICommand = new AddCommand(parent, target);

ExecuteCommand(command);

}

public function Delete(parent:UIComponent, target:UIComponent):void

{

var command:ICommand = new DeleteCommand(parent, target);

ExecuteCommand(command);

}

public function Edit(property:String, target:Object, oldValue:Object, newValue:Object):void

{

var command:ICommand = new EditCommand(property, target, oldValue, newValue);

ExecuteCommand(command);

}

}

}

进阶

一个命令管理的框架基本完成了，根据实际使用，再进行扩展。

复合命令

有时，一个操作就调用了多个命令，例如，同时删除多个元件，同时移动多个元件。这需要多个命令进行复合，可以定义一个MultiCommand命令来完成多个命令同时调用。

package cwn.wb.ui.core.command

{

import cwn.core.DisposeUtil;

import mx.collections.ArrayCollection;

public class MultiCommand extends CommandBase

{

private var _Commands:ArrayCollection;

public function MultiCommand(commands:ArrayCollection)

{

_Commands = commands;

if (_Commands.length > 0)

_Title = ICommand(_Commands[0]).Title + "...";

}

override public function Execute():void

{

for each (var cmd:ICommand in _Commands)

{

cmd.Execute();

}

}

override public function UnExecute():void

{

for each (var cmd:ICommand in _Commands)

{

cmd.UnExecute();

}

}

override protected function Disposing():void

{

cwn.core.DisposeUtil.Dispose(_Commands);

super.Disposing();

}

}

}

事件通知

CommandManager是继承事件派发类EventDispatcher的，当有新的命令执行时还应该派发相应的事件，通知界面等进行刷新，数据同步。

相关资料

IDispose接口