了解PureMVC的开源框架

每月两次,我们重温从历史Activetuts整个我们的读者最喜爱的职位+。本教程是首次出版,2009年5月。

现在你可能会再次提出一个项目,需要大量的编码和/或与同事合作工作。说,框架往往是结构,语义和生产力的最佳选择,它是安全的。

了解一个框架,可以采取了很多时间,但一旦你高兴,你的知识,你可以从字面上代码在思想的速度。PureMVC是一个AS3的大框架,有些人可能会说这是一个有点难以得到你的头左右,但你做,你会很高兴。

从演示中,你可以看到,我们正在努力,是非常简单,但它足以让你了解PureMVC的作品如何。


在我们开始之前...

在我们开始之前,我想,以确保基地覆盖。这是一个教程中级到高级Actionscripters,但不要被吓倒,如果你既不是,有没有像现在开始学习时间!

  1. 这个例子使用Flex Builder建立。你可以到Adobe的网站下载自己的副本(60天免费试用!) 但是,它会在你选择的IDE愉快地工作,是否Flashdevelop中FDT,或良好OL“ 的TextMate
  2. 就像我已经说过了,本教程是为中级到高级Actionscripters,所以我要跳过世俗的部分,如设立您在您所选择的IDE,等项目...
  3. 这是值得注意的,下次你做你的业务,这是最好先打印的副本PureMVC的最佳实践这是相当沉重的,但你会很高兴你读它。

第1步:设置

明智的做法是抓住自己的一个项目。zip文件的副本内,你会看到本教程基本设置。火了您的IDE(我的是Flex Builder),并创建一个新项目。接下来的事情,你需要做的是设置Flex编译器,使用在“src”文件夹中的源路径,调试bin和“部署”释放的bin文件夹的文件夹中的“调试”。简单。

其次,我已经包含“src”文件夹内的两个额外的库:Greensock的TweenLite(“SRC / GS”)  puremvc (SRC /资产/深港西部通道“)。你会发现,我用一个PureMVC的图书馆,而不是源文件夹。深港西部通道,这是因为我喜欢使用SWC文件。确保这两个库设置为编译调试和最终部署时。以下是该项目的目标布局的截图。虽然你多欢迎导入项目,并通过它的文件的文件,我会告诉你如何编写每个文件,所以你最后一个项目类似的例子。

了解PureMVC的开源框架_第1张图片

第2步:基本原理

PureMVC的概念可以使我们最好的回避,但一旦你得到了你的头周围裸露的基本面,你很快就会被到处乱飞,你的方式。PureMVC的结构意味着,通知被用来运行某些命令,无论他们是在模型,视图或控制器。这些通知包括名称和一个可选的身体。身体参数,允许你发送到一个控制器,然后把它传递给模型,然后返回相关数据的视图(如点击按钮)的数据。

本通知的概念是指,PureMVC的结构如何成立的源文件有一个非常明确的:

  • 代理 (模型)
    代理是一个简单的模型。一个模型,这些人可能不知道,是一类处理,如加载XML数据存储和检索所有数据交易。代理与调解员或命令,从来不听或处理的通知,他们只派出他们。这意味着,为了一个命令或调解得到了一些数据保持,数据将被传递回呼吁通过通知的身体或通过检索代理的实例,从门面。代理他们的数据存储在称为VO(值对象)的公共类。他们只是简单的类的公共变量,我们可以保持我们的数据检索和更新通过我们的代理。
  • 调解员和他们的意见 (观点)
    调解员是一个类,它代表认为。在你的应用程序,可能有几个意见,这些意见将被延长一个DisplayObject类(否则他们不会有意见)。调解员会增加您的看法,你的基地(“viewComponent”类,它是第一个参数是通过调解员),它也将处理所有传入和传出的通知有关这一观点。这意味着调解员负责通知您的应用程序,如果用户已触发视图中的事件(如按一下按钮)和以更新它还将负责从代理传递数据到视图。调解员听取和处理通知本身是能够注册到新的门面调解时,他们需要,而不是加载它们一次。
  • 命令 (控制器)
    一个命令仅仅是一个控制器。虽然它不听通知本身,它从外观到管道的通知。这意味着一个命令运行条件语句允许它来确定它收到该通知,下一步该怎么做。以及接收通知,命令,可以向他们发送了。他们还可以注册代理,调解员和更多的命令。

希望,应该给你一个puremvc是如何设置的简单理解。对于如何通知可以“飞”解决您的应用程序的可视化表示,检查PureMVC的概念图

了解PureMVC的开源框架_第2张图片

你可以原谅,如果你认为这是非常艰巨的,但一旦你坐下来,规划出您的应用程序看起来像什么,你很快就会明白我们要去:

  1. 我们的基类会火起来的门面
  2. 门面“开始”命令,然后调用
  3. up命令开始将注册我们的代理和申请调解
  4. 然后代理将引用其值对象,并等待进一步的通知
  5. 将注册申请调解的进展,调解员
  6. 的进展,调解员会创建所取得的进展视图,然后发出通知加载数据
  7. 门面会收到此通知,并通过它的数据命令
  8. 数据命令,然后将过滤的通知,并告诉代理加载数据
  9. 代理将通知所取得的进展,认为它加载的数据(它将会显示),进步(将更新),当它完成(它会被隐藏),调解员会处理这一切
  10. 然后代理将发送申请调解处理的通知
  11. 申请调解,将注册的URL视图的地方,我们将创建用户点击的按钮
  12. 网址视图调解员将通过从代理数据的URL视图的URL视图,并添加到舞台
  13. 用户将按下一个按钮,这将可以通过调解处理,并通知将被发送到代理
  14. 然后代理服务器将再次加载数据,总是中继状态的进度来看
  15. 然后代理将再次发送申请调解处理的通知
  16. 调解员会再告诉应用程序的URL视图调解隐藏的URL视图,然后注册的图像视图
  17. 图像视图调解员将创建代理的数据图像视图

这听起来可能很复杂,但它只是一个制动您的应用程序的功能分解成小的位大小块的情况。


第三步:一切与门面开始

每当你与PureMVC的工作,你必须明白,始终编码与门面开始。门面是一个层,把PureMVC框架,MVC代码和基地的ActionScript文件,在这种情况下,煤矿被称为“App.as”。App.as在运行时,将做它的业务,是否设立舞台缩放,帧频和诸如此类的东西;当它准备的门面后,它会调用来启动应用程序。

让我们一起创造我们的基地ActionScript文件。使用您喜欢的IDE创建一个新文件,并将它命名为“App.as”内的“SRC”,并确保它扩展Sprite类的,像这样:

		package
		{
			import flash.display.Sprite;

			public class App extends Sprite
			{
				public function App()
				{

				}
			}
		}
	

第四步:设置基地

