1.4.2 使用ActionScript类

1.4.2 使用ActionScript类

http://book.51cto.com  2008-12-30 14:47  杨占坡/杨铭/翁颖  清华大学出版社  我要评论(0)

• 摘要：《Flex3 RIA开发详解与精深实践--企业级Web应用与AIR桌面应用》第1章Flex 3程序设计基础，本章内容介绍Flex的背景和技术特点，并通过示例程序来展示Flex的界面效果和技术内涵。本节为大家介绍的是使用ActionScript类。
• 标签：ActionScript  Flex  RIA  Web应用  AIR桌面应用
• Oracle帮您准确洞察各个物流环节

1.4.2  使用ActionScript类

在上面的示例中，我们把ActionScript代码嵌入到MXML中使用，如果大量的程序脚本都集中在MXML文件内，会给开发和维护都会带来极大的不便，因此在开发时要注意尽量将ActionScript代码从MXML文件中分离出去。

对ActionScript代码进行分离的最简单方法也是通过<mx:Script>标签来实现，需要设置<mx:Script>标签的source属性。例如我们的ActionScript文件是includes文件夹下的tools.as，那么可以通过<mx:Script source="includes/tools.as">来实现对ActionScript文件的引入，这样ActionScript的代码部分可以从MXML中分离出去。

但是仅仅用上述方式分离代码还是不够的，这种方式仅仅在书写上将ActionScript代码单独分离出去，与HTML中引入JavaScript的方式是完全一致的，而文件对实际的程序设计和代码维护并没有起到作用，因此使用<mx:Script>的source属性容易造成误区，导致ActionScript的滥用。对于规模较小或逻辑很清晰的RIA应用，仅使用ActionScript方法就可以满足大部分要求，而对于一个较大的软件项目或者比较复杂的RIA应用，必须对ActionScript类进行设计。

ActoinScript是面向对象的程序设计语言，而类是面向对象程序设计语言的精髓。面向对象的特性(封装、继承和多态)都被ActionScript很好地支持。使用ActionScript进行开发时，可以使用所有的面向对象特性。

在SDK的功能支持上提供了完善的API，使用ActionScript类可以实现系统的所有逻辑操作和数据模型处理，实现对系统的分层开发，同时也用于进行企业级模块的构建；对于界面开发，可以使用ActionScript类对现有的MXML类继承并进行定制化开发，也可以在组件操作上实现自定义的功能。

ActionScript使用包(Package)对类进行组织，定义一个包的同时，相当于隐含规定了一个命名空间，可以很好地解决类的组织问题。不同的包下可以放置同名的ActionScript类，在不同的包中调用类需要用Import语句来导入，因此可以很好地避免同名类的冲突问题。对于类文件在计算机中的物理位置-- 需要用与包名称相对应的文件夹名来存放，如net.airdev.book这样一个包下的类文件，应该在net\airdev\book\这样的文件夹路径之下进行保存，包结构与文件结构完全对应。有Java开发背景的开发者对包肯定不会陌生，ActionScript中包的使用与Java中是基本一致的。

下面对一个以Flex实现的四则运算计算器程序进行结构设计，并在程序中实现一个自定义组件，程序设计类图如图1.5所示。

 

图1.5  Calculator程序设计类图

我们把MXML文件视为一个控制表现层的类Class4MXML，在MXML中要建立输入框、计算方法选择按钮和计算按钮，其中计算按钮使用一个继承自Button的自定义组件MyButton。

程序需要负责计算的功能模块，因此我们设计一个Calculator类，这个类提供一个计算方法run，该方法需要三个参数，两个操作数arg1、arg2和一个计算方法标记method。

代码文件夹结构如下：

C:\user\test.mxml
C:\user\myControls\Calculator.as
C:\user\myControls\MyButton.as
示例1.3a  计算器应用程序的MXML代码
<!--Test.mxml-->

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml xmlns:cmp=
"myControls.*" >
<!--声明一个名为cmp的命名空间，以此来引用myControls包中的自定义组件-->

<mx:Script>
<![CDATA[
import myControls.*;
//通过import命令导入myControls包中的类
var calcul = new Calculator();
//实例化一个Calculator类
]]>
</mx:Script>

<mx:Panel title="Flex ActionScript Test" paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10" layout="absolute" height="180" width="304">
<!--把Panel的layout属性设置为absolute，从而对这个Panel上的组件进行坐标定位-->

<mx:Label id="ta1" text="Calculator Test" fontWeight="bold" fontSize="16"
width="250" height="30" x="10" y="10"/>
<mx:TextInput id="n1" width="77" x="10" y="46"/>
<mx:TextInput id="n2" width="77" x="198" y="46"/>
<mx:TextInput id="res" width="77" x="74" y="99" enabled="false"/>
<!--设置输入和输出所需要的TextInput组件-->

<cmp:MyButton click="res.text=calcul.run(Number(n1.text),
Number(n2.text),tp.value).toString()" x="196.5" y="99"/>
<!--配置一个自定义组件MyButton，并设定该组件的单击事件执行
calc1的run方法，并将结果转换成String类型，显示在id为res的TexInput组件上-->

<mx:Label x="47.5" y="101" text="=" width="18"/>

<mx:ComboBox id="tp" x="112" y="46" width="60">
<mx:dataProvider>
<mx:Array>
<mx:Object label="+" data="0" />
<mx:Object label="-" data="1" />
<mx:Object label="*" data="2" />
<mx:Object label="/" data="3" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<!--配置可选择的操作符，支持四则运算-->

</mx:Panel>
</mx:Application>

这个MXML的编写方法与前面的示例基本一致，只是增加了命名空间以支持自定义组件Mybutton的使用，并对各个组件的定位进行了一些坐标控制。

示例1.3b  计算器应用程序的ActionScript代码

//Calculator.as

package myControls {
//包声明

public class Calculator {
//类声明

public function run(a:Number,b:Number,c:Number):Number {
//函数声明。变量a和b为操作数，变量c为计算类型

var res:Number;
//计算结果通过res变量返回

if(c==0){
res = a + b;
}
else if(c==1){
res = a - b;
}
else if(c==2){
res = a * b;
}
else if(c==3){
res = a / b;
}
return res;
}
}
}

//MyButton.as

package myControls {

import mx.controls.Button;
import flash.events.MouseEvent;
import mx.controls.Label;

public class MyButton extends Button {

public function MyButton() {
this.label = "GO";
this.setActualSize(100, 30);
}
}
}

示例1.3的程序由以上3个程序文件组成，text.mxml为表现层，在MXML初始化时创建了一个Calculator的实例；Calculator.as和MyButton.as 分别对应两个功能模型，Calculator类提供了一个计算器方法，而MyButton类则继承了MXML的标准组件Button类，本程序中的自定义组件仅仅是在组件构造方法中实现了对label属性和定位的初始化，在实际应用过程中，对组件类的继承可以进行更复杂的定制化操作。

程序运行效果如图1.6所示。

 

图1.6  Calculator程序的运行效果

【责任编辑：云霞 TEL：（010）68476606】