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接口