2007年8月28日 星期二

使用HTML/PHPRPC for js/jQuery開發AIR應用程式教學

使用HTML/PHPRPC for js/jQuery開發AIR應用程式

範例檔案下載
本文正體中文PDF檔
本文簡體中文PDF檔

開發流程
  • 安裝Adobe AIR
  • 設定Adobe AIR SDK and command-line tools開發環境
  • 建立你的AIR應用程式
  • 測試你的AIR應用程式
  • 包裝佈署你的AIR應用程式
AIR Beta支援的操作系統環境
  • Windows XP SP2
  • Windows Vista Home Ultimate Edition
  • Mac OS 10.4.8 and 10.4.9 (Intel and PowerPC)
等待以後AIR 1.0 正式版釋出後,也將會支援Linux操作系統。


安裝Adobe AIR(Adobe Integrated Runtime )


從http://labs.adobe.com/technologies/air/
下載Adobe Integrated Runtime及AIR SDK

設定Adobe AIR SDK and command-line tools開發環境

Adobe AIR SDK Beta主要包函了兩個程式

ADL 用來執行及測試未安裝的AIR應用程式
ADT 用來打包佈署AIR應用程式

安裝SDK
  1. 從 http://www.adobe.com/go/air 下載AIR SDK Beta
  2. Open the SDK
    a. 在Windows上, 解壓縮 ZIP 檔.
    b. 在Mac上, 掛上 .dmg 檔.
  3. 複製解好壓縮的目錄到你的系統中,你將使這位址做為
設定 command-line tools開發環境

1.command-line tools開發環境需事先安裝Java你的系統,你必須安裝JVM 版本1.4.2 或更新的 JRE or the JDK


2.添加系統變量/bin 如圖


3.為了要測試是否成功設定
開始->執行…->輸入cmd
然後按確定

輸入
adt

如果你看到底下的訊息代表你設定完成。

Too few arguments.
Usage: adt -package air_file app_xml [ file_or_dir |
-C dir file_or_dir ... ] ...
建立一個簡單的AIR應用程式

現在你已經裝好了AIR和AIR SDK,我們準備來建立第一個AIR應用程式。

首先,先建立一個“hello world”的範例,等到了解如何開發AIR應用程式,你可以自行建立複雜且有用的AIR應用程式。

建立應該程式的檔案

每一個AIR應用程式最少須要兩個檔案。

第一個為基本的內容檔案,可以是HTML或是SWF文件。當程式第一次啟動,這個檔案用來執行或展示應用程式。
第二個為應用程式的描述檔案,是一個用來描述AIR應用程式的XML檔案。

讓我們開始動手實作吧

  1. 先建立一個目錄名為AIRHelloWorld的目錄。
  2. 在AIRHelloWorld的目錄裡建立兩個檔案名稱為AIRHelloWorld.html and AIRHelloWorld.xml。
  3. 使用你最喜愛的文字編輯器來打開AIRHelloWorld.html and AIRHelloWorld.xml。
了解AIR應用程式描述檔案
每個AIR應用程式都須要一個XML描述檔案,它提供一些訊息給Adobe AIR,就象這個程式如何運行的描述。

首先來看一下描述檔案長得怎樣


<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4"
appId="com.bawbaw.AIRHelloWorld"
version="1.0">
<name>AIRHelloWorld</name>
<title>AIRHelloWorld 安裝</title>
<description>簡單的應用程式範例</description>
<copyright>bawbaw.hu</copyright>
<rootContent systemChrome="standard"
transparent="false" visible="true">
AIRHelloWorld.html</rootContent>
</application>

元素說明

一開始,就先把這

<application xmlns="http://ns.adobe.com/air/application/1.0.M4" appid="com.bawbaw.AIRHelloWorld" version="1.0">

放到最前頭,appId="com.bawbaw.AIRHelloWorld"可以改成自已想要的名稱。

<name>AIRHelloWorld</name>
<title>AIRHelloWorld 安裝</title>
<description>簡單的應用程式範例</description>
<copyright>bawbaw.hu</copyright>