现在,我们已经创造了我们的基类,随意添加的东西,如设置宽度,高度,背景颜色等。您可能需要的任何资产,如字体或图像,这也是很方便的导入。一旦你满意你的基类,然后我们可以继续前进创造的门面。下面是一个预览我的基类:

		package
		{
			import flash.display.GradientType;
			import flash.display.Sprite;
			import flash.geom.Matrix;
			import flash.text.Font;

			[SWF( width='600', height='400', frameRate='30', backgroundColor='#000000' )]

			public class App extends Sprite
			{
				[Embed( systemFont='Arial', fontName='Arial', mimeType='application/x-font' )]
				private var arialFont:Class;

				public function App()
				{
					init();
				}

				private function init():void
				{
					var mat:Matrix = new Matrix();
					var bg:Sprite = new Sprite();

					mat.createGradientBox( stage.stageWidth, stage.stageHeight, Math.PI * .5 );

					bg.graphics.beginGradientFill( GradientType.LINEAR, [ 0x333333, 0x000000 ], [ 1, 1 ], [ 0, 255 ], mat );
					bg.graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
					bg.graphics.endFill();

					addChild( bg );

					Font.registerFont( arialFont );
				}
			}
		}
	

第5步:设置门面

在这一步,我们深入研究直到PureMVC的世界。像我在第2步说,门面是一个重要的层一起握着你的应用程序。创建一个新类称为“ApplicationFacade.as”内“SRC / COM / flashtuts的的”,确保它扩展了门面,实现IFacade。请注意,我们的门面并不因为它延长Facade类有一个构造。在我们的门面,我们将有3与第4个可选的功能。此外,我们将有2个公共常量。下面是我们将致力于让我们的门面类,看起来像什么:

		package com.flashtuts
		{
			import com.flashtuts.controller.*;
			import com.flashtuts.model.*;
			import com.flashtuts.view.*;
			import com.flashtuts.view.component.ImagesView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IFacade;
			import org.puremvc.as3.patterns.facade.Facade;
			import org.puremvc.as3.patterns.observer.Notification;

			public class ApplicationFacade extends Facade implements IFacade
			{
				public static const NAME:String							= 'ApplicationFacade';

				public static const STARTUP:String						= NAME + 'StartUp';

				public static function getInstance():ApplicationFacade
				{
					return (instance ? instance : new ApplicationFacade()) as ApplicationFacade;
				}

				override protected function initializeController():void
				{
					super.initializeController();

					registerCommand( STARTUP, StartupCommand );

					registerCommand( URLsView.DATA_GET, DataCommand );
					registerCommand( ImagesView.DATA_GET, DataCommand );
				}

				public function startup(stage:Object):void
				{
					sendNotification( STARTUP, 	stage );
				}

				override public function sendNotification(notificationName:String, body:Object=null, type:String=null):void
				{
					trace( 'Sent ' + notificationName );

					notifyObservers( new Notification( notificationName, body, type ) );
				}
			}
		}

内PureMVC的事件或“通知”用我们的意见或控制器内进行路由数据和触发功能。因此,因为我们的门面将发送一个通知,告诉它启动的应用程序的命令,我们创建了一个独特的恒定,将由门面用来发送命令,并开始了功能,听命令:

		public static const NAME:String							= 'ApplicationFacade';

		public static const STARTUP:String						= NAME + 'StartUp';

虽然你并不需要有一个恒定的所谓的名称,它是一个好主意,始终建立在类通知常数,以保持独特的上述通知的,不太容易受到人为错误(如拼写错误)。

接下来我们就来我们所需的功能,“getInstance()方法”。这是门面的第一和最重要的功能,并允许我们的基类来检索的门面的一个实例,然后射击开始up命令(我们会得到):

		public static function getInstance():ApplicationFacade
		{
			return (instance ? instance : new ApplicationFacade()) as ApplicationFacade;
		}

现在我们就来通知我们的控制器控制路由的功能,或PureMVC的呼吁他们,命令:

		override protected function initializeController():void
		{
			super.initializeController();

			registerCommand( STARTUP, StartupCommand );

			registerCommand( URLsView.DATA_GET, DataCommand );
			registerCommand( ImagesView.DATA_GET, DataCommand );
		}
	

这是非常重要的保持“registerCommand(启动,StartupCommand),”不这样做,应用程序将无法启动。它的基本含义是,门面将通过一个名为“启动”命令称为“StartupCommand”的通知。正如你可以看到,我有两个。他们都指向名为“DataCommand”,同时通知另一个控制器是获取数据的请求。

现在,我们得到我们所需的功能,没有我们的门面“启动()”。这一切的根本是火一个被路由通过的的“registerCommand”处理“StartupCommand”的通知:

	

最后,最后但绝非最不重要的,我们有我们的最终功能。这是一个可选的功能,我想补充时,我与PureMVC的工作,因为它让我看到了什么事件被解雇,以及以何种顺序。简单的功能覆盖“sendNotification()”函数,你在PureMVC的使用发送通知。以及通知应用程序的观察员,跟踪事件给你看:

		override public function sendNotification(notificationName:String, body:Object=null, type:String=null):void
		{
			trace( 'Sent ' + notificationName );

			notifyObservers( new Notification( notificationName, body, type ) );
		}

所以这是我们的门面。我们完成之前,我们需要申请一个行到我们的基类。此行只会让我们的门面的一个实例,然后运行up命令开始:

		ApplicationFacade.getInstance().startup( this );
	

确保你把这个文件,无论你的基类是做年底。例如,我已经把所有的东西,我的应用程序,设置背景渐变下:

		package
		{
			import com.flashtuts.ApplicationFacade;

			import flash.display.GradientType;
			import flash.display.Sprite;
			import flash.geom.Matrix;
			import flash.text.Font;

			[SWF( width='600', height='400', frameRate='30', backgroundColor='#000000' )]

			public class App extends Sprite
			{
				[Embed( systemFont='Arial', fontName='Arial', mimeType='application/x-font' )]
				private var arialFont:Class;

				public function App()
				{
					init();
				}

				private function init():void
				{
					var mat:Matrix = new Matrix();
					var bg:Sprite = new Sprite();

					mat.createGradientBox( stage.stageWidth, stage.stageHeight, Math.PI * .5 );

					bg.graphics.beginGradientFill( GradientType.LINEAR, [ 0x333333, 0x000000 ], [ 1, 1 ], [ 0, 255 ], mat );
					bg.graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
					bg.graphics.endFill();

					addChild( bg );

					Font.registerFont( arialFont );

					ApplicationFacade.getInstance().startup( this );
				}
			}
		}
	

现在,我们已经准备好让我们的手脏。


步骤6: up命令开始

