HTML 與JavaScript也能實現Adobe AIR程式- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
965

會員總數：246740
討論主題：190153

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> 專欄文章 >> HTML 與JavaScript也能實現Adobe AIR程式

[]

[我要回覆]

HTML 與JavaScript也能實現Adobe AIR程式
價值 : 0 QP 點閱數:1142 回應數:0

樓主

Bing

70	72
224	5

發送站內信

本篇來源
專屬RIA主題論壇

HTML 與JavaScript也能實現Adobe AIR程式

文．劉仲濱

本篇是要告訴讀者，只會HTML與JavaScript的你，同樣可以在AIR上展現實力，這也意味著使用原來熟悉的HTML與 JavaScript相關知識就可以造就成網路桌面應用系統新應用，甚至，不需Flash技術就可以實現在AIR，話又說回來，你也可以利用 JavaScript來使用Flash Player APIs在AIR環境中。現在讓我們來探索這神奇之旅。

我只會HTML與JavaScript
我們先文章前有提到，AIR內也具備了Webkit引擎(可參考RUN!PC 2007年6月份217頁)，因此所有HTML可以做到的功能，在AIR環境裡幾乎完全支援，技術來說就是：

1. CSS
2. XHTML
3. JavaScript(正確版本是1.5)
4. XMLHttpRequest
5. W3C DOM Level 2

上述你可以看出都是網頁中，行之有年的基本元素，網頁設計師的你不必大費周章就可以將既有html功能，轉成網路桌面視窗系統上來使用。

基本概念應該要知道
有幾個HTML與JavaScript在AIR運用上的基本概念你應該要知道：

1.在HTML內容為基礎上，完全支援Cookies。
要說明的是，AIR是建築在作業系統上，所以這裡指的Cookies是解釋為，Cookies可以分享於IE在Windows環境中，Safari則是在Mac環境上，唯獨Firefox是靠著本身的儲存方式，所以不能將Cookies分享在AIR應用系統上。

2.可利用JavaScript開啟新視窗。
目前Beta版只針對API上的支援，正式版將完全支援桌面視窗。

3.對話提示。
像是操作錯誤警告、輸入確認、提示對話等，在AIR 1.0正式版將完全支援。

4.Ajax中的XMLHttpRequest
XHTMLHttpRequest在Ajax上的廣泛應用就是在於資料的傳送與負載，是的，在AIR程式中同樣可以完全享用。你不需要擔心在跨瀏覽器與跨平台時的連續與不連續時的API是如何完成。

5.安全性問題
若是程式主體是在AIR程式內，表示具有執行所有Adobe AIR APIs與函數。但要是藉由遠端將資料或變數傳送到程式中，就表示己經進入了所謂的網頁安全內容裡，則不具有存取任何AIR APIs與函數的權限。舉個例子：AIR程式中是以app-resource:/test.html將資料負載到AIR程式裡，就具備完全存取AIR APIs的權限。反之，資料負載是使用HTTP，像是http://www.j2eemx.com/test.html就不會有存取AIR APIs的機會。

補充一點，跨網域(Cross domain)的資料負載是不被允許，但是你可以使用XMLHttpRequest物件來克服。

6.支援JavaScript框架
由於HTML在AIR環境中是完全支援支援JavaScript，理論上你可以使用目前網路上找得到的任何JavaScript框架，來打造自己的AIR程式，不過有幾點需要注意：

(1)任何的JavaScriipt框架都應該被包含在你的AIR檔裡，目的就是確保離線時AIR程式的可用性。
(2)如果JavaScript框架是從某一個Server傳送過來，請確定相關的URL是可以使用。
(3)載入的JavaScript框架如果是在AIR執行時從網路傳遞進來，這多少會讓一開始的執行效率打點折扣，同樣使得在離線作業時不能正式運作。

DIY品嚐一番

叮嚀
上一期己經交代過如何先取得Adobe AIR Beta軟體了，還沒下載過的朋友可以到http://www.adobe.com/go/air取得。本期我們會利用Adobe AIR SDK指令工具來打包(或稱封裝)成AIR程式(你也可以採用Dreamweaver CS3外掛程式打包)，同樣也是在上述網址就能下載，安裝方式與一般軟體一樣就不再說明。