XML元素說明如下

name:
應用程式的名稱,用來做為讓操作系統及使用者看得見的名稱
title:
安裝應用程式時所顯示的名稱
description:
安裝過程中讓使用者看得見的程式說明
copyright:
非必須的項目。用來說明版權所有。

下個元素用來設定Adobe AIR主要的應用程式內容

<rootcontent systemchrome="standard" transparent="false" visible="true">
AIRHelloWorld.html</rootcontent>

這個範例裡使用HTML做為根內容。
這個rootContent元素裡頭有3個參數用來設定應用程式啟動的參數。

systemChrome:
設定為“standard” 或 “none”
transparent:
當systemChrome為standard時且應用程式為背景執行,其值設定為true
visible:
設定應用程式是否顯示。當應用程式第一次啟動,一定為可視。

然後咱來產生一個根應用程式檔案



這一個檔案可以是SWF或HTML,這一個檔案為應用程式啟動時所讀取的檔案。
現在來建立一個PHPRPC、jQuery的AIR應用程式

客户端的:AIRHelloWorld.html


<html>
<head>
<title>AIRHelloWorld</title>
</head>
<body>
<input type="text" name="in" value="" />
<input type="button" name="op" value="phprpc" />
<img id="waiting" src="http://bawbaw.hu.googlepages.com/indicator.gif" style="display:none;" />
<div id="result" align="center"></div>
<script type="text/javascript" src="./js/jquery-latest.js"></script>
<script type="text/javascript" src="./js/phprpc_client.js"></script>
<script type="text/javascript" src="./js/test.js"></script>
</body>
</html>


如你所見,這是一個基本的HTML檔案,其中引入了jquery-latest.js和phprpc_client.js及test.js
其中test.js內容為

主要就是調用服務器端函数,返回结果



$(document).ready(function(){
$('input[@name="op"]').click(
function(){
$('#waiting').show();
var rpc = new PHPRPC_Client('http://bawbaw.deep.tw/rpc_server.php', ['hi']);
rpc.hi($('input[@name="in"]').val(),function(result){
$('#result').html(result);
$('#waiting').hide();
});
}
);
}
);

服务器端的:rpc_server.php


是一個標準的jQuery及PHPRPC應用範例。
測試這個應用程式

使用ADL啟動應用程式

  • Adobe AIR描述檔是否沒有錯誤。
  • 應用程式正常啟動。
  • HTML顯示正常。
  • JavaScript code functions運行良好。

當測試完成,我們才能打包為.air應用程式

測試我們的應用程式的流程:
  1. 打開系統的Terminal(on Mac)或Console (on Windows).
  2. 切換至包函AIRHelloWorld.html and AIRHelloWorld.xml 等檔案的目錄。
  3. 執行 adl AIRHelloWorld.xml


如果你看到底下的執行畫面,代表運行成功。


包裝佈署你的AIR應用程式

AIR 檔案是一個以zip為基礎的檔案。以ADT命令打包而成。

包裝我們的應用程式的具體流程:
  1. 打開系統的 Terminal(on Mac)或Console (on Windows).
  2. 切換至包函 AIRHelloWorld.html and AIRHelloWorld.xml 等檔案的目錄。
  3. 執行 adt -package AIRHelloWorld.air AIRHelloWorld.xml AIRHelloWorld.html js

將會產生一個名為AIRHelloWorld.air的檔案。


測試AIRHelloWorld.air檔案
點兩下AIRHelloWorld.air執行,安裝完後即可。

測試結果如下圖


移除AIR應用程式


當不想再使用AIR應用程式或是移除舊的測試AIR應用程式,可以在

控制台->新增移除程式

找到想要移除的項目。



終於寫完這個關於air應用基本教學啦,希望大家互相切磋,相信以後一定會有愈來愈多人加入開發AIR應用程式的隊伍來大家一起努力吧。


特別感謝PHPRPC群的小西幫忙校稿。

bawbaw.hu@gmail.com