正如在第4步讨论,门面处理所有路由的命令(控制器)的通知。我们要创造的第一个命令是“StartupCommand”。因此,创建一个新的文件名为“StartupCommand.as”内“的src / COM / flashtuts的/控制器”。确保它延伸SimpleCommand实现ICommand。就像我们的门面,我们的命令将不会有构造函数,而不是覆盖从公众的SimpleCommand类“的execute()函数调用”:

		package com.flashtuts.controller
		{
			import com.flashtuts.model.DataProxy;
			import com.flashtuts.view.ApplicationMediator;

			import org.puremvc.as3.interfaces.ICommand;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.command.SimpleCommand;

			public class StartupCommand extends SimpleCommand implements ICommand
			{
				override public function execute(notification:INotification):void
				{
					facade.registerProxy( new DataProxy() );

					facade.registerMediator( new ApplicationMediator( notification.getBody() as App ) );
				}
			}
		}

你会发现,在我们的“执行()”函数,还有一个被称为“通知”的说法。我们不需要使用,因为这个阶段,但是这将成为东西,我们不使用在我们的其他命令。作为使用此命令来启动我们的应用程序,首先它注册代理(模型):

		facade.registerProxy( new DataProxy() );
	

然后我们的调解员:

		facade.registerMediator( new ApplicationMediator( notification.getBody() as App ) );
	

所以,现在我们有我们的启动命令准备。我们要做的是创造我们的代理,然后到我们的ApplicationMediator。


第7步:创建一个代理

现在,我们有我们的“StartupCommand”注册我们的代理,我们需要确保代理的存在。因此,创建一个新的文件名为“DataProxy.as”内“SRC / COM / flashtuts的/模型”,并确保它延伸代理和实现IProxy。要开始与我们只是要在我们的代理有两个功能:构造和“获取”功能来检索的VO(值对象):

		package com.flashtuts.model
		{
			import com.flashtuts.model.vo.DataVO;

			import org.puremvc.as3.interfaces.IProxy;
			import org.puremvc.as3.patterns.proxy.Proxy;

			public class DataProxy extends Proxy implements IProxy
			{
				public static const NAME:String							= 'DataProxy';

				public function DataProxy()
				{
					super( NAME, new DataVO() );
				}

				public function get vo():DataVO
				{
					return data as DataVO;
				}
			}
		}

正如你可以看到,在我们代理的第一个功能是我们的构造,我们的“超级()”两个变量:代理的名称(由名称不变)和旁白。我们需要通过代理的名称,因为这将允许我们检索门面的实例,而不是创建一个新的实例,并失去我们的VO的数据:

		public static const NAME:String							= 'DataProxy';

		public function DataProxy()
		{
			super( NAME, new DataVO() );
		}
	

第二个功能是一个简单的get函数返回我们的旁白。这使得代理,命令和调解员可以方便地访问通过代理VO:

		public function get vo():DataVO
		{
			return data as DataVO;
		}
	

之前我们完成我们的代理,我们需要建立我们的旁白,所以称为“SRC / COM / flashtuts /模型/ VO”内“DataVO.as”创建一个新类。然后我们要添加三个公共变量:“dataURL:字符串”,的“urlsArray:阵列”和“urlsDataArray:阵列”。我们要去设置“dataURL的”指向“SRC /资产/ XML”被称为“data.xml中”和其他两个我们只是将它们设置为空数组的XML文件:

		package com.flashtuts.model.vo
		{
			public class DataVO
			{
				public var dataURL:String								= 'assets/xml/data.xml';
				public var urlsArray:Array								= [ ];
				public var urlsDataArray:Array							= [ ];
			}
		}
	

这些XML文件中的内容:

		
		
			http://api.flickr.com/services/rest/?method=flickr.photos.search&tags=london&api_key=YOURAPIKEY
			http://api.flickr.com/services/rest/?method=flickr.photos.search&tags=paris&api_key=YOURAPIKEY
			http://api.flickr.com/services/rest/?method=flickr.photos.search&tags=new%20york&api_key=YOURAPIKEY
		
	

注:你会看到,我删除了我的API密钥。你可以很容易地申请一个Flickr的API文档网站

现在,我们已经有了我们的代理和旁白到位,我们需要建立我们的调解员和意见。


第8步:创建ApplicationMediator

“ApplicationMediator”是坐在我们的的“StartupCommand”和你的看法调解员之间的层。作为您的应用程序变得越来越大,这将不再有意义注册您所有的调解员在一次(例如,在启动时)。因此,有一个父调停(的ApplicationMediator)的,可以听取围绕您的应用程序发送通知和注册的时候都需要调解。由于调解员代表的意见,视图所需的数据有时可能没有被载入尚未采取行动,因此,它似乎傻注册调解员不能够传递给它的任何数据,并创建视图。

首先,创建一个新文件称为“ApplicationMediator.as”“SRC / COM / flashtuts /视图”内,并确保它延伸调解和实现IMediator。下面是你应该瞄准“ApplicationMediator”的样子:

		package com.flashtuts.view
		{
			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ApplicationMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ApplicationMediator';

				public function ApplicationMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}
			}
		}

正如你可以看到,调解员开始与我们的老朋友“名称”的常数,它的构造。当我们注册在第6步的调解,我们通过一个阶段的实例,我们的基类(“App.as”)作为第一个参数。在我们的构造,超的名称和第一个参数,“viewComponent”,因为它是这将允许我们的调解,以增加他们的意见,在舞台上,我们的基类的viewComponent。

现在是一个好时机,开始谈论我们的意见。在我的例子中,我有三个:一个进度来看,一个URL选择视图和图像视图。对于每一个观点,我们有一名调解员。因为我们想要做的第一件事,是从我们的XML文件中加载的数据,似乎拟合来创建我们的进度来看,调解和然后注册“ApplicationMediator”的调解员。

通过扩展类中介,它可以让我们重写一个方便的功能,被称为“onRegister()”。当门面,注册了一个中介,这个函数被调用,因此,似乎最好的地方得到“ApplicationMediator”,注册为我们的进度来看调解:

		override public function onRegister():void
		{
			facade.registerMediator( new ProgressViewMediator( viewComponent ) );
		}
	

正如你可以看到,这是相同的风格,我们用在“StartupCommand”和我们传递“viewComponent”,调停,所以它能够在舞台上添加进度来看。您的应用程序调解员应该像这样:

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.ProgressView;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ApplicationMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ApplicationMediator';

				public function ApplicationMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}

				override public function onRegister():void
				{
					facade.registerMediator( new ProgressViewMediator( viewComponent ) );
				}
			}
		}


第9步:
创建我们的进展调解和视图

