Spring ActionScript入门教程(2)-一个简单的实例

在这个部分，我们来使用前一章学到的知识，建立一个简单的Spring ActionScript的应用。你可以认为这是学习Spring ActionScript的一个类似于“Hello World”的例子，在这个例子里，我们将创建一个简单的列表，来显示一些模拟的数据，好，让我们开始下一步的操作。

图1：实例界面截图

准备工作

1. 安装Flex Builder
2. 准备好XML编辑工具，因为Spring ActionScript中依赖XML来描述结构，所以一个好用的XML编辑器是必不可少的，你可以为Flex Builder安装XMLBuddy插件，也可以使用Notpad++等独立的文本编辑器

开始

首先打开Flex Builder3 （当然也可以是Flash Builder4），创建一个新项目（Flex项目），命名为“SpringActionScriptDemo”，其它保持默认，直接点击“Finish”完成，短暂的时间过后，Flex Builder就为你创建了一个空项目，并且创建了一个SpringActionScriptDemo.mxml的程序文件，在编辑器中处于打开状态。

编辑器中的代码应该如下面所示：

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. </mx:Application>

复制代码

当然这只是一个空的Application，里面什么也没有，然后我们需要做的是，把Spring ActionScript的类包SWC文件引入进来，找到上个章节中提供下载的压缩包，解压后你会看到若干的SWC文件，将这些文件转移到你的项目中的libs目录，这个目录是默认的项目引用库，放在这里是为了让你的代码可以引用到这些类包。

转移好之后，你的libs目录看起来应该是这个样子：

图2：Libs结构

然后我们将在src目录下面建立一些文件。下面的步骤如无特殊说明，新建文件都基于src目录，这里因为文件足够少而且简单所以没有分目录存放，实际上一个正式的项目的文件复杂度远大于此，需要仔细拆分和优化目录结构。

首先我们建立一个命名为“global.prop”的文本文件，用来存放全局的一些变量，这里我们先存放一下界面的标题，输入以下的文本：

siteName=test site

因为这个应用要显示一些虚拟的数据，所以我们建立一个命名为"data.xml" 的XML文件，并输入下面的内容：

1. <objects>
2. <object id="myData" class="mx.collections.ArrayCollection">
3. <constructor-arg>
4. <array>
5. <value>Zhang San</value>
6. <value>Li Si</value>
7. <value>Wang wu</value>
8. <value>11111</value>
9. <value>22222222222</value>
10. <value>33333333333</value>
11. </array>
12. </constructor-arg>
13. </object>
14. </objects>

复制代码

XML内容分析：我们可以看到，我在里面声明了一个object，id是myData，这个一会儿我们就会引用到，类别是ArrayCollection（ArrayCollection是Flex的一种数据集合），然后通过使用construtor-arg传递一个数组对象进去，实现了给ArrayCollection赋值。

下面建立最重要的一个XML配置文件，命名为”appliction-context.xml“，输入下面的内容：

1. <objects>
2. <property file="global.prop"/>
3. <import file="data.xml"/>
4. <object id="container" class="mx.containers.Panel">
5. <property name="title" value="${siteName}" />
6. <method-invocation name="addChild">
7. <arg ref="myList" />
8. </method-invocation>
9. </object>
10. <object id="myList" class="mx.controls.List">
11. <property name="width" value="500" />
12. <property name="height" value="500" />
13. <property name="dataProvider" ref="myData" />
14. </object>
15. </objects>

复制代码

XML分析：第一行和第二行分别引入了变量文件和定义数据的XML文件，然后我们定义了两个显示对象，一个是Panel，一个是List。我们设置了List的一些属性，包括定义dataProvider，引用了在data.xml中定义的myData的数据，然后我们调用了Panel的addChild方法，将List放到Panel中。

到这里XML部分的配置工作就做好了，下面我们来看如何在Flex中载入并解析这些配置文件：

回到SpringActionScriptDemo.mxml，建立一个代码块儿，然后输入建立IoC容器的代码，之后整体的代码应该如下所示：

普通浏览 复制代码

1. <?xml version= "1.0" encoding= "utf-8"?>
2. <mx: Application xmlns:mx= "http://www.adobe.com/2006/mxml" creationComplete= "init()" layout= "absolute">
3.     <mx:Script>
4.         <! [CDATA [
5.             import org.springextensions.actionscript.context.support.FlexXMLApplicationContext ;
6.              private var context:FlexXMLApplicationContext ;
7.              private function init ( ): void {
8.                 var appContextPath:String =  "application_context.xml" ; //定义xml的地址
9.                 context =  new FlexXMLApplicationContext (appContextPath ) ; //创建一个IoC容器
10.                 context.addEventListener (Event.COMPLETE,onIoCLoadComplete ) ; //添加事件侦听器，侦听完成事件，执行回调
11.                 context.load ( ) ; //加载配置文件
12.             }
13.              private function onIoCLoadComplete (e:Event ): void {
14.                 addChild (context.getObject ( "container" ) ) ; //加载配置结束后，将 container容器（即Panel）添加到显示列表
15.             }
16.          ] ]>
17.     </mx:Script>
18. </mx: Application>

按下F11键，调试项目，怎么样，是否看到一个显示数据的列表了？

好了，到这里一个简单的Spring ActionScript的例子就完成了，我们将在下一个章节中深入探讨如何结合Cairngorm，这样才能适应一个大型项目的开发流程。