2007年9月3日 星期一

網頁系統回到桌面應用時代己來臨-Adobe AIR全攻略!

AIR(全名Adobe Integrated Runtime,前身Apollo)的來意



這幾年企業應用系統慢慢己從窗口桌面轉移到網頁平台上,人們開始習慣在瀏覽器上購買商品、轉帳、繳費、甚至公司的入口網站也都是從網頁進入使用,如請假、簽到、人資系統甚至物流管理等。



網頁開發人員也不例外,動態網頁不管是用什麼語言來撰寫(如:ASP.NET、PHP、JSP、ColdFusion等),你會發 現到,現在這些語言似乎成了基本配備,殊不知Web 2.0的應用理念排山倒海而來,也讓Ajax的技術使用掘起,RIA(Rich Internet Applications)的應用也更加擴大;伴隨著使用上的要求,瀏覽器上的功能變得越來越複雜,開發者也越來越頭痛,一方面要學習許多技術,一方面又 要能符合顧客所需,如何讓開發者不用再重新學習,只善用本身既有技能,也能滿足顧客口味,客戶端也能夠兼顧到網頁及窗口程序的優點,如此想法,AIR油然 而生。



什麼是AIR?



AIR(全名Adobe Integrated Runtime),前身是Apollo,美商Adobe公司在開發此項目時所命名的一個代號名稱,它是專為網絡桌面系統應用的一個執行環境 (RunTime),競爭產品如同微軟的WPF,AIR能真正跨平台在Windows/Mac/Linux操作系統上執行,目前為Alpha 1階段(Linux版還沒釋出),很適合應用在網絡多媒體內容上,如把PDF、Flash/Flex、HTML、Ajax全部結合在一個程序上,加上善用 操作系統上的環境資源,就能快速開發出RIA應用,並且原有的網頁開發者不需要重新學習新的語言。



你會需要AIR嗎?



我們需要區分幾種類型來分析、思考,AIR是否對你有需要,以下列出3種類型族群。



使用者(End user)



你常使用計算機,你己發現到,現在的系統大多都會讓你在瀏覽器(常見是IE/FireFox)上完成,不管是查詢最新上映電影、網 絡訂車票、網絡報稅、在線購物,或企業的入口網站要查詢庫存、銷售報表等,甚至採購訂單,幾乎在瀏覽器上就能一手包辦,不過你也發現到幾個惱人的事,例 如:你使用的過程中,不小心要回上一步,瀏覽器的認定卻是上一頁,剛剛輸入的動作就幾乎要重來,亦或者網絡剛好中斷,而你的交易正執行到一半,等待網絡可 以重新連上後,之前所輸入的內容也是要再來一遍,另外,網絡上的畫面真的都跟使用者一樣,所見即所得嗎?不一定,因為正當你要把最關鍵的網絡信息打印下來 時,卻也發現,邊緣的信息怎麼被截斷了。



以上,都是屢見不鮮的案例,這樣的節骨眼,利用AIR所提供的環境程序,就可以協助你,當離線時還能保持功能正常運作,當打印時也 能常保完整(因為PDF能夠有一致的文件結構),你也不需要有充份的時間去學如何操作系統,因為RIA的接口與互動,己足夠讓你省下不少摸索時間。



設計者/開發者(Designer/Developer)



視覺設計者通常強在美術天份的表達,舒適性的畫面總是在他們的巧手上完成,然而一般在設計網頁與窗口的表現,過程中是需要很多加以 調整,如:尺寸大小、檔案格式等,AIR的系統環境裡,你可以專注在原來網頁設計的技巧,其它靠著Flash的引擎,就能發揮與網頁同質的效果。



開發者亦是,他們最不喜歡花時間去學習新的語言,你可以善用己熟悉的HTML、CSS、Ajax、Flash、Flex等,就能夠開發出桌面窗口程序,並且支持實時聯機/離線、檔案拖拉等功能,甚至還可與二個不同的窗口程序溝通,整個工作流程更具簡便。



企業業主/老闆



花錢的是老闆,要利潤的也是老闆,大多數人的想法是不用花費任何一毛錢最好,要告訴老闆們的是,AIR執行環境是不用任何費用,沒 錯,「就是免費」,公司所養的開發人員也不用為了教育費用重新來過,只需花一點技巧,讓他們知道怎麼導入企業應用,怎麼把現有網頁轉換成AIR程序即可, 當然,若採用Adobe的解決方案,花小額,採用最適合的工具,如Flex Builder、Flash等,更容易創造出公司未來的生財服務,還是一句話,「值得」。



AIR技術賣點



用相同Web技術就能製作出窗口系統,並且強調的是RIA系統,AIR它不是原生於操作系統內,而是附加安裝後可以讓你執行的環 境,也因此,不建議你用AIR做一個類似PhotoShop軟件,甚至是Premiere很仰賴系統資源的軟件,但是你卻能做出如Kuler色彩管理工具 或其它結合網絡應用的程序,想像一下,所有網頁能夠執行的內容,都可以搬到桌面窗口應用,再者,加上檔案拖曳功能,實時聯機與離線作業,可把PDF、 SWF、HTML集於一身,支持跨平台安裝與執行,這就是AIR的技術賣點。



