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

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

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

图1：实例界面截图

准备工作

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

开始

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

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



<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">


</mx:Application>

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

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

图2：Libs结构

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

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

siteName=test site

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



<objects>


	<object id="myData" class="mx.collections.ArrayCollection">


		<constructor-arg>


			<array>


				<value>Zhang San</value>


				<value>Li Si</value>


				<value>Wang wu</value>


				<value>11111</value>


				<value>22222222222</value>


				<value>33333333333</value>


			</array>


		</constructor-arg>


	</object>


</objects>

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

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



<objects>


	<property file="global.prop"/>


	<import file="data.xml"/>


	<object id="container" class="mx.containers.Panel">


		<property name="title" value="${siteName}" />


		<method-invocation name="addChild">


			<arg ref="myList" />


		</method-invocation>


	</object>


	<object id="myList" class="mx.controls.List">


		<property name="width" value="500" />


		<property name="height" value="500" />


		<property name="dataProvider" ref="myData" />


	</object>


</objects>

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

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

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



<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute">


	<mx:Script>


		<![CDATA[


			import org.springextensions.actionscript.context.support.FlexXMLApplicationContext;


			private var context:FlexXMLApplicationContext;


			private function init():void {


				var appContextPath:String = "application_context.xml";//定义xml的地址


				context = new FlexXMLApplicationContext(appContextPath);//创建一个IoC容器


				context.addEventListener(Event.COMPLETE,onIoCLoadComplete);//添加事件侦听器，侦听完成事件，执行回调


				context.load();//加载配置文件


			}


			private function onIoCLoadComplete(e:Event):void {


				addChild(context.getObject("container"));//加载配置结束后，将 container容器（即Panel）添加到显示列表


			}


		]]>


	</mx:Script>


</mx:Application>

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

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

附件中是本实例的源码。

附件下载

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

准备工作

开始

相关推荐

热门标签

分类

链接表

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

支付宝扫一扫打赏

微信扫一扫打赏