现在,我们已经设置注册“ApplicationMediator”我们的的“ProgressViewMediator”,我们首先开始创建“ProgressView.as”类“的src / COM / flashtuts /视图/组件”内。这是一个类,简单的DisplayObject,在这种情况下,雪碧延伸。我不会去通过代码视图,因为它是任何Actionscripter相当标准,但我会谈谈的观点和下面的调停之间的相互作用:

		package com.flashtuts.view.component
		{
			import flash.display.Sprite;
			import flash.text.TextField;
			import flash.text.TextFieldAutoSize;
			import flash.text.TextFormat;

			import gs.TweenLite;

			public class ProgressView extends Sprite
			{
				public static const NAME:String							= 'ProgressView';

				public static const SHOW:String							= NAME + 'Show';
				public static const HIDE:String							= NAME + 'Hide';
				public static const UPDATE:String						= NAME + 'Update';

				private var textField:TextField;

				public function ProgressView()
				{
					init();
				}

				private function init():void
				{
					var textFormat:TextFormat = new TextFormat();

					textFormat.color = 0xFFFFFF;
					textFormat.font = 'Arial';

					textField = new TextField();

					textField.autoSize = TextFieldAutoSize.CENTER;
					textField.defaultTextFormat = textFormat;
					textField.embedFonts = true;
					textField.text = 'Please wait...';
					textField.x = 300 - ( textField.width / 2 );
					textField.y = 200 - ( textField.height / 2 );

					addChild( textField );
				}

				public function show():void
				{
					textField.text = 'Please wait...';

					TweenLite.to( this, .5, { autoAlpha: 1 } );
				}

				public function hide():void
				{
					TweenLite.to( this, .5, { autoAlpha: 0 } );
				}

				public function update(percent:Number):void
				{
					textField.text = 'Loaded ' + percent + '%';
				}
			}
		}

作为调停人“交谈”的观点,它是非常重要的观点和调解员可以将信息传递到另一个。调解员可以传递信息,作为调停人将在它宣布的一个实例,但认为将信息传递给我们依赖于事件的调停者(如用户点击一个按钮)(不混合与通知)。我们只是得到我们认为派遣一个事件,并得到我们的调解员听取该事件。因此,调解员可以处理该事件的观点,消化信息,并执行相应的东西。我们对这些事件的名称使用公共常量声明,因此我们认为有三个事件:显示隐藏更新(很像我们的门面)。

注:配售事件名称可以在门面(“ApplicationFacade.as”文件),或放置在相对 ​​的意见。我觉得它更容易和更清洁的保持在他们的意见,但它给你,你认为哪种方式工作更好地为您。

你可以告诉我创建了一个文本字段,将用于显示通过我们的应用程序加载的数据的百分比。

现在,我们可以移动的调解,所以称为“ProgressViewMediator.as”在“SRC / COM / flashtuts的中/视图”创建一个新文件,并确保它延伸调解,并实现IMediator。作为“ApplicationMediator”将遵循相同的风格,因此有一个构造函数有一个参数(“viewComponent”),公共常数,称为名称和重写“onRegister()”我们的朋友。下面是你的调解人应该像:

		package com.flashtuts.view
		{
			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ProgressViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ProgressViewMediator';

				public function ProgressViewMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}

				override public function onRegister():void
				{

				}
			}
		}
	


首先我们需要添加到我们作为一个引用到我们的中保:

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ProgressViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ProgressViewMediator';

				private var progressView:ProgressView;
				...
	


现在我们得到调解,所以我们必须添加到“viewComponent”我们认为:

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ProgressViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ProgressViewMediator';

				private var progressView:ProgressView;

				public function ProgressViewMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}

				override public function onRegister():void
				{
					progressView = new ProgressView();

					viewComponent.addChild( progressView );
				}
			}
		}
	


现在,我们已经有了我们的调解裸机,我们需要来看看我们的观点是打算做什么。好了,你大概可以告诉常量,我们认为是要告诉多少迄今已加载的用户,因此它具有公共常量显示隐藏更新因为这些都将是什么,我们认为会有什么反应(你可以告诉“秀()”,“隐藏()”和“更新()”在我们看来功能),我们需要我们的调解员来处理这些通知,并相应地执行这些功能。

我们将增加两个新的功能,我们的中保:“listNotificationInterests()”和“的handleNotification()”。第一个函数返回一个数组的所有调解员感兴趣(这就是为什么它如此重要,坚持在公共常量这些通知,使他们很容易参考)的通知。后者实际上与他们的东西。这种调解是唯一感兴趣的节目隐藏更新所以这是我们添加的第一个功能,并处理在第二

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ProgressViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ProgressViewMediator';

				private var progressView:ProgressView;

				public function ProgressViewMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}

				override public function onRegister():void
				{
					progressView = new ProgressView();

					viewComponent.addChild( progressView );

					sendNotification( URLsView.DATA_GET );
				}

				override public function listNotificationInterests():Array
				{
					return [
						ProgressView.SHOW,
						ProgressView.HIDE,
						ProgressView.UPDATE
					];
				}

				override public function handleNotification(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case ProgressView.SHOW:
						progressView.show();

						break;

						case ProgressView.HIDE:
						progressView.hide();

						break;

						case ProgressView.UPDATE:
						progressView.update( body.percent );

						break;
					}
				}
			}
		}

你可以简单地看到,我们的handleNotification()“需要一个INotification的说法,一个类,它包含的名称机构的通知。我们用一个“开关”的语句,以确定该通知是要处理和运行相应的功能。简单。

恭喜!你已经达到第一个里程碑!我们不是来远吗?测试您的文件和你应该看到以下内容:


里程碑

到目前为止,我们已经创建了我们的门面,增加了一个命令,代理和应用程序的调解,然后创建一个视图,并把它添加到我们的应用程序使用视图的门面。


第10步:创建我们的网址查看

