AsWing 入門
ActionScript3.0簡介
ActionScript3.0 是Adobe公司為基于flash player 平臺開發的一種腳本語言,開發者可以使用其開發出基于flash player運行的多媒體應用程序。
為什么選擇AsWing 以及 AsWing
請參考,《AsWing介紹文檔》。
環境準備
說白了AsWing就是一套用AS3寫成的類庫,所以只要有編譯AS3程序的環境,就能使用AsWing。
從編譯環境來說基本就是2種,一個是Flash CS3,另一個就是 flex sdk。開發工具就很多了,官方的有 FlashCS3,Flex Builder(推薦用FB3),或者使用開源的FlashDevelop(支持使用flash和flex sdk編譯),甚至手動調用mxmlc編譯。
有了開發環境,那么我們就要下載AsWing開發包,并且配置我們的開發工具。
可以到 http://code.google.com/p/aswing/downloads/list 下載AsWing開發包。
找到 aswing_a3_1.2_fx.zip 或 aswing_a3_1.2_fl.zip 其中 1.2 表示版本號,一般下載最新的就行。后面的 fx 或 fl 代表適合的編譯環境。一般如果用flex sdk的話就下載fx結尾的包。用flashCS3的話就下載fl結尾的。
當然你也可以通過svn客戶端取出最新的AsWing代碼,具體方法就不再贅述了,svn地址見:http://www.aswing.org/?page_id=4 。
下面具體介紹下在FlexBuilder3和FlashCS3中的配置方法。其他工具雷同。本人使用Windows操作系統,其他系統下的操作方式基本一致。
- FlexBuilder3:
將壓縮包解壓后,找到里面的aswing_a3_1.2.zip,解壓,將 AsWingA3/bin 目錄中的 AsWingA3.swc 復制到你存放AS代碼庫的目錄。比如我將其放在 E:/AS3 目錄中。然后再FB3中新建一個ActionScript項目,右鍵該項目打開項目屬性窗口,選擇ActionScript Build Path,然后切換到 Library path,點擊 Add SWC… 瀏覽到剛才復制的那個文件,按照我剛才存放的路徑就是 E:/AS3/AsWingA3.swc,然后點擊OK即可。 - Flash CS3
同樣先解壓然后找到aswing_a3_1.2.zip并解壓,由于Flash IDE不支持使用純AS打包的SWC作為編譯庫路徑,所以我們先將AsWingA3整個目錄復制到所需位置,如 E:/AS3。
然 后打開Flash CS3,點擊菜單欄中的 編輯 并打開 首選參數窗口點擊左邊列表中的ActionScript,然后點下方的 ActionScript 3.0 設置… 打開類路徑設置窗口,將AsWing的src目錄添加進去,按照我的文件路徑就是將 E:\AS3\AsWingA3\src 這個路徑添加進去,然后點確定就可以了。
P.S.當然FB3也可以使用目錄作為編譯路徑,就是在Library path 旁的 Source path中添加一個 AsWing的src目錄。
第一個例子-Hello World!
FB中在剛才建的ActionScript項目中新建一個ActionScript class文件,輸入下面的代碼。
package {
import flash.display.Sprite;
import org.aswing.AsWingManager;
import org.aswing.FlowLayout;
import org.aswing.JButton;
import org.aswing.JFrame;
import org.aswing.JOptionPane;
import org.aswing.event.AWEvent;
public class HelloAsWing extends Sprite {
private var myFrame:JFrame;
private var myButton:JButton;
public function HelloAsWing() {
AsWingManager.initAsStandard(this);
myButton = new JButton("Click Me");
myButton.addActionListener(__buttonClicked);
myFrame = new JFrame(this, "My Frame");
myFrame.getContentPane().setLayout(new FlowLayout());
myFrame.getContentPane().append(myButton);
myFrame.setSizeWH(300, 200);
myFrame.show();
}
private function __buttonClicked(e:AWEvent):void {
JOptionPane.showMessageDialog("Hello", "Hello, World!");
}
}
}
如果是使用Flash CS3,可以先新建一個ActionScript文件,輸入代碼后,保存為HelloAsWing.as,然后新建一個Flash (ActionScript3.0)文件,將該fla文件保存在與HelloAsWing.as的同一級目錄中,然后將fla的文檔類設置為 HelloAsWing。
運行后可以看到類似這樣的界面,你可以試著對該窗口進行各種操作:
點擊 Click Me 按鈕后,會彈出一個提示窗口,如下圖:
這就是使用AsWing創建UI組件的一個非常簡單的實例程序,下面我們簡單分析一下該程序的代碼。
實例詳細分析
使用AsWing,主程序不需要基于任何應用程序框架,AsWing的UI組件都從flash原生的Sprite擴展而來,所以幾乎每一個AsWing組件都能被單獨放到DisplayObjectContainer中并能正常使用。
我們的主程序僅需繼承Sprite即可,下面分析一下構造函數中的代碼。
AsWingManager.initAsStandard(this);
建議在使用AsWing程序之前先調用這個方法,該方法封裝了一些常用功能,調用了AsWingManager
的setRoot方法,用于設置容納AsWing組件的容器,這里的this就代表了當前AsWing組件的root。另外還會設置一些系統參數,如 align,scaleMode等。
myButton = new JButton("Click Me");
myButton.addActionListener(__buttonClicked);
JButton 是AsWing中基本的按鈕組件,這里新建了一個JButton實例,并設置按鈕的Label,第二句代碼給按鈕添加一個事件監聽,當點擊按鈕后就會觸發,這里的addActionListener
是AsWing設計成簡化了事件監聽的寫法,當然也可以寫成這樣 myButton.addEventListener(AWEvent.ACT,
__buttonClicked);。
是AsWing中最基本的事件類,ACT事件類型表示一些基本組件的觸發事件類型,如JButton的鼠標點擊事件,JTextField的回車事件等。這里按鈕點擊后就會執行
AwEvent__buttonClicked
事件處理函數,函數中代碼稍后討論。
myFrame = new JFrame(this, "My Frame");
myFrame.getContentPane().setLayout(new FlowLayout());
myFrame.getContentPane().append(myButton);
JFrame是常用的窗口組件,有類似操作系統窗口的基本特性,如最小/大化,關閉,縮放,拖動能功能。JFrame的第一個參數指示該窗口所在的容器,第二個參數設置窗口頭部的label(即title)。
getContentPane()
方法獲取JFrame容納其他組件的容器,向JFrame中添加組件記得不要直接調用JFrame
的append
方法,JFrame 真正容納其他組件的不是本身,而是其內部的一個容器,用getContentPane()
方法獲取。
每個容器排列組件的方式都由Layout控制,setLayout就是設置容器的布局方式,關于布局請參考《AsWing布局管理入門》。
然后就是調用容器的append方法將剛才的按鈕加入到JFrame的容器中。
myFrame.setSizeWH(300, 200);
myFrame.show();
這兩句代碼就比較簡單了,設置JFrame的尺寸,并讓JFrame顯示出來。可能你發現沒有使用addChild方法,沒關系,JFrame繼承 JPopup,所有基于JPopup的組件,AsWing都會自動替你添加到DisplayList中,調用show() 方法就可以設置為可見。
下面看下很簡單的事件處理函數
private function __buttonClicked(e:AWEvent):void {
JOptionPane.showMessageDialog("Hello", "Hello, World!");
}
JOptionPane
是一個類似Alert的組件,showMessageDialog()
方法即顯示一個消息框,第一個參數為消息框的title,第二個參數設置消息內容的字符。
結束語
如今基于flashplayer的RIA技術非常流行,要開發這樣的應用程序就免不了會用到與用戶交互的UI組件,AsWing正是這樣一套強大的
組件
庫,提供了常用的基本組件,開發者也可能很容易擴展出自己特制的組件。AsWing的靈活使得開發者不會被特定的條件約束,你可以在整個項目中完全使用
AsWing作為GUI交換組件,也可以僅把AsWing的某一個組件用在你的項目中,幫助你快速的得到所需的UI界面。
AsWing的開發者還在不斷的改進AsWing,使其更強大,易用。
本文僅介紹了最基本的AsWing使用,其更多強大的性能正等著你來發掘,請參考其他AsWing相關教程。
下載資源
- AsWing 下載列表 http://code.google.com/p/aswing/downloads/list
- 官方下載頁,包括svn代碼庫地址 http://www.aswing.org/?page_id=4
參考資料
- AsWing 官方網站 http://www.aswing.org/
- API 文檔 http://doc.aswing.org/a3/
- 案例展示 http://www.aswing.org/?page_id=7
posted on 2008-08-11 18:36 gembin 閱讀(1564) 評論(0) 編輯 收藏 所屬分類: ActionScript3