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

转载:http://www.riameeting.com/node/449

在这个部分,我们来使用前一章学到的知识,建立一个简单的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,这样才能适应一个大型项目的开发流程。

附件中是本实例的源码。

附件下载

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