现在,我们要加载一些数据。之前,我们做到这一点,让我们的创建将用于显示此数据。正如我们正在装载三Flickr的API提要,我看到它恰当的,我们在我们的下一个视图创建三个按钮,允许用户点击,在这一点,我们的应用程序将返回相应的饲料图像。让我们再创建一个新的文件名为“URLsView.as”“SRC / COM / flashtuts的/视图/组件”,就像我们的“ProgressView”,这将扩展Sprite类:

		package com.flashtuts.view.component
		{
			import flash.display.Sprite;
			import flash.events.DataEvent;
			import flash.events.MouseEvent;
			import flash.text.TextField;
			import flash.text.TextFieldAutoSize;
			import flash.text.TextFormat;

			import gs.TweenLite;

			public class URLsView extends Sprite
			{
				public static const NAME:String							= 'URLsView';

				public static const DATA_GET:String						= NAME + 'DataGet';
				public static const DATA_READY:String					= NAME + 'DataReady';
				public static const SHOW:String							= NAME + 'Show';
				public static const HIDE:String							= NAME + 'Hide';
				public static const CLICKED:String						= NAME + 'Clicked';

				public function init(urls:Array):void
				{
					var i:Number = 0;
					var textFormat:TextFormat = new TextFormat();
					var textContainer:Sprite;
					var textField:TextField;

					textFormat.color = 0xFFFFFF;
					textFormat.font = 'Arial';

					for each ( var url:String in urls )
					{
						textContainer = new Sprite();

						textContainer.addEventListener( MouseEvent.CLICK, handleContainerClick );

						textContainer.buttonMode = true;
						textContainer.graphics.lineStyle( 1, 0xFFFFFF );
						textContainer.graphics.beginFill( 0x333333 );
						textContainer.graphics.drawRoundRect( 0, 0, 150, 30, 5, 5 );
						textContainer.graphics.endFill();
						textContainer.mouseChildren = false;
						textContainer.y = i * 40;

						textField = new TextField();

						textField.autoSize = TextFieldAutoSize.CENTER;
						textField.defaultTextFormat = textFormat;
						textField.embedFonts = true;
						textField.text = 'Select URL ' + ( ++i );
						textField.x = 75 - ( textField.width / 2 );
						textField.y = 15 - ( textField.height / 2 );

						textContainer.addChild( textField );

						addChild( textContainer );
					}

					alpha = 0;
					x = 300 - ( width / 2 );
					y = 200 - ( height / 2 );
				}

				public function show():void
				{
					TweenLite.to( this, .5, { autoAlpha: 1 } );
				}

				public function hide():void
				{
					TweenLite.to( this, .5, { autoAlpha: 0 } );
				}

				private function handleContainerClick(e:MouseEvent):void
				{
					var index:Number = getChildIndex( e.target as Sprite );

					dispatchEvent( new DataEvent( CLICKED, true, false, index.toString() ) );
				}
			}
		}
	


我不会走你所有的视图类,通 ​​过这个视图类。他们基本的AS3类,你应该熟悉它们。然而,你可以看到我已经离开的构造,我们只是想建立的按钮,当数据已被载入“DataProxy”。此外,在公共常量注意,主要DATA_GETDATA_READY的类的顶部这些都将被解雇,以信号,需要加载的数据,然后加载数据,并准备视图的事件。

我们现在就来我们的观点的调停,所以称为“URLsViewMediator.as”内“SRC / COM / flashtuts /视图”创建一个文件,并确保它延伸调解和实现IMediator。这就像在我们的应用程序之内的所有调解员。作为我们“ProgressViewMediator”这其中有一个构造,它超类的名称和“viewComponent”,也有重写“onRegister”功能。再次,就像“ProgressViewMediator”,我们宣布我们认为新的实例:

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class URLsViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'URLsViewMediator';

				private var urlsView:URLsView;

				public function URLsViewMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent);
				}

				override public function onRegister():void
				{
					urlsView = new URLsView();
				}
			}
		}

现在,我们需要思考我们的观点是要干什么。那么,它允许用户点击一个按钮内,并派遣一个事件(这就是handleContainerClick的功能“()”内的观点确实)。我们要告诉我们的调解员,我们认为该事件侦听器,并进行相应的处理:

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.URLsView;

			import flash.events.DataEvent;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class URLsViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'URLsViewMediator';

				private var urlsView:URLsView;

				public function URLsViewMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent);
				}

				override public function onRegister():void
				{
					urlsView = new URLsView();

					urlsView.addEventListener( URLsView.CLICKED, handleURLsViewClicked );
				}

				private function handleURLsViewClicked(e:DataEvent):void
				{

				}
			}
		}
	


现在,我们需要思考时,调解员将投入使用。记得刚才我说,有没有点运行调停之前,它需要吗?调解员不会被运行之前,我们需要它,所以我们假设它首次登记时,将数据的观点,以建立按钮的准备,所以我们更新我们的的“onRegister()”功能将数据发送到视图,显示视图,并把它添加到舞台。由于我们的数据存储在我们的“DataProxy”旁白,我们需要添加其他功能,这使我们能够访问门面的代理实例和检索数据从VO:

		override public function onRegister():void
		{
			urlsView = new URLsView();

			urlsView.addEventListener( URLsView.CLICKED, handleURLsViewClicked );

			urlsView.init( proxy.vo.urlsArray );

			urlsView.show();

			viewComponent.addChild( urlsView );
		}

		private function get proxy():DataProxy
		{
			return facade.retrieveProxy( DataProxy.NAME ) as DataProxy;
		}

最后,调解员将被创建时的数据的准备,我们需要告诉“ProgressView”我们不再想它是可见的,所以我们火称为“ProgressView.HIDE”,将捡到的通知“ ProgressViewMediator“,并会告诉的”ProgressView“隐藏自身:

		override public function onRegister():void
		{
			urlsView = new URLsView();

			urlsView.addEventListener( URLsView.CLICKED, handleURLsViewClicked );

			urlsView.init( proxy.vo.urlsArray );

			urlsView.show();

			viewComponent.addChild( urlsView );

			sendNotification( ProgressView.HIDE );
		}

再次,我们才可以继续下去,我们需要思考的有关通知调解员将要听的。既然我们要作出一个可用的应用程序,还有没有点,不要让用户返回并选择另一个Flickr的饲料URL,所以是有意义的,让这一观点被再次显示。这是其中的公共常量显示有玩(你会发现,我有一个命名约定,当它涉及到所有的通知,这是一件好事,会加快您的开发)。只是想与“ProgressViewMediator”,我们添加“listNotificationInterests的()”和“的handleNotification()”功能给我们的类:

		package com.flashtuts.view
		{
			import com.flashtuts.model.DataProxy;
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import flash.events.DataEvent;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class URLsViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'URLsViewMediator';

				private var urlsView:URLsView;

				public function URLsViewMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent);
				}

				override public function onRegister():void
				{
					urlsView = new URLsView();

					urlsView.addEventListener( URLsView.CLICKED, handleURLsViewClicked );

					urlsView.init( proxy.vo.urlsArray );

					urlsView.show();

					viewComponent.addChild( urlsView );

					sendNotification( ProgressView.HIDE );
				}

				override public function listNotificationInterests():Array
				{
					return [
						URLsView.SHOW
					];
				}

				override public function handleNotification(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case URLsView.SHOW:
						urlsView.show();

						break;
					}
				}

				private function handleURLsViewClicked(e:DataEvent):void
				{
					urlsView.hide();

					sendNotification( URLsView.CLICKED, { index: e.data } );
				}

				private function get proxy():DataProxy
				{
					return facade.retrieveProxy( DataProxy.NAME ) as DataProxy;
				}
			}
		}

你会发现,我已经添加了一些东西“handleContainerClick()”函数。这个函数是简单地传递事件名称“URLsView.CLICKED”按下按钮的索引(如0,1,2 ...)。我们会处理此事件不久,因为这是我们将使用它来加载用户回升Flickr的饲料事件。

