|
1.4 ActionScript
ActionScript是為Adobe Flash設(shè)計的面向?qū)ο蟮某绦蛟O(shè)計語言，在Flex開發(fā)中，ActionScript的基本作用類似于傳統(tǒng)網(wǎng)頁開發(fā)中的JavaScript，同時ActionScript還要負(fù)責(zé)Flex程序的邏輯控制和業(yè)務(wù)建模。ActionScript遵循歐洲計算機制造商協(xié)會(ECMA)通過的ECMAScript標(biāo)準(zhǔn)，而ECMAScript出自JavaScript派生出的標(biāo)準(zhǔn)ECMA-262，因此無論是使用語法還是技巧方面，ActionScript與JavaScript都非常相似。
作為Flex技術(shù)的組成部分，ActionScript充當(dāng)著更加重要的角色。如果說MXML是Flex亮麗的外表，那么ActionScipt就賦予了Flex聰慧的靈魂。對于開發(fā)者而言，在ActionScript上所下的功夫要大于MXML，MXML作為界面表現(xiàn)層需要更多的是外觀設(shè)計，而ActionScript則需要擔(dān)當(dāng)起用戶交互、數(shù)據(jù)處理和業(yè)務(wù)邏輯處理的重任。不僅如此，在MXML中所使用的Panel、Label等Flex內(nèi)建組件都是基于ActionScript類實現(xiàn)的，應(yīng)用ActionScript可以繼承這些內(nèi)建的組件對象來創(chuàng)建自定義的Flex組件，使得開發(fā)的靈活性大大增加。ActionScript的應(yīng)用還可以涉及到表現(xiàn)層數(shù)據(jù)模型以及異步遠(yuǎn)程請求及響應(yīng)的事務(wù)處理。
我們可以通過<mx:Script>標(biāo)簽在MXML文件中插入ActionScript代碼或?qū)階ctionScript類文件。而在編譯過程中，ActionScript代碼和MXML代碼都會被分離成ActionScript類，最終編譯器連接所有的ActionScript類，編譯生成SWF文件。
1.4.1 在MXML中使用ActionScript腳本
MXML使用<mx:Script>標(biāo)簽實現(xiàn)對ActionScript的內(nèi)部編譯支持，因此，ActionScript腳本代碼可直接在標(biāo)簽內(nèi)編寫，此時ActionScript以方法為基本單位獨立作用，可在MXML代碼中直接調(diào)用。這里需要注意的是，MXML內(nèi)部嵌入ActionScript代碼的方式并非使用了單獨的編譯機制，在MXML進(jìn)行編譯的過程中，內(nèi)部的ActionScript代碼會被抽取出去并創(chuàng)建獨立的ActionScript類文件，最后組合到SWF文件之中。
下面來看一看在MXML內(nèi)部使用ActionScript的示例程序。
示例1.2 使用ActionScript腳本
<?xml version="1.0" encoding="utf-8"?>
<!--此示例程序中要使用中文，因此進(jìn)行編碼聲明，請注意保存時選擇正確的編碼-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
public function changeText():void {
disp1.text = "使用ActionScript";
}
]]>
</mx:Script>
<mx:Panel title="Flex ActionScript Test" paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10" x="10" y="10" fontSize="12">
<mx:Label id="disp1" text="Hello World. 世界，你好！" fontWeight="normal"
fontSize="24" fontFamily="Times New Roman" fontStyle="italic"
alpha="1.0"/>
<mx:Button label="點擊這里" fontSize="16" click="changeText()"/>
</mx:Panel>
</mx:Application>
示例1.2的程序基本是對上一個HelloWorld示例的擴(kuò)充，我們對Label添加了一個id屬性，并在<mx:Script>中對這個id進(jìn)行引用，請?zhí)貏e注意<mx:Script>標(biāo)簽在MXML中的引用方式，其內(nèi)容為ActionScript代碼，因此要用<![CDATA[ ]]>括起來保證對其作為一個字符內(nèi)容的引用，否則ActionScript代碼中的操作符很容易與XML的關(guān)鍵字發(fā)生沖突，如<、>、&等符號在XML中都有特定的意義。
下面來看看這個示例的運行效果。
如圖1.3所示，這次運行的效果多了一個按鈕組件，即代碼中的<mx:Button>，并且我們設(shè)置了按鈕組件的click屬性，即設(shè)置了按鈕的單擊觸發(fā)為執(zhí)行ActionScript方法changeText()，接下來可以單擊按鈕查看效果，結(jié)果如圖1.4所示。
圖1.3 ActionScript測試運行效果一
圖1.4 ActionScript測試運行效果二
在圖1.4中，Label的文字內(nèi)容被替換成為字符串“使用ActionScript”。我們可以看到ActionScript代碼中changeText()方法的作用是，響應(yīng)一個按鈕單擊事件，通過屬性id引用MXML的界面組件，并通過用戶交互來處理組件的變化，這是ActionScript最常見的應(yīng)用方法。本示例中，通過changeText()方法對id為disp1的Label組件進(jìn)行text賦值操作，通過這個示例我們可以熟悉一下ActionScript的一些語法規(guī)則，public function changeText():void是ActionScript的方法定義，訪問控制字為public，而function是方法定義關(guān)鍵字，方法名稱為changeText，返回值類型為void。在MXML代碼中直接嵌入ActionScript時不需要設(shè)計ActionScript類，直接以方法作為執(zhí)行單位。
如果是簡單的事件響應(yīng)處理，如輸入校驗、組件可見性控制等處理，那么用上面的方法還沒有問題，但如果需要對數(shù)據(jù)進(jìn)行復(fù)雜的邏輯操作或者需要對MXML的組件進(jìn)行定制操作，就需要ActionScript類來完成了。
1.4.2 使用ActionScript類
在上面的示例中，我們把ActionScript代碼嵌入到MXML中使用，如果大量的程序腳本都集中在MXML文件內(nèi)，會給開發(fā)和維護(hù)都會帶來極大的不便，因此在開發(fā)時要注意盡量將ActionScript代碼從MXML文件中分離出去。
對ActionScript代碼進(jìn)行分離的最簡單方法也是通過<mx:Script>標(biāo)簽來實現(xiàn)，需要設(shè)置<mx:Script>標(biāo)簽的source屬性。例如我們的ActionScript文件是includes文件夾下的tools.as，那么可以通過<mx:Script source=“includes/tools.as”>來實現(xiàn)對ActionScript文件的引入，這樣ActionScript的代碼部分可以從MXML中分離出去。
但是僅僅用上述方式分離代碼還是不夠的，這種方式僅僅在書寫上將ActionScript代碼單獨分離出去，與HTML中引入JavaScript的方式是完全一致的，而文件對實際的程序設(shè)計和代碼維護(hù)并沒有起到作用，因此使用<mx:Script>的source屬性容易造成誤區(qū)，導(dǎo)致ActionScript的濫用。對于規(guī)模較小或邏輯很清晰的RIA應(yīng)用，僅使用ActionScript方法就可以滿足大部分要求，而對于一個較大的軟件項目或者比較復(fù)雜的RIA應(yīng)用，必須對ActionScript類進(jìn)行設(shè)計。
ActoinScript是面向?qū)ο蟮某绦蛟O(shè)計語言，而類是面向?qū)ο蟪绦蛟O(shè)計語言的精髓。面向?qū)ο蟮奶匦?封裝、繼承和多態(tài))都被ActionScript很好地支持。使用ActionScript進(jìn)行開發(fā)時，可以使用所有的面向?qū)ο筇匦浴?/p>
在SDK的功能支持上提供了完善的API，使用ActionScript類可以實現(xiàn)系統(tǒng)的所有邏輯操作和數(shù)據(jù)模型處理，實現(xiàn)對系統(tǒng)的分層開發(fā)，同時也用于進(jìn)行企業(yè)級模塊的構(gòu)建；對于界面開發(fā)，可以使用ActionScript類對現(xiàn)有的MXML類繼承并進(jìn)行定制化開發(fā)，也可以在組件操作上實現(xiàn)自定義的功能。
ActionScript使用包(Package)對類進(jìn)行組織，定義一個包的同時，相當(dāng)于隱含規(guī)定了一個命名空間，可以很好地解決類的組織問題。不同的包下可以放置同名的ActionScript類，在不同的包中調(diào)用類需要用Import語句來導(dǎo)入，因此可以很好地避免同名類的沖突問題。對于類文件在計算機中的物理位置—— 需要用與包名稱相對應(yīng)的文件夾名來存放，如net.airdev.book這樣一個包下的類文件，應(yīng)該在net\airdev\book\這樣的文件夾路徑之下進(jìn)行保存，包結(jié)構(gòu)與文件結(jié)構(gòu)完全對應(yīng)。有Java開發(fā)背景的開發(fā)者對包肯定不會陌生，ActionScript中包的使用與Java中是基本一致的。
下面對一個以Flex實現(xiàn)的四則運算計算器程序進(jìn)行結(jié)構(gòu)設(shè)計，并在程序中實現(xiàn)一個自定義組件，程序設(shè)計類圖如圖1.5所示。
圖1.5 Calculator程序設(shè)計類圖
我們把MXML文件視為一個控制表現(xiàn)層的類Class4MXML，在MXML中要建立輸入框、計算方法選擇按鈕和計算按鈕，其中計算按鈕使用一個繼承自Button的自定義組件MyButton。
程序需要負(fù)責(zé)計算的功能模塊，因此我們設(shè)計一個Calculator類，這個類提供一個計算方法run，該方法需要三個參數(shù)，兩個操作數(shù)arg1、arg2和一個計算方法標(biāo)記method。
代碼文件夾結(jié)構(gòu)如下：
C:\user\test.mxml
C:\user\myControls\Calculator.as
C:\user\myControls\MyButton.as
示例1.3a 計算器應(yīng)用程序的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命令導(dǎo)入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屬性設(shè)置為absolute，從而對這個Panel上的組件進(jìn)行坐標(biāo)定位-->
<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"/>
<!--設(shè)置輸入和輸出所需要的TextInput組件-->
<cmp:MyButton click="res.text=calcul.run(Number(n1.text), Number(n2.text),tp.value).toString()" x="196.5" y="99"/>
<!--配置一個自定義組件MyButton，并設(shè)定該組件的單擊事件執(zhí)行calc1的run方法，并將結(jié)果轉(zhuǎn)換成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的使用，并對各個組件的定位進(jìn)行了一些坐標(biāo)控制。
示例1.3b 計算器應(yīng)用程序的ActionScript代碼
//Calculator.as
package myControls {
//包聲明
public class Calculator {
//類聲明
public function run(a:Number,b:Number,c:Number):Number {
//函數(shù)聲明。變量a和b為操作數(shù)，變量c為計算類型
var res:Number;
//計算結(jié)果通過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為表現(xiàn)層，在MXML初始化時創(chuàng)建了一個Calculator的實例；Calculator.as和MyButton.as 分別對應(yīng)兩個功能模型，Calculator類提供了一個計算器方法，而MyButton類則繼承了MXML的標(biāo)準(zhǔn)組件Button類，本程序中的自定義組件僅僅是在組件構(gòu)造方法中實現(xiàn)了對label屬性和定位的初始化，在實際應(yīng)用過程中，對組件類的繼承可以進(jìn)行更復(fù)雜的定制化操作。
程序運行效果如圖1.6所示。
圖1.6 Calculator程序的運行效果
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 MXML 下一頁 Flex的事件機制
◎進(jìn)入論壇RIA設(shè)計與應(yīng)用版塊參加討論
|
第 1 頁 
第 4 頁 ActionScript
