2008-07-04

利用策略模式设计flex的state

      在flex中，state的概念类似于flash中的场景，一个场景对应着一个界面，在一个复杂的flex应用中，可能会有很多场景，在flash中可以利用时间线来管理场景，而在flex中只得通过手工管理管理state，经过一段时间探索我发现利用策略模式管理这些state不失为一种优雅的方法，方案如下：

 

1 建立策略接口，在这里把state抽象为做2件事，doLogic():对目标(舞台)数据进行一些必要的逻辑处理，doRender()：对目标(舞台)的显示列表做必要的修改和填充。

package
{
	public interface IState{		
		function doLogic():void;
		function doRender():void;	
	}
}

 

2 定义通用策略，实现一些通用部分，比如异常处理。

package
{
	public class AbstractState implements IState
	{
		protected var target:StateManage;
		public function AbstractState(aTarget:StateManage){
			target = aTarget;
		}
		public function doLogic () : void {
			throw new Error ("抽象方法应被重载");
		}
		public function doRender () : void {
			throw new Error ("抽象方法应被重载");
		}
	}
}

 

  3 建立具体的策略类，负责具体的state，在这里doLogic()通过向目标发送消息修改了目标数据message, doLogic()向目标发送消息修改目标的显示列表。类似可以再建立更多的具体策略类：state2……stateN。

package
{
	public class State1 extends AbstractState implements IState{
		public function State1(aTarget:StateManage){
			super(aTarget);
		}
		override public function doLogic():void {
			target.message="现在是状态1";
		}
		override public function doRender():void {
			target.title.text=target.message;
		}
	}
}

 

4 至此state的设计完毕了，写个main文件测试下，运行后点击改变状态按钮，则应用在state1和state2中来回切换。可以在该模式下对应用进行扩展从而达到比较复杂的场景展示。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	creationComplete="onCreationComplete(event);">
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			private var _state:IState;
			public var message:String;
			
			private function onStateChange(aEvent:MouseEvent):void {				
				if(_state is State2){
					_state = new State1(this);
				} else if(_state is State1){
					_state = new State2(this);
				}
				_state.doLogic();
				_state.doRender();
			}
			private function onCreationComplete (aEvent:FlexEvent):void {	
				_state = new State1(this);		
				_state.doLogic();
				_state.doRender();
				toggle.addEventListener(MouseEvent.CLICK,onStateChange);
			}
		]]>
	</mx:Script>
	<mx:Text id="title" x="194" y="23" width="152" fontSize="18" color="#F9210B"/>
	<mx:Button id="toggle" x="457" y="21" label="改变状态" fontSize="12"/>	
</mx:Application>

 

 

评论
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

liuqiang
搜索本博客
我的相册
019a9cee-eeda-3878-b2be-d193caa0130f-thumb
A569194995207YAN
共 16 张
存档
最新评论