现在,我们的看法是准备为我们的数据,我们可以进行代理,加载一些XML。呐喊呐喊!


第11步:载入数据

正如我上面提到,“ProgressViewMediator”触发了通知称为“URLsView.DATA_GET”。为了我们的代理收到此通知,我们必须要通过我们的门面,然后命令,然后调用代理的功能。首先,我们需要我们的门面内注册的命令,所以开辟“ApplicationFacade.as”,并添加了“registerCommand”功能的的“initializeController()”像这样的功能:

		package com.flashtuts
		{
			import com.flashtuts.controller.*;
			import com.flashtuts.model.*;
			import com.flashtuts.view.*;
			import com.flashtuts.view.component.ImagesView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IFacade;
			import org.puremvc.as3.patterns.facade.Facade;
			import org.puremvc.as3.patterns.observer.Notification;

			public class ApplicationFacade extends Facade implements IFacade
			{
				public static const NAME:String							= 'ApplicationFacade';

				public static const STARTUP:String						= NAME + 'StartUp';

				public static function getInstance():ApplicationFacade
				{
					return (instance ? instance : new ApplicationFacade()) as ApplicationFacade;
				}

				override protected function initializeController():void
				{
					super.initializeController();

					registerCommand( STARTUP, StartupCommand );

					registerCommand( URLsView.DATA_GET, DataCommand );
				}

				public function startup(stage:Object):void
				{
					sendNotification( STARTUP, 	stage );
				}

				override public function sendNotification(notificationName:String, body:Object=null, type:String=null):void
				{
					trace( 'Sent ' + notificationName );

					notifyObservers( new Notification( notificationName, body, type ) );
				}
			}
		}
	


你会看到,我们告诉我们的门面,通过这个通知称为“DataCommand”命令,这是我们要来处理这个通知和运行代理控制器的名称。接下来,创建一个名为“DataCommand.as”中的“SRC / COM / flashtuts的/控制器”文件,它会需要,延长SimpleCommand实现ICommand的。我们班不会需要一个构造函数,因为我们有兴趣“的execute()”函数(就像“StartupCommand”):

		package com.flashtuts.controller
		{
			import org.puremvc.as3.interfaces.ICommand;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.command.SimpleCommand;

			public class DataCommand extends SimpleCommand implements ICommand
			{
				override public function execute(notification:INotification):void
				{

				}
			}
		}
	

如果你有一个锐利的眼睛,你会发现,我们正面临着我们的朋友INotification类。正如一名调解员,这个类为我们提供了通知的名字和身体,所以我们以同样的方式处理 - 开关:

		package com.flashtuts.controller
		{
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.ICommand;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.command.SimpleCommand;

			public class DataCommand extends SimpleCommand implements ICommand
			{
				override public function execute(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case URLsView.DATA_GET:

						break;
					}
				}
			}
		}
	

因为我们希望该通知告诉代理加载一些数据,我们需要得到门面的代理实例,并得到它的火的功能。我们用同样的方法,我们在我们的调解,并创建一个get函数:

		package com.flashtuts.controller
		{
			import com.flashtuts.model.DataProxy;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.ICommand;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.command.SimpleCommand;

			public class DataCommand extends SimpleCommand implements ICommand
			{
				override public function execute(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case URLsView.DATA_GET:
						proxy.urlsDataGet();

						break;
					}
				}

				private function get proxy():DataProxy
				{
					return facade.retrieveProxy( DataProxy.NAME ) as DataProxy;
				}
			}
		}
	

最后,你会看到,我们调用一个函数内称为“urlsDataGet()”我们代理。这将载入我们的数据,所以我们最好创建它。开辟“DataProxy.as”,并创建一个名为“urlsDataGet()”,这将加载的数据,像这样的功能:

		package com.flashtuts.model
		{
			import com.flashtuts.model.vo.DataVO;
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import flash.display.LoaderInfo;
			import flash.events.Event;
			import flash.events.ProgressEvent;
			import flash.net.URLLoader;
			import flash.net.URLRequest;
			import flash.utils.Dictionary;

			import org.puremvc.as3.interfaces.IProxy;
			import org.puremvc.as3.patterns.proxy.Proxy;

			public class DataProxy extends Proxy implements IProxy
			{
				public static const NAME:String							= 'DataProxy';

				private var indexDic:Dictionary = new Dictionary();

				public function DataProxy()
				{
					super( NAME, new DataVO() );
				}

				public function urlsDataGet():void
				{
					var request:URLRequest = new URLRequest();
					var loader:URLLoader = new URLLoader();

					sendNotification( ProgressView.SHOW );

					request.url = vo.dataURL;

					loader.addEventListener( ProgressEvent.PROGRESS, handleProgress );
					loader.addEventListener( Event.COMPLETE, handleURLsDataGetComplete );

					loader.load( request );
				}

				private function handleURLsDataGetComplete(e:Event):void
				{
					var data:XML = new XML( e.target.data );

					for each ( var url:XML in data..url )
					{
						vo.urlsArray.push( url.toString() );
						vo.urlsDataArray.push( '' );
					}

					sendNotification( URLsView.DATA_READY );
				}

				private function handleProgress(e:ProgressEvent):void
				{
					sendNotification( ProgressView.UPDATE, { percent: Math.round( ( e.bytesLoaded / e.bytesTotal ) * 100 ) } );
				}

				public function get vo():DataVO
				{
					return data as DataVO;
				}
			}
		}
	


你会发现,我们正在利用我们的旁白再次创造一个get函数,使我们可以使用,并添加到它的数据。您应该熟悉加载XML数据,所以我不会走,通过功能,你应该能够看到他们做什么。你也许会奇怪,为什么我运行通过的URL从XML数据的循环和填充一个空字符串数组,以后你会发现...

主要的事情,我会提到“handleProgress()”和“handleURLsDataGetComplete()”功能。他们都将通知发送到应用程序,首先发送一个数据加载的百分比我们的进度来看(还记得我说的通知是由一个名字和身体?),后者发送一个通知到应用程序的说明,我们的第一数据位已完成加载。

最后,因为我们只希望我们的“URLsViewMediator”和的“URLsView”要注册的数据准备好时,我们需要修改申请调解,调解时,该事件发送到注册:

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ApplicationMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ApplicationMediator';

				public function ApplicationMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}

				override public function onRegister():void
				{
					facade.registerMediator( new ProgressViewMediator( viewComponent ) );
				}

				override public function listNotificationInterests():Array
				{
					return [
						URLsView.DATA_READY
					];
				}

				override public function handleNotification(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case URLsView.DATA_READY:
						facade.registerMediator( new URLsViewMediator( viewComponent ) );

						break;
					}
				}
			}
		}
	


