摘要 通過與傳統的Web應用程序的比較,深入地闡述Adobe AIR的優點,并詳細介紹實現Adobe AIR應用的Flex Builder 3在改善、增強用戶體驗方面的技術支持及程序開發步驟與部署過程。
關鍵詞 Adobe AIR;富互聯網應用程序;Web
中圖分類號:TP393.4 文獻標識碼:A 文章編號:1671-489X(2008)20-0106-02
目前,Web程序后臺開發技術不斷發展,但支持表現層的前臺開發技術不夠完善,使用戶在進行復雜的網上交互操作時不能得到令人滿意的體驗。雖然已有諸多基于客戶端或服務器端的成熟技術,如JavaScript、JavaApplet、JSP、DHTML、XML、CSS等用于開發動態網頁,支持客戶體驗的改善,但它們都沒有突破HTML所規約的傳統模式,結果不盡人意。為了解決這個問題,一種全新的Web應用程序應運而生,這就是RIA——富客戶端應用程序(Rich Internet Applications)。這類應用程序既可部署為桌面應用程序,又可簡便地部署為Web應用程序。它不僅具有桌面應用程序反應快、界面豐富的優點,而且具有在線廣泛應用的特性,給用戶帶來更豐富、更具有交互性和響應性的全新體驗。
Adobe AIR是一項備受推崇的新型技術,也可以說是新老技術的結合體。通過這樣的結合,讓用戶感受到很好的改善,更愿意多進行一些操作,更愿意去體驗一下新的功能。與普通的Web應用相比較,它的功能更加強大,無需C++、Delphi、Java這些傳統而復雜的開發技術介入,只需利用現有的Web技術進行“組合”,再調用各類運行平臺提供的API即可。
1 Adobe AIR簡介
AIR(Adobe Integrated Runtime)是Adobe公司推出的一個跨操作系統的運行平臺,前身名為Apollo。通過AIR平臺,開發人員可以將現有的Flash、HTML、Ajax、Flex、JavaScript等Web技術結合在一起開發在桌面上使用的RIA,比如RSS訂閱、博客編輯、在線辦公、在線視頻、在線圖片處理等應用程序。使用AIR開發的程序可以直接在電腦中安裝、在桌面上使用,而不必打開網頁瀏覽器。
AIR是應用程序運行環境,很小且對用戶來說不可見,運行時環境提供了一套一致的跨操作系統平臺和框架來開發和部署應用程序。因此,程序在一個平臺上開發好就可以在其他平臺上運行,而不必到每個平臺上進行測試。
2 Adobe AIR技術特點
自Adobe發布AIR以來,就受到各大IT媒體、業界的關注,曾經被各大新聞媒體評為2007年的十大網絡科技事件、2007年最值得關注的技術。它跟傳統的桌面、Web應用程序相比,具有下面幾個特點。
2.1 跨平臺跟傳統的桌面應用程序相比,基于AIR平臺開發的應用程序可以跨平臺使用,支持多操作系統,比如Windows、MAC和Linux操作系統。
2.2 交互性基于AIR平臺的應用程序憑借采用的Flash等技術,可以獲得更好的交互表現,在軟件界面中可以獲得更多信息,實現更多操作,比傳統Web技術要更加出色。
2.3 離線化傳統的Web網絡應用需要在線完成各種操作,而基于AIR開發的應用程序可以在離線狀態下運行,在需要連接網絡的時候連接一下,比如離線寫博客、離線瀏覽等。
2.4 更美觀跟傳統的桌面、Web應用程序相比,AIR應用程序采用Flash技術設計,界面超酷,如有的界面采用MAC OSX風格,有的具有透明效果等。
2.5 速度快AIR應用程序都可以在本地運行,運行速度快,而且軟件體積小巧。而Web應用程序需要在網絡客戶端和服務器之間進行調用,需要調用大量的數據和代碼,速度較慢。
3 分發、安裝和運行AIR應用程序
AIR程序是非常易于安裝的,無縫安裝特性讓用戶安裝最新的AIR運行時,安裝好AIR程序后就可以和普通桌面程序一樣運行。打包好的AIR程序分發途徑:1)可以直接通過電子郵件或Web頁面來發送AIR安裝包給終端用戶;2)可以在Web頁面上加入一個無縫安裝鏈接,無縫安裝特性可在Web頁面上提供一個鏈接讓用戶通過點擊該鏈接來安裝AIR程序。如果用戶沒有安裝AIR運行時,則會提示用戶安裝運行時,無縫安裝技術也可讓用戶不必下載AIR文件就可以安裝AIR程序。
用戶下載了AIR文件,只要雙擊文件即可啟動AIR安裝向導。如果用戶點擊了Web頁面的無縫安裝鏈接,則會彈出對話框提示用戶是否立即安裝AIR程序。如果程序已經安裝,則安裝向導會提示用戶是否打開程序或者更新程序,安裝器是根據應用程序的ID來確定的。
4 用Flex Builder創建AIR程序
4.1 創建一個AIR工程先安裝好Adobe AIR運行時以及設置好開發環境,在Flex Builder里創建工程步驟:1)打開Flex Builder 3;2)選擇菜單File/New/AIR Project;3)接受默認設置,點擊Next;4)在下個對話框中不改變“設置構建路徑”,點Next;5)指定ID、AIRHelloWorld、Name、Hello World、Description、A test AIR application、Copyright、2007參數的設置,然后點Finish。其中Description和Copyright域是可選的,但是其他的都是必填的。
4.2 設置應用程序窗口的透明性
1)在Project Navigator視圖中打開AIRHelloWorld-app.xml文件;
2)在rootContent節點中設置systemChrome和transparent 屬性為:
systemChrome=\"standard\" transparent=\"1\"
保存修改,關閉AIRHelloWorld-app.xml文件。
4.3 編寫程序代碼要編寫這個“Hello World”程序代碼,需要編輯此程序的MXML文件AIRHelloWorld.mxml。在Project Navigator視圖中找到它并打開。所有的Flex AIR程序都包含在MXML WindowedApplication標簽內,它創建了一個簡單的窗口,只包含標題欄和關閉按鈕。
1)在WindowedApplication組件中添加一個title屬性,賦值為“Hello World”:
<?xml version=\"1.0\" encoding=\"utf-8\"?>
<mx:WindowedApplication xmlns:mx=\"http://www.adobe.com/2006/mxml\" layout=\"absolute\" title=\"Hello World\">
</mx:WindowedApplication>
2)添加一個Label組件,設置text屬性為“Hello AIR”,設置對齊方式:
<?xml version=\"1.0\" encoding=\"utf-8\"?><?xml version=\"1.0\" encoding=\"utf-8\"?>
<mx:WindowedApplication xmlns:mx=\"http://www.adobe.com/2006/mxml\" layout=\"absolute\" title=\"Hello World\">
<mx:Label text=\"Hello AIR\" horizontalCenter=\"0\" verticalCenter=\"0\"/>
</mx:WindowedApplication>
3)添加下面的樣式:
<mx:Style>
Application
{
background-image:\"\";
background-color:\"\";
background-alpha:\"0.5\";
}
</mx:Style>
該樣式會應用到整個程序,窗口背景有點灰色透明。
4.4 測試程序
1)點擊工具欄上的調試按鈕,也可以選擇Run|Debug|AIRHelloWorld命令。
2)使用Label組件的horizontalCenter和verrticalCenter屬性,文本會放置在窗口的中央,可以任意移動或改變窗口的大小,這和普通的桌面程序沒什么不同。
4.5 打包并運行程序現在可以用Flex Builder對“Hello World”程序打包為AIR文件以便分發。一個AIR文件是一個壓縮文件,它包含程序文件(這些文件都包含在工程的bin目錄中),把這些AIR文件分發給用戶以便用戶進行安裝。
5 結束
Adobe Flex Builder 3在開發AIR上提供了一種便捷、高效、具有良好跨平臺兼容性的方法,能大大降低制作用戶界面的難度,提高開發效率;而且其對眾多W3C標準都支持,并將桌面軟件的優勢和網絡范圍的廣泛結合在一起,從而為用戶創造出更有價值的體驗。