现在的位置: 首页 > 综合 > 正文

1.4.2 使用ActionScript类

2013年04月25日 ⁄ 综合 ⁄ 共 3957字 ⁄ 字号 评论关闭
文章目录

1.4.2 使用ActionScript类

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

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】

抱歉!评论已关闭.