代码应该不会太陌生,但你可以看到我们设置的通知,我们希望它来听,然后处理它们。在这种情况下,注册的“URLsViewMediator”运行其的“onRegister()”功能,并建立视图。

我们在未来的里程碑!现在,我们应该看到,我们的应用程序将加载XML数据,然后将此数据传递到我们的的“URLsViewMediator”,这将反过来告诉的“URLsView”创造一些准备为用户点击按钮:


里程碑

给自己拍拍背面为你已经取得了很多!现在,你应该熟悉通知如何发挥应用程序中的一个大的一部分,整个结构所带来的门面一起。下位将是一件轻而易举的...


第12步:处理用户事件

正如我刚才解释,有一种观点将调度用户事件,如鼠标移动,或在这种情况下,点击鼠标。此事件将被拾起其调停,然后决定做什么。由于我们已经设置了“URLsViewMediator”发送按钮的索引内的功能的“handleContainerClick()”,现在我们需要来处理这一事件和随后的数据加载。首先,我们需要建立我们的最终观点和调解。

这里的观点:

		package com.flashtuts.view.component
		{
			import flash.display.Loader;
			import flash.display.Sprite;
			import flash.events.Event;
			import flash.events.MouseEvent;
			import flash.net.URLRequest;
			import flash.text.TextField;
			import flash.text.TextFieldAutoSize;
			import flash.text.TextFormat;

			import gs.TweenLite;

			public class ImagesView extends Sprite
			{
				public static const NAME:String							= 'ImagesView';

				public static const DATA_GET:String						= NAME + 'DataGet';
				public static const DATA_READY:String					= NAME + 'DataReady';
				public static const SHOW:String							= NAME + 'Show';
				public static const HIDE:String							= NAME + 'Hide';
				public static const GO_BACK_CLICKED:String				= NAME + 'GoBackClicked';

				public function init(images:XML):void
				{
					var maxImages:Number = 15;
					var perRow:Number = 5;
					var xRowCount:Number = 0;
					var yRowCount:Number = 0;
					var element:XML;
					var request:URLRequest;
					var loader:Loader;

					for ( var i:Number = 0; i < maxImages; i++ )
					{
						element = images..photo[ i ];

						request = new URLRequest();

						request.url = 'http://farm' + element.@farm + '.static.flickr.com/' + element.@server + '/' + element.@id + '_' +element.@secret + '_t.jpg';

						loader = new Loader();	

						if ( xRowCount == perRow )
						{
							xRowCount = 0;
							yRowCount++;
						}

						loader.contentLoaderInfo.addEventListener( Event.COMPLETE, handleLoaderComplete );

						loader.alpha = 1;
						loader.x = xRowCount * 120;
						loader.y = yRowCount * 120;

						loader.load( request );

						xRowCount++;

						addChild( loader );
					}

					addBackButton();

					alpha = 0;
				}

				private function handleLoaderComplete(e:Event):void
				{
					TweenLite.from( e.target.content, .5, { autoAlpha: 0 } );
				}

				private function addBackButton():void
				{
					var textFormat:TextFormat = new TextFormat();
					var textContainer:Sprite = new Sprite();
					var textField:TextField = new TextField();

					textFormat.color = 0xFFFFFF;
					textFormat.font = 'Arial';

					textContainer.addEventListener( MouseEvent.CLICK, handleContainerClick );

					textContainer.buttonMode = true;
					textContainer.graphics.lineStyle( 1, 0xFFFFFF );
					textContainer.graphics.beginFill( 0x333333 );
					textContainer.graphics.drawRoundRect( 0, 0, 150, 30, 5, 5 );
					textContainer.graphics.endFill();
					textContainer.mouseChildren = false;
					textContainer.x = 430;
					textContainer.y = 350;

					textField.autoSize = TextFieldAutoSize.CENTER;
					textField.defaultTextFormat = textFormat;
					textField.embedFonts = true;
					textField.text = 'Go back';
					textField.x = 75 - ( textField.width / 2 );
					textField.y = 15 - ( textField.height / 2 );

					textContainer.addChild( textField );

					addChild( textContainer );
				}

				private function handleContainerClick(e:MouseEvent=null):void
				{
					if ( numChildren > 0 )
					{
						for ( var i:Number = 0; i < numChildren; i++ )
						{
							removeChildAt( i );
						}

						handleContainerClick();
					}
					else
					{
						dispatchEvent( new Event( GO_BACK_CLICKED, true ) );
					}
				}

				public function show():void
				{
					TweenLite.to( this, .5, { autoAlpha: 1 } );
				}

				public function hide():void
				{
					TweenLite.to( this, .5, { autoAlpha: 0 } );
				}
			}
		}

有鉴于此确实是从Flickr API加载XML数据,建立一个图像的网格和后退按钮。这里的调解:

		package com.flashtuts.view
		{
			import com.flashtuts.model.DataProxy;
			import com.flashtuts.view.component.ImagesView;
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import flash.events.Event;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ImagesViewMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ImagesViewMediator';

				private var imagesView:ImagesView;

				public function ImagesViewMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}

				override public function onRegister():void
				{
					imagesView = new ImagesView();

					imagesView.addEventListener( ImagesView.GO_BACK_CLICKED, handleImagesViewGoBackClicked );

					viewComponent.addChild( imagesView );
				}

				override public function listNotificationInterests():Array
				{
					return [
						ImagesView.DATA_READY
					];
				}

				override public function handleNotification(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case ImagesView.DATA_READY:
						imagesView.init( proxy.vo.urlsDataArray[ body.index ] );

						imagesView.show();

						sendNotification( ProgressView.HIDE );

						break;
					}
				}

				private function handleImagesViewGoBackClicked(e:Event):void
				{
					imagesView.hide();

					sendNotification( URLsView.SHOW );
				}

				private function get proxy():DataProxy
				{
					return facade.retrieveProxy( DataProxy.NAME ) as DataProxy;
				}
			}
		}

再次,这一切都不应该是新的给你,因为我们只是简单地创建一个我们认为的实例,将它添加到舞台上,听众加入到我们认为(和他们的处理程序),然后通知其要听将如何处理他们。

为了处理此通知后,我们更新的应用程序调解最后一次设置它来听到的“URLsView.CLICKED的”通知:

		package com.flashtuts.view
		{
			import com.flashtuts.view.component.ImagesView;
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.IMediator;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.mediator.Mediator;

			public class ApplicationMediator extends Mediator implements IMediator
			{
				public static const NAME:String							= 'ApplicationMediator';

				public function ApplicationMediator(viewComponent:Object=null)
				{
					super( NAME, viewComponent );
				}

				override public function onRegister():void
				{
					facade.registerMediator( new ProgressViewMediator( viewComponent ) );
				}

				override public function listNotificationInterests():Array
				{
					return [
						URLsView.DATA_READY,
						URLsView.CLICKED
					];
				}

				override public function handleNotification(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case URLsView.DATA_READY:
						facade.registerMediator( new URLsViewMediator( viewComponent ) );

						break;

						case URLsView.CLICKED:
						if ( !facade.hasMediator( ImagesViewMediator.NAME ) )
						{
							facade.registerMediator( new ImagesViewMediator( viewComponent ) );
						}

						sendNotification( ImagesView.DATA_GET, body );				

						break;
					}
				}
			}
		}
	