對於IDE工具來說，你可以選擇最簡單輕巧的筆記本(Note Pad)，或是任何HTML編輯工具如Dreamweaver等，方便你快速編輯程式內容。

別忘了，AIR執行的作業系統，除了Linux之外，你都可以安裝使用，官方己宣稱1.0之後才會再去開發支援Linux系統。而己安裝過Beta先前版本，務必記得先移除後再安裝Adobe AIR Beta。

Let’s go
每一支的AIR應用程式至少都要有二個檔案，第一個是執行主檔，HTML或SWF(如：Flex就會自動產生SWF檔)，以便程式執行時會先將此檔開啟。第二個檔，我們稱為程式描述檔，講穿了其實就是XML檔，這XML檔裡描述了Adobe AIR程式的metadata，如：程式名稱、程式描述、視窗初始狀態等，容後詳述。

主要步驟
1.我們先建立一個資料夾，取名為MyHtmlAIR，這好處猶如建立一個專案，所有程式檔案都會放在裡，方便管理。
2.在這資料夾裡，我們建立一個檔名為MyHtmlAIR.html及MyHtmlAIR.xml。現在就用Note Pad開啟這空白的MyHtmlAIR.html。
3.將MyHtmlAIR.html及MyHtmlAIR.xml檔案撰寫完成後，即刻使用adl指令測試執行結果。
4.最後確認程式無誤後，利用adt指令將程式打包成AIR安裝檔隨即完成。

現在就開始動手。

建立MyHtmlAIR.xml
在告訴讀者建立MyHtmlAIR.xml前，先來了解一下此xml會記載哪些資訊，請先打開己下載AIR SDK中templates資料夾內的application.xml檔。

這個application.xml裡的資料就是一個範本，當你打包成AIR檔時，就會從這裡拷貝出來參考，並不是每一行都需要做出設定，但有幾個重要的標籤說明一定要了解。現在筆者就來解釋下列相關重要資訊。

<application xmlns=http://ns.adobe.com/air/application/1.0.M4 appId="com.j2eemx."
version="1.0">

xml裡的描述標籤是在這整個<application></application>範圍內，此xmlns=http://ns.adobe.com/air/application/1.0.M4是命名空間的定義，Adobe取最後的1.0.M4是表示AIR 1.0己進入到Milestone第4階段了，也就是公開測試版Beta的意思。

appId屬性是AIR程式的獨立識別碼，用來決定是哪一支AIR程式。Adobe建議取名方式有點像是Java語言上的命名，如網域名稱格式，所以你可以自由取這支AIR程式名稱，至少17~255字元。

version就是這支程式你是要取多少版本序號。

下列表格1主要是程式的描述標籤：

標籤

說明

<name></name>

表示此程式名稱

<title></title>

表示此程式的抬頭，安裝程式時會看到。

<description></description>

表示此程式的描述，說明是做什麼用。

<copyright></copyright>

表示此程式的版權說明

表格1

<rootContent systemChrome="standard" transparent="false" visible="true">MyHtmlAIR.html</rootContent>

這<rootContent></rootContent>標籤是程式主體描述，中間輸入要呼叫的主檔名，用意在程式啟動時，會幫你設定其初始狀態，屬性說明如表2。

標籤

說明

systemChrome

此屬性有二種設定值，standard或none，standard表示視窗預設有抬頭、最大化、關閉等按鈕，none 表示則使用Flex中的Window control。

transparent

表示是否要將視窗設成透明化，值為true或false。

visible

表示是否要將視窗設顯示或隱藏，值為true或false。

表格2
當然你還可以設視窗的長度與高度，不過這並不是必要屬性。

現在我們將MyHtmlAIR.xml的內容撰寫如程式碼1：

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4"
appId="com.j2eemx.MyHtmlAIR"
version="1.0">
<name>MyHtmlAIR</name>
<title>MyHtmlAIR安裝程式</title>
<description>這是用HTML來製作AIR程式範例!</description>
<copyright>共享版權，應用為最！</copyright>
<rootContent systemChrome="standard"
transparent="false" visible="true">
MyHtmlAIR.html</rootContent>
</application>

