台灣最大程式設計社群網站
線上人數
2083
 
會員總數:245249
討論主題:189109
歡迎您免費加入會員
討論區列表 >> 專欄文章 >> HTML 與JavaScript也能實現Adobe AIR程式
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
HTML 與JavaScript也能實現Adobe AIR程式
價值 : 0 QP  點閱數:782 回應數: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">
<!--
.style1 {font-size: 36px}
.style2 {
font-size: 24px;
color: #0066CC;
}
.style3 {
font-size: 18px;
color: #00CCFF;
}
.style4 {color: #000066}
-->
</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
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
目前尚無任何回覆
   

回覆
如要回應,請先登入.