有关此事件的处理有一点要注意:代码做的第一件事是检查已注册调解员。如果没有,它注册了,每个人都用它得到。这样做的原因,而不是重新注册,这是我们要为用户创建一个后退按钮能够回去接另一个Flickr的饲料。因为我们只需要显示和隐藏的按钮,让用户选择,没有必要重建。然而,由于用户将可能选择另一个Flickr的饲料,我们需要重建我们的形象。为了节省复制我们的代码,我们只建立图像时“ImagesViewMediator”已收到事件“ImagesView.DATA_READY”。

由于我们的应用程序发送“ImagesView.DATA_GET”,只要用户选择一个Flickr API,我们需要一个调整“ApplicationFacade”,“DataCommand”和“DataProxy”)处理事件和B)加载数据和发送事件。

我们首先编辑的“ApplicationFacade”增加了“registerCommand()”“initializeController()”函数:

 
  

然后我们告诉“DataCommand”如何处理它(通过代理):

		package com.flashtuts.controller
		{
			import com.flashtuts.model.DataProxy;
			import com.flashtuts.view.component.ImagesView;
			import com.flashtuts.view.component.URLsView;

			import org.puremvc.as3.interfaces.ICommand;
			import org.puremvc.as3.interfaces.INotification;
			import org.puremvc.as3.patterns.command.SimpleCommand;

			public class DataCommand extends SimpleCommand implements ICommand
			{
				override public function execute(notification:INotification):void
				{
					var name:String = notification.getName();
					var body:Object = notification.getBody();

					switch ( name )
					{
						case URLsView.DATA_GET:
						proxy.urlsDataGet();

						break;

						case ImagesView.DATA_GET:
						proxy.imagesDataGet( body.index );

						break;
					}
				}

				private function get proxy():DataProxy
				{
					return facade.retrieveProxy( DataProxy.NAME ) as DataProxy;
				}
			}
		}
	

最后,我们编辑“DataProxy”:

		package com.flashtuts.model
		{
			import com.flashtuts.model.vo.DataVO;
			import com.flashtuts.view.component.ImagesView;
			import com.flashtuts.view.component.ProgressView;
			import com.flashtuts.view.component.URLsView;

			import flash.display.LoaderInfo;
			import flash.events.Event;
			import flash.events.ProgressEvent;
			import flash.net.URLLoader;
			import flash.net.URLRequest;
			import flash.utils.Dictionary;

			import org.puremvc.as3.interfaces.IProxy;
			import org.puremvc.as3.patterns.proxy.Proxy;

			public class DataProxy extends Proxy implements IProxy
			{
				public static const NAME:String							= 'DataProxy';

				private var indexDic:Dictionary = new Dictionary();

				public function DataProxy()
				{
					super( NAME, new DataVO() );
				}

				public function urlsDataGet():void
				{
					var request:URLRequest = new URLRequest();
					var loader:URLLoader = new URLLoader();

					sendNotification( ProgressView.SHOW );

					request.url = vo.dataURL;

					loader.addEventListener( ProgressEvent.PROGRESS, handleProgress );
					loader.addEventListener( Event.COMPLETE, handleURLsDataGetComplete );

					loader.load( request );
				}

				private function handleURLsDataGetComplete(e:Event):void
				{
					var data:XML = new XML( e.target.data );

					for each ( var url:XML in data..url )
					{
						vo.urlsArray.push( url.toString() );
						vo.urlsDataArray.push( '' );
					}

					sendNotification( URLsView.DATA_READY );
				}

				public function imagesDataGet(index:Number):void
				{
					var request:URLRequest = new URLRequest();
					var loader:URLLoader = new URLLoader();

					sendNotification( ProgressView.SHOW );

					if ( vo.urlsDataArray[ index ] == '' )
					{
						request.url = vo.urlsArray[ index ];

						indexDic[ loader ] = index;

						loader.addEventListener( ProgressEvent.PROGRESS, handleProgress );
						loader.addEventListener( Event.COMPLETE, handleImagesDataGetComplete );

						loader.load( request );
					}
					else
					{
						handleImagesDataGetFinished( index );
					}
				}

				private function handleImagesDataGetComplete(e:Event):void
				{
					var data:XML = new XML( e.target.data );

					vo.urlsDataArray[ indexDic[ e.target ] ] = data;

					handleImagesDataGetFinished( indexDic[ e.target ] );
				}

				private function handleImagesDataGetFinished(index:Number):void
				{
					sendNotification( ImagesView.DATA_READY, { index: index } );
				}

				private function handleProgress(e:ProgressEvent):void
				{
					sendNotification( ProgressView.UPDATE, { percent: Math.round( ( e.bytesLoaded / e.bytesTotal ) * 100 ) } );
				}

				public function get vo():DataVO
				{
					return data as DataVO;
				}
			}
		}
	

你会注意到,我在“imagesDataGet()”函数执行的ActionScript巫术位。再次,它只是加载一些XML,没什么特别,但它只会加载一次独特的数据。这是有VOS和使用索引按钮被按下时的美丽。本质上发生什么情况是,如果用户按下按钮2(第三),它会检查,看看是否该指数绑定到它的任何资料(网址被首次加载时创建一个空字符串数组的循环)。如果有,就没有必要再加载数据,否则数据的加载和使用的美容字典,我们可以放入数组。

最后,这个代理,然后推的通知“ImagesView.DATA_READY的”回我们的应用程序,我们认为会发生一些神奇的......


你已经做到了!

还有你的第一个PureMVC的应用程序!你应该知道有一个PureMVC的作品如何理解和最有价值的是,一具骷髅,所以当它来开发更多的应用程序,你可以利用这个代码,返工,或只是用它作为参考。


脚注

PureMVC是一个伟大的工具,我用它在许多项目,但之间使用ActionScript 3.0和MXML中有一些关键的差别。当你使用MXML,您可以添加使用XML,像这样的意见:

		
		

			
				
			

			

			
				
				

			

		
	

Flex会自动创建这些意见,而不是让你推迟他们的创作。因此,当你准备深入到更多的PureMVC的,他们已经创建了一个小的应用程序,它告诉你如何使用延迟的实例

我希望你喜欢本教程后,觉得自由离开任何疑问或反馈的意见!

你可能感兴趣的:(As3,Pure,MVC,框架,function,string,import,object,class)