利用策略模式设计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>

 

 

评论

6 楼 wxmfly 2009-05-28  

foodyi 写道

wxmfly 写道

一个mxml有以下几个条件，我不知道你的方式能否处理
1.很多state
2.有baseOn
3.state 之间有很多RemoveChild , AddChild操作

直接用<mx:States>不就可以了嘛,这个我感觉已经帮助你实现了state模式 为什么还要自己写....

当一个页面非常庞大，比如有3000行以上，里面有很多baseon,RemoveChild,AddChild操作，这样里面的内容就不能拆分成小页面。这种情况如何解决？

5 楼 presses 2009-04-23  

“2 定义通用策略，实现一些通用部分，比如异常处理。”
通用策略指的是什么？没看见你在策略层做了什么。

4 楼 foodyi 2009-04-23  

wxmfly 写道

一个mxml有以下几个条件，我不知道你的方式能否处理
1.很多state
2.有baseOn
3.state 之间有很多RemoveChild , AddChild操作

直接用<mx:States>不就可以了嘛,这个我感觉已经帮助你实现了state模式 为什么还要自己写....

3 楼 wxmfly 2009-04-23  

一个mxml有以下几个条件，我不知道你的方式能否处理
1.很多state
2.有baseOn
3.state 之间有很多RemoveChild , AddChild操作

2 楼 koalant 2008-10-28  

我做“乐宝”的时候也是用的 Flex State, 后来发现这个东西容易把页面集中在一起，造成 mxml 比较大，所以新版“乐宝”我都用自定义组件来实现了。

1 楼 MaiKuraki 2008-10-28  

不错！～刚刚正为Flex里面的state烦恼着！～