IT妖怪

由 Jack 撰写 　http://blog.ityao.com/archives/685

PureMVC官方网站http://puremvc.org/有详细的多语言帮助文档（包括中文）和demo，
但即使是最简单的demo，也要建立N多类，很多朋友都抱怨PureMVC上手机要需要建立太多类，比较难入门
因此我做了下面这个Demo，只用了3个类，来说明PureMVC中Facade和View/Mediator的用法，
以及如何发送和响应notification
并且在以后的blog中，我会在这个demo基础上，逐步添加新的类和功能，逐步深入讲解PureMVC
Demo中有三个朋友列表，分别是全部朋友列表与组A/组B，添加/删除朋友时会同时添加/删除全部列表和指定组的列表
仅包含三个类：
FrinedList.mxml : 主程序，实例化多个MyList.mxml作为朋友列表，向Facade注册mediator，发送添加朋友的通知
views/MyList.mxml : 朋友列表的可视化组件，发送删除朋友的通知
views/MyListMediator.as : MyList.mxml的中介器，响应各种通知，控制MyList.mxml

主程序：FriendList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:views="views.*"
			    creationComplete="application1_creationCompleteHandler(event)">

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			import org.puremvc.as3.multicore.interfaces.IFacade;
			import org.puremvc.as3.multicore.patterns.facade.Facade;

			import views.MyListMediator;

			protected var facade:IFacade = Facade.getInstance('');//获取Facade的单例

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				cbTypeId.textInput.editable = false
				//
				facade.registerMediator(new MyListMediator('all',this.list0));
				facade.registerMediator(new MyListMediator('group1',this.list1));
				facade.registerMediator(new MyListMediator('group2',this.list2));
				//添加几个个测试数据
				this.addNewFriend('Sven',1);
				this.addNewFriend('Lina',2);
				this.addNewFriend('Viper',1);
				this.addNewFriend('Chen',2);
				this.addNewFriend('Zeus ',4);//添加一个特殊typeId的组，测试例外数据的处理
			}

			protected function btnAdd_clickHandler($event:MouseEvent):void{
				this.addNewFriend(this.textName.text,this.cbTypeId.selectedItem.typeId);
				this.textName.text='';//清空名称输入栏，以免连续点击
			}

			protected function addNewFriend($name:String,$typeId:int):void{
				var $friend:Object = new Object();//创建一个新朋友的数据对象
				$friend.name = $name;//设置名称
				$friend.typeId = $typeId;//设置typeId
				facade.sendNotification('add',$friend);//发送通知
			}
		]]>
	</fx:Script>

	<s:HGroup>
		<s:Label text="Name:"/>
		<s:TextInput id="textName"/>
		<s:ComboBox id="cbTypeId" labelField="label" selectedIndex="0">
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:Array>
						<fx:Object label='组A' typeId='1'/>
						<fx:Object label='组B' typeId='2'/>
						<fx:Object label='不分配组' typeId='0'/>
					</fx:Array>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:ComboBox>
		<s:Button enabled="{this.textName.text!=''}" id="btnAdd" label="添加新Friend" click="btnAdd_clickHandler(event)"/>
	</s:HGroup>
	<views:MyList id="list0" x="10" title="全部好友" typeId="0" width="180" top="39" height="486">
	</views:MyList>
	<views:MyList id="list1" x="198" title="组A" typeId="1" width="180" top="39" height="213">
	</views:MyList>
	<views:MyList id="list2" x="198" title="组B" typeId="2" width="180" top="305" height="220">
	</views:MyList>
</s:Application>

朋友列表组件：views/MyList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
		  >

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			import org.puremvc.as3.multicore.patterns.facade.Facade;

			[Bindable]
			public var title:String = '';

			public var typeId:int = 0;

			[Bindable]
			public var dataAC:ArrayCollection = new ArrayCollection();

			protected function btnDel_clickHandler(event:MouseEvent):void
			{
				if(this.list.selectedItem){
					Facade.getInstance('').sendNotification('delete',this.list.selectedItem);
				}
			}
		]]>
	</fx:Script>
	<s:Label text="{title}"/>
	<s:List id="list" dataProvider="{dataAC}" top="24" bottom="24" width="100%" labelField="name"/>
	<s:Button id="btnDel" enabled="{this.list.selectedItem}" label="删除所选" click="btnDel_clickHandler(event)" bottom="0" />
</s:Group>

中介器：MyListMediator.as

package views
{
	import org.puremvc.as3.multicore.interfaces.INotification;
	import org.puremvc.as3.multicore.patterns.mediator.Mediator;

	public class MyListMediator extends Mediator
	{
		public function MyListMediator(mediatorName:String=null, viewComponent:Object=null)
		{
			super(mediatorName, viewComponent);
		}
		private function get view():MyList{
			return this.viewComponent as MyList;
		}
		//可以接受的通知name
		override public function listNotificationInterests():Array{
			return ['delete','add'];
		}
		//响应通知
		override public function handleNotification(notification:INotification):void{
			var $friend:Object = notification.getBody();//获取通知的内容
			if(this.view.typeId==0 || this.view.typeId==$friend.typeId){
				//所持有的MyList如果是全部朋友的列表或指定typeId的列表，则执行以下操作，否则不执行
				switch(notification.getName()){//区分名称
					case 'delete':
						var $index:int = this.view.dataAC.getItemIndex($friend);
						this.view.dataAC.removeItemAt($index);//告知data删除指定friend object
						break;
					case 'add':
						this.view.dataAC.addItem($friend);//添加frined object
						break;
				}
			}
		}
	}
}

源文件下载 PureMvcDemoFriendList20100511.zip