Adobe針對AIR的使用技術,區分了二種技術類型,一為「應用程序」,二為「文件」。以下就以這二類型來說清楚講明白。



一、應用程序類型



以一針見血來說,其實就是利用Flash與HTML來建立與佈署AIR程序。



AIR己有把Flash Player核心放進來,這是AIR的核心之一,所以它支持ECMAScript為基礎的ActionScript 3語言,現在Flash Player也貢獻在開放性程序代碼的Tamarin項目,未來在Firefox瀏覽器版本上也能看到。(更多Tamarin專案詳情,請見網站:http://www.mozilla.org/projects/tamarin/)



非但如此,AIR不僅在既有的Flash Player APIs可以用,可做的事情更加擴大,主要包含如下:



1. AIR引擎可實時解析ActionScript語法,以致有更好的效能表現。
2. 完整的網絡堆棧,所以支持HTTP、RTMP、2位及XML Sockets。
3. 完整性的圖形向量著色功能,加上還有繪圖APIs,讓你可以自由設計手繪功能。
4. 多媒體支持,包含Bitmaps(位圖)、向量圖、影像、聲音等。(這在傳統的Ajax技術無法辦到)。
5. 不能忘記的是Flex框架(Framework),所有Flex 2的功能,你都可以在AIR身上全力發揮。

只要是HTML的功能,在AIR也都能施展,這其中包括了,HTML、JavaScript、CSS、XHTML、DOM(Document Object Model)。因此,你可以不需使用Flash,同樣可以寫出AIR程序,而且用的是HTML、JavaScript等,這項對傳統網頁開發者來說無疑是 如魚得水,可以這麼做的原因也是在於用了開放性的WebKit引擎,此引擎在許多瀏覽器上可以找到,如Mac OS的Safari瀏覽器、Linux相關係統的KHTML等。



在這裡我們應該要曉得背後的動機是什麼,為什麼要採用WebKit,知道主要原因將有助於瞭解日後發展狀況。




  • 首當其衝因為Webkit是開放性項目,Adobe知道一個HTML引擎的長期開發及維護是相當不容易,Webkit有全球眾多的開發者及社群在 維護著,尤其許多使用者分佈在Apple及Nokia領域的Power User,使得Adobe可以專心在其它如除錯、延伸功能等,並且有效回報內容給Webkit組織,獲得不斷精進。
  • 其次是Adobe在決定用Webkit時,希望Web開發人員可以熟悉Webkit引擎的解析狀況,好比,同個HTML碼在Firefox執行可能是沒問題的,但在IE就會錯誤百出。
  • 很多人都希望AIR的執行環境程序能夠越小越好,而WebKit引擎的程序代碼是經過組織性的討論與嚴謹撰寫下而完成,目前以Flash與HTML引擎加上之後的檔案大小大約在5MB多左右(遠比.NET Framework小太多倍)。
  • WebKit是被計劃可以執行在手持裝置上,這與Adobe長期的策略不謀而合,現己證實能執行在Nokia及Apple的手機上。



二、文件類型



文件類型在AIR的應用是希望可以用在動態電子文件中,也就是說每個字段內容都是可以用互動方式產生,在這裡PDF及HTML就是主角。


以目前來說Alpha1還沒把PDF功能整合進來,但是值得一提的是,AIR程序裡的PDF文件是可以嵌在Flash裡或HTML裡,甚至 是同時混搭(Mash-up)在Flash、HTML中。同樣的,HTML也是可以做相同工作,把PDF與SWF都放在一塊。如圖1所示。




圖1:PDF可任意嵌在HTML或SWF環境裡。



所以,我們先來綜整一下,AIR的語言模型可以怎麼形成:


圖2所示,你可以用



1. 純粹使用Flash技術,此包含了Flex。
2. 你可以使用Flash為底層,再嵌入HTML內容。
3. 你可以單純只使用HTML或JavaScript。
4. 你可以使用HTML或JavaScript再嵌入Flash內容。
以上所有語言的混搭都可以結合PDF文件內容。




圖2:適合開發AIR程序的語言

描述語言的整合



由於WebKit與Flash Player引擎二者同時包含在AIR執行環境裡,所以Adobe也將他們能發揮的功能整合在一塊,這對開發者上將會更加便利,舉例來說,HTML內容被 包含在Flash裡,事實上將是經由Flash來負責著色,這意味你可以任何在Flash裡做位圖,像是模糊(Blur)、旋轉(Rotate)、變型 (Transform)等。



另外使開發人員感到興奮的一件事就是,ActionScript可以與JavaScript做雙向溝通,如下:



1. 容許JavaScript程序代碼去呼叫ActionScript APIs
2. 容許ActionScript程序代碼去呼叫JavaScript APIs
3. ActionScript程序代碼可以直接操作DOM
4. 能藉由JavaScript與ActionScript來做事件註冊

AIR支援哪些APIs



除了原有的Flash Player及WebKit引擎所提供的APIs之外,AIR附加了新的重要APIs功能,皆可由ActionScript或JavaScript來呼叫,如下:



1. 完整的檔案輸入/輸出功能
2. 完整的窗口控制
3. 完整的目錄控制
4. 網絡聯機/離線偵測
5. 數據快取與同步(便於讓你開發離線作業的功能)
6. 系統通知功能(此需視操作系統的機制而定)
7. 程序自動更新功能

以上所有APIs功能都可以直接在執行環境上或AIR框架中完成。

面系統整合能力



如同前言,擺脫以往瀏覽器之所不能,又能讓使用者像是在用原來桌面應用程序,更重要是讓人去驗驗Flash接口的互動能力,這就是AIR的桌面整合特色。目前包括了:



1. 正常程序的安裝與移除
2. 可把安裝完畢的程序直接放在桌面快捷方式或程序集
3. 程序拖曳的操作,如:操作系統與AIR程序間的拖曳,AIR程序間的拖曳。
4. 一般程序與AIR程序的溝通。
5. 支持剪貼簿功能
6. 系統通知功能
7. 自訂圖示
8. 可將AIR程序在背景中執行

一旦安裝完成,AIR程序如同一般安裝後的程序感覺都一樣,每一支都是獨立的,你可以來回用Tab鍵切換。使用者不需知道這程序的背後機制是怎麼來,只管其操作方法。但其接口的互動感覺確是可以讓人深刻體會。



AIR相關工具組



網頁程序現在應用為什麼會這麼普遍,其中之一也是因為網頁開發者根本不需要知道使用者用的是什麼操作系統,就可以把他們寫好的程序馬上給客戶使用,不管是Windows或Linux、Solaris、或手機,祗要是網頁程序能夠被瀏覽器讀取,就幾乎都可以使用。



對AIR也是同樣道理,不僅是可以提供跨平台的網頁桌面應用能力外,它也是可以在打包成軟件的情況下,讓你在其它操作系統上執行。



事實上,AIR目前不局限只能在Flex Builder上開發,你可以用NotePad(筆記本),或是任何可以寫HTML、JavaScript的編輯工具,就可以打造出AIR的應用程序。



當然,工欲善其事,必先利其器。若你要有視覺性的開發工具,Flex Builder不失為值得使用的IDE工具,你可以到Adobe官方網站下載試用,記得必須要下載Flex Builder 2.0.1加上AIR Extensions for Flex Builder 2.0.1,才能管理整個AIR程序項目。



另外,Adobe官方剛釋放一些AIR的重要工具,各位可以去下載把玩,試試便知道精彩神奇的內容在哪裡。



開始前你必須要知道的



AIR RunTime
這是主要運行AIR程序的執行環境,如同微軟的.NET Framework一樣,任何開發好的AIR程序都要有這執行環境才能使用。



AIR SDK
SDK包含了AIR Frameworks、命令列程序、鏈接庫、基本設定檔等內容。所以可以讓你做測試、除錯或利用其它文字、視覺編輯工具寫好後,直接打包成AIR程序。



在SDK裡有二個重要的命令列工具是:



- ADL(AIR Debugger Launcher)
主要是用在不需要先前經過安裝,就可以直接測試並執行AIR程序。



- ADT(AIR Developer Tool)
這就是封裝成AIR安裝程序,擴展名是.air,當你打包成air檔後,你就可以佈署在任何的系統上(目前Alpha1祗提供Windows及Macintosh二種平台,正式版會有Linux平台,官方說明未來也會有手機運行版本)。


以上,所有下載網址都在http://labs.adobe.com/downloads/air.html



小結:



多數的朋友聽到AIR的應用後,常詢問一個問題,那就是AIR會不會就是取代瀏覽器上的應用?並且未來直接再把AIR的程序再放回瀏覽器上使用?


這問題我與Adobe資深開發人員關係產品經理討論過,AIR是為了解決瀏覽器上應用的不足,並且他是用相同的技術、語言、鏈接庫來完成桌 面上的應用,並且AIR還在發展階段,後續將上市的功能也都會顧及到使用者在長期以來得不到的解決方案,然而開發者什麼時候會用AIR技術在桌面平台上? 這也會視需求量而定,不過既然都使用Web技術,所以你可以很快就轉換成AIR版本,還可以同時有二個版本存在,這給你的客戶或未來所有使用者有了更好的 選擇。


作者簡介:



劉仲濱


國立交通大學電機信息學院數字圖書組碩士,研究 Adobe/macromedia相關產品多年,為國內企業暨華人社群大力推展 RIA互動多媒體應用暨解決方案,著作有相關Adobe/Macromedia網頁書籍、多篇雜誌專欄,同時為大型研討會講師,技術顧問,及RiS平台(http://j2eemx.com)資深社群主持人。