使用 Parsley 框架构建 Flex 应用程序
2009-08-10 17:35
639 查看
在最近研究了“Swiz”和“Spring ActionScript”(1、2、3)之后,我决定在新的 Parsley 框架版本中试验一下,构建 inSync(简单的 Contact Management 应用程序,我经常用于试验和演示 Flex 和 Adobe AIR 中的不同特性和技术)的 Parsley 版本。
Parsley 最初是一个依赖注入(Dependency Injection)框架。它还提供了一个非常有趣的消息传递基础结构。我不打算在此详细介绍依赖性注入:以前的 Swiz 和 Spring ActionScript 文章提供了一些背景信息,还详细列出了许多资源。
如果您只想运行应用程序并深入研究代码,可以访问以下链接:
单击此处运行应用程序。
单击此处查看源代码。
对象配置
Parsley 支持使用 MXML(比如 Swiz)、XML(比如 Spring ActionScript)、ActionScript 或者任意组合这些方法来配置应用程序的核心对象。可以扩展该框架并创建自己的配置机制。
对于 inSync 应用程序,我使用了一个简单的 MXML 配置(Config.mxml),其定义如下:
注意:在实际的应用程序中,您可能不希望在源代码中硬编码服务的端点。可以使用 XML 配置选项以更加“具体化”的形式配置端点。单击此处了解关于此主题的更多信息。
框架初始化
使用对应于所选配置方法的 ContextBuilder 类来初始化 Parsley 框架。下面是 inSync 应用程序的主应用程序文件。Parsley 在应用程序的 preinitialize 事件中初始化。
依赖注入
Parsley 支持构造函数注入、方法注入和属性注入(根据类型或 id 进行注入)。
在下面的例子(ContactForm.mxml)中,框架将注入 IContactService 接口的一个特定实现。在本例中,将注入在 Config.mxml 中创建的 ContactService 实例。这是一个按类型注入的示例。对接口进行编码可以将视图从特定的 IContactService 实现中解耦出来。
注意:Parsley 不会强迫您使用任何特定的设计模式。为了简单起见,在本示例应用程序中,我将一个服务直接注入到视图中。使用接口可以提供一定的解耦级别,但是您也可以使用其他模式(比如 Presentation Model)来获得更高的抽象级别。Parsley 的依赖注入(Dependency Injection)和消息传递(Messaging)基础结构使这些模式的实现更加简单。
注意,为了在将视图添加到舞台上时注入其依赖性,视图必须分派“configureIOC”事件。
消息传递
Parsley 提供了一种通用消息传递基础结构,支持以一种解耦的、灵活且易用的方式在对象之间交换消息:
事件分派程序和时间处理程序彼此互不了解。
事件分派程序和事件处理程序已从框架中解耦出来:可以以 Flex 的方式分派事件。
作为一个示例,我们看一下 inSync 中的搜索特性:
Toolbar 类包含一个简单的 TextInput,支持用户指定一个搜索条件。
ContactList 类在一个 DataGrid 中显示搜索结果。
Toolbar 类定义如下(为了保持条理清晰,已删除不重要的代码):
注意,它在搜索输入字段的内容发生变化时分派一个 SearchEvent 事件。
该事件被定义为一个托管事件(使用 ManagedEvents 注释),表示框架将确保关注该事件的所有实体都会收到该事件。
如何注册托管事件的监听器呢?只需使用 [MessageHandler] 注释一个函数,无论显示对象层次结构如何,或者无论事件是否浮升(bubble),该函数都会自动成为该事件的事件处理程序。
下面展示了如何在 ContactList 中注册监听器(为了保持条理清晰,已删除不重要的代码):
借助简单的 [MessageHandler] 注释,每次在应用程序中分派函数参数的数据类型时都将调用该处理程序。如果您需要更严格的控制,可以使用选择器符号来指定事件类型。例如,在 MainView.mxml 中,我们将 contactDeleted 函数注册为 ContactEvent.DELETED 事件的一个处理程序,如下所示。
Parsley 框架还有更多消息传递功能。例如,可以使用 [MessageBinding] 将一个对象的属性绑定到一个事件的对应属性。
安装说明
1 从此处下载项目
2 将其导入 Flex Builder
3 运行应用程序。应用程序默认配置为使用 MockService (ContactServiceMock),所以它运行时不需要任何后端。
如果希望使用 Remoting service 代替 MockService:
4 将 Config.mxml 中的 <services:ContactServiceMock/> 替换为 <services:ContactServiceRemote/>
5 安装功能全面的 BlazeDS 服务器。
6 下载 insync-parsley-java.zip 并将其解压到本地文件系统中。
7将 classes/insync 复制到 blazeds/tomcat/webapps/samples/WEB-INF/classes/insync 文件夹中。
8 将以下目标添加到 blazeds/tomcat/webapps/samples/WEB-INF/flex/remoting-config.xml 文件中:
9 将 insync/sampledb/insync 复制到 blazeds/sampledb/insync 文件夹中
10 编辑 blazeds/sampledb 文件夹中的 server.properties,修改文件(如下所示),将 insync 数据库添加到启动步骤中。
11 启动数据库(startdb.bat 或 startdb.sh)
12 启动 BlazeDS
13 运行应用程序
本文来自:
http://coenraets.org/blog/2009/07/building-a-flex-application-with-the-parsley-framework/
Parsley 最初是一个依赖注入(Dependency Injection)框架。它还提供了一个非常有趣的消息传递基础结构。我不打算在此详细介绍依赖性注入:以前的 Swiz 和 Spring ActionScript 文章提供了一些背景信息,还详细列出了许多资源。
如果您只想运行应用程序并深入研究代码,可以访问以下链接:
单击此处运行应用程序。
单击此处查看源代码。
对象配置
Parsley 支持使用 MXML(比如 Swiz)、XML(比如 Spring ActionScript)、ActionScript 或者任意组合这些方法来配置应用程序的核心对象。可以扩展该框架并创建自己的配置机制。
对于 inSync 应用程序,我使用了一个简单的 MXML 配置(Config.mxml),其定义如下:
<?xml version="1.0" encoding="utf-8"?> <Object xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:services="insync.parsley.services.*"> <mx:RemoteObject id="contactRO" destination="contacts" endpoint="http://localhost:8400/samples/messagebroker/amf" showBusyCursor="true" /> <services:ContactService /> </Object>
注意:在实际的应用程序中,您可能不希望在源代码中硬编码服务的端点。可以使用 XML 配置选项以更加“具体化”的形式配置端点。单击此处了解关于此主题的更多信息。
框架初始化
使用对应于所选配置方法的 ContextBuilder 类来初始化 Parsley 框架。下面是 inSync 应用程序的主应用程序文件。Parsley 在应用程序的 preinitialize 事件中初始化。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:views="insync.parsley.views.*" paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0" preinitialize="FlexContextBuilder.build(Config)"> <mx:Script> <!--[CDATA[ import org.spicefactory.parsley.flex.FlexContextBuilder; ]]--> </mx:Script> <mx:Style source="styles.css" /> <views:MainView /> </mx:Application>
依赖注入
Parsley 支持构造函数注入、方法注入和属性注入(根据类型或 id 进行注入)。
在下面的例子(ContactForm.mxml)中,框架将注入 IContactService 接口的一个特定实现。在本例中,将注入在 Config.mxml 中创建的 ContactService 实例。这是一个按类型注入的示例。对接口进行编码可以将视图从特定的 IContactService 实现中解耦出来。
注意:Parsley 不会强迫您使用任何特定的设计模式。为了简单起见,在本示例应用程序中,我将一个服务直接注入到视图中。使用接口可以提供一定的解耦级别,但是您也可以使用其他模式(比如 Presentation Model)来获得更高的抽象级别。Parsley 的依赖注入(Dependency Injection)和消息传递(Messaging)基础结构使这些模式的实现更加简单。
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" addedToStage="dispatchEvent(new Event('configureIOC', true))"> <mx:Script> <!--[CDATA[ import insync.parsley.model.Contact; import insync.parsley.services.IContactService; [Inject] public var service:IContactService; [Bindable] public var contact:Contact; private function save():void { contact.firstName = firstName.text; contact.lastName = lastName.text; contact.email = email.text; service.save(contact); } private function remove():void { service.remove(contact); } ]]--> </mx:Script> <mx:Form> <mx:FormItem label="Id"> <mx:TextInput text="{contact.id}" enabled="false"/> </mx:FormItem> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" text="{contact.firstName}"/> </mx:FormItem> <mx:FormItem label="Last Name"> <mx:TextInput id="lastName" text="{contact.lastName}"/> </mx:FormItem> <mx:FormItem label="Email"> <mx:TextInput id="email" text="{contact.email}"/> </mx:FormItem> </mx:Form> <mx:HBox left="12" bottom="12"> <mx:Button label="Save" click="save()"/> <mx:Button label="Delete" click="remove()"/> </mx:HBox> </mx:Canvas>
注意,为了在将视图添加到舞台上时注入其依赖性,视图必须分派“configureIOC”事件。
消息传递
Parsley 提供了一种通用消息传递基础结构,支持以一种解耦的、灵活且易用的方式在对象之间交换消息:
事件分派程序和时间处理程序彼此互不了解。
事件分派程序和事件处理程序已从框架中解耦出来:可以以 Flex 的方式分派事件。
作为一个示例,我们看一下 inSync 中的搜索特性:
Toolbar 类包含一个简单的 TextInput,支持用户指定一个搜索条件。
ContactList 类在一个 DataGrid 中显示搜索结果。
Toolbar 类定义如下(为了保持条理清晰,已删除不重要的代码):
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" addedToStage="dispatchEvent(new Event('configureIOC', true))"> <mx:Metadata> [ManagedEvents("search")] </mx:Metadata> <mx:Script> <!--[CDATA[ import insync.parsley.events.SearchEvent; ]]--> </mx:Script> <mx:Label text="Search:" top="18" right="164"/> <mx:TextInput id="searchBox" right="0" top="16" change="dispatchEvent(new SearchEvent(SearchEvent.SEARCH, searchBox.text))"/> </mx:Canvas>
注意,它在搜索输入字段的内容发生变化时分派一个 SearchEvent 事件。
该事件被定义为一个托管事件(使用 ManagedEvents 注释),表示框架将确保关注该事件的所有实体都会收到该事件。
如何注册托管事件的监听器呢?只需使用 [MessageHandler] 注释一个函数,无论显示对象层次结构如何,或者无论事件是否浮升(bubble),该函数都会自动成为该事件的事件处理程序。
下面展示了如何在 ContactList 中注册监听器(为了保持条理清晰,已删除不重要的代码):
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" addedToStage="dispatchEvent(new Event('configureIOC', true))"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; import mx.collections.ArrayCollection; import mx.rpc.events.FaultEvent; import mx.rpc.AsyncToken; import mx.rpc.AsyncResponder; import mx.rpc.events.ResultEvent; import insync.parsley.events.SearchEvent; import insync.parsley.services.IContactService; [Inject] [Bindable] public var service:IContactService; [Bindable] public var contacts:ArrayCollection; [MessageHandler] public function searchHanlder(event:SearchEvent):void { service.getContactsByName(searchStr).addResponder(new AsyncResponder(getContacts_result, faultHandler)); } private function getContacts_result(event:ResultEvent, token:AsyncToken):void { contacts = event.result as ArrayCollection; } private function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString); } ]]--> </mx:Script> <mx:DataGrid id="dg" dataProvider="{contacts}" width="100%" top="0" left="0" right="0" bottom="0"/> </mx:Canvas>
借助简单的 [MessageHandler] 注释,每次在应用程序中分派函数参数的数据类型时都将调用该处理程序。如果您需要更严格的控制,可以使用选择器符号来指定事件类型。例如,在 MainView.mxml 中,我们将 contactDeleted 函数注册为 ContactEvent.DELETED 事件的一个处理程序,如下所示。
[MessageHandler(selector="contactDeleted")] public function contactDeletedHandler(event:ContactEvent):void { }
Parsley 框架还有更多消息传递功能。例如,可以使用 [MessageBinding] 将一个对象的属性绑定到一个事件的对应属性。
[MessageBinding(messageProperty="result",type=" mx.rpc.events.ResultEvent")] public var contacts:ArrayCollection;
安装说明
1 从此处下载项目
2 将其导入 Flex Builder
3 运行应用程序。应用程序默认配置为使用 MockService (ContactServiceMock),所以它运行时不需要任何后端。
如果希望使用 Remoting service 代替 MockService:
4 将 Config.mxml 中的 <services:ContactServiceMock/> 替换为 <services:ContactServiceRemote/>
5 安装功能全面的 BlazeDS 服务器。
6 下载 insync-parsley-java.zip 并将其解压到本地文件系统中。
7将 classes/insync 复制到 blazeds/tomcat/webapps/samples/WEB-INF/classes/insync 文件夹中。
8 将以下目标添加到 blazeds/tomcat/webapps/samples/WEB-INF/flex/remoting-config.xml 文件中:
<destination id="contacts"> <properties> <source>insync.dao.ContactDAO</source> <scope>application</scope> </properties> </destination>
9 将 insync/sampledb/insync 复制到 blazeds/sampledb/insync 文件夹中
10 编辑 blazeds/sampledb 文件夹中的 server.properties,修改文件(如下所示),将 insync 数据库添加到启动步骤中。
server.database.0=file:flexdemodb/flexdemodb server.dbname.0=flexdemodb server.database.1=file:insync/insync server.dbname.1=insync server.port=9002 server.silent=true server.trace=false
11 启动数据库(startdb.bat 或 startdb.sh)
12 启动 BlazeDS
13 运行应用程序
本文来自:
http://coenraets.org/blog/2009/07/building-a-flex-application-with-the-parsley-framework/
相关文章推荐
- 使用ColdFusion和Flex构建您的第一个数据管理应用程序
- 使用ArcGIS API for Flex构建Android和iOS移动地图应用程序
- 使用Flash Builder 4构建Flex应用程序,以利用在C#中的基于.NET的Web服务
- [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序
- 使用ColdFusion和Flex构建您的第一个数据管理应用程序
- [转]学习使用 Agavi 框架构建可伸缩的 Web 应用程序
- 使用 SailingEase WinForm 框架构建复合式应用程序(插件式应用程序)
- 在 .NET 4 中使用托管可扩展性框架构建可组合的应用程序
- 使用 SailingEase WinForm 框架构建复合式应用程序(插件式应用程序)
- 使用 SailingEase WinForm 框架构建复合式应用程序(插件式应用程序)
- 使用Flex构建应用程序的十大误区
- 使用Flex构建Web和移动参考应用程序
- Flex快速入门系列之三:Parsley框架简单使用(IOC以及message机制)
- 【转】使用Flex 4.5 SDK和Flash Builder 4.5构建Web和移动参考应用程序
- 使用 IBM Rational Functional Tester测试 Windows 应用程序: 如何构建结构良好的测试框架
- 使用ColdFusion和Flex构建您的第一个数据管理应用程序[英文版]
- Java并发框架——AQS之如何使用AQS构建同步器
- 在 Oracle 数据库上使用 Visual Studio 2005 或 2008 构建 .NET 应用程序
- 使用Eric构建使用Caffe应用程序
- 利用resteasy框架构建rest webservice----第二波:使用不同的方式让resteasy发布我们的restful webservice 服务(实例、教程)