程式碼1：MyHhtmlAIR.xml描述內容。

建立MyHtmlAIR.html
本範例中，AIR程式的主檔就是MyHtmlAIR.html，如下程式碼2。剛才我們設定在MyHtmlAIR.xml，當程式開啟時就會執行此MyHtmlAIR.html，記得這只能放html或是swf檔，

<html>
<head>
<title>MyHtmlAIR</title>
<script>
function init( )
{
runtime.trace("己呼叫初始函數");
}
</script>
</head>
<body onload="init( )">
<div align="left">歡迎閱讀RUN!PC雜誌第164期！ </div>
</body>
</html>

程式碼2：MyHtmlAIR.html內容

等不及想先看結果嗎？現在到command mode裡，切換到剛才的MyHtmlAIR目錄，輸入adl MyHtmlAIR.xml就會看到測試程式的執行畫面，如圖1所示。

測試己完成的xml及html檔的AIR程式
測試己完成的xml及html檔的AIR程式
圖1：測試己完成的xml及html檔的AIR程式。

MyHtmlAIR.html裡的body標籤屬性中，我們呼叫了onload事件，這事件會去載入上面Script中的init()函數，而 runtime是屬於window物件，意思就是JavaScript所有存取AIR的APIs都是經由runtime屬性來執行，此例 runtime.trace只是在命令列上做一個字串輸出。

我們再改MyHtmlAIR.html的內容如程式碼2：

<html>
<head>
<title>MyHtmlAIR</title>
<script>
function init( )
{
runtime.trace("init function called");
}
</script>
<style type="text/css">

</style>
</head>
<body onLoad="init( )">
<div align="left" class="style1">
<p class="style4">歡迎閱讀RUN!PC雜誌第164期！ </p>
<p class="style2">歡迎閱讀RUN!PC雜誌第164期！</p>
<p class="style3">歡迎閱讀RUN!PC雜誌第164期！</p>
</div>
</body>
</html>

程式碼3：將MyHtmlAIR.html加上CSS文字效果

執行結果如圖2所示。

加上CSS文字效果
測試己完成的xml及html檔的AIR程式
圖2：加上CSS文字效果。

你會發現到，AIR桌面程式是否就真的支援了CSS功能呢！

打包你的AIR
要打包你的AIR檔就是運用ADT指令就可以，當然在Flex Builder上你還可以方便把其他相關的檔案一起包裝成一個AIR安裝檔，如：圖片、自訂程式圖示等。

執行指令為
adt –package AIRFILENAME FILESTOINCLUDE

AIRFILENAME是要打包的檔名，FILESTOINCLUDE則是有包含哪些檔案，至少要有一個html檔及xml檔。

好，在命令列模式上，同樣切換到MyHtmlAIR目錄下，輸入下列指令即可打包完成。

adt -package MyHtmlAIR.air MyHtmlAIR.xml MyHtmlAIR.html

快速使用Dreamweaver CS3來打包AIR程式
純手工打造或許並不是每個人的快感，你也可以經由Dreamweaver CS3來製作AIR程式(請記得下載AIR Extension for Dreamweaver CS3外掛)，同樣是將html及xml二個檔案編輯完成後，點選上方功能表的site->Package as Adobe AIR Application就能以視窗設定內容輕鬆完成AIR打包作業。如圖3所示。

使用AIR Extension for Dreamweaver CS3外掛也能快速達成打包作業
測試己完成的xml及html檔的AIR程式
圖3：使用AIR Extension for Dreamweaver CS3外掛也能快速達成打包作業。

小結：
每位網頁設計師將原本就熟悉的HTML與JavaScript技巧伸展到AIR中，完全可發揮出網路桌面程式的價值，轉換過程並不困難，留意的是如何發佈成AIR程式，加上再利用JavaScript去呼叫Flash Player APIs，及整合AIR提供新的視窗APIs，才能更加擴大運用在未來實際上的種種任務。

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

本篇文章發表於2007-10-26 23:48

目前尚無任何回覆

回覆

如要回應,請先登入.