Hello HTML5 and XULRunner
對一位 Web 軟體開發者來說， XULRunner 是一個很奇妙的東西，因為它可以讓我們開發出來的 Web 軟體變成一個桌面軟體。當 HTML5 試圖將我們的 Web 軟體開發經驗延伸到桌面軟體開發領域時， XULRunner 將會是承載我們的夢想之引擎。對了，GtkWebKit/QtWebKit 也具有相同的能力。這件事，我已經等了10年了(Web programming)。
XULRunner 是 Firefox3 的核心引擎；若要用具體的東西來形容的話，可以說它就是沒有工具列和網址列的瀏覽器。它原本使用 XUL (XML User Interface Language) 作為 UI 設計語言，但它現在也支援使用 HTML 作為 UI 設計語言。作為 Firefox3 的核心，它理所當然地可以使用 HTML5, CSS 和 JavaScript 這些我們熟悉的老夥伴。本文就是使用 HTML5 配合 XULRunner 設計一個桌面軟體。
首先，各位可以先看看《Getting started with XULRunner》 這篇基礎教學文章。因為我很懶，所以那篇文章中說明的內容，本文都不會再重述。本文只有一件事的作法和那篇教學文章不同，那就是它用 XUL ，而我用 HTML。我的目的是將 Web 軟體開發經驗延伸到桌面軟體開發，不想為了開發桌面軟體，而多學一種 UI 設計語言。
建立軟體目錄結構
配合 XULRunner ，我的軟體文件目錄的結構必須如下列所示。
/
|
+-+ /chrome
| |
| +-+ /content
| |
| +- chrome.manifest
|
+-+ /defaults
| |
| +-+ /preferences
| |
| +- prefs.js
|
+- application.ini
chrome/chrome.manifest
content hello_xulrunner file:content/
chrome.manifest 軟體的 UI 設計文件放在 chrome 底下的哪個子目錄。慣例是放在 content 目錄內。本文範例所使用的 HTML, CSS, JavaScript 等文件，都將放置在此目錄中。
defaults/preferences/prefs.js
pref("toolkit.defaultChromeURI", "chrome://hello_xulrunner/content/index.html");
宣告軟體開啟後第一個呈現的畫面文件。本文延用 Web 開發經驗，故所謂「第一個呈現的畫面」自然就是首頁(index.html)。
application.ini
[App]
; This field specifies your application's name. This field is required.
Name=Hello XULRunner
; This field specifies your application's build ID (timestamp). This field is
; required.
BuildID=20100601
; This field specifies your organization's name. This field is recommended,
; but optional.
Vendor=rock
; This field is optional.
Version=1.0
; This field is optional.
Copyright=Copyright (c) 2010 rock
; This field is optional.
ID=rock@rocksaying
[Gecko]
; This field is required.
MinVersion=1.9.2
宣告軟體基本資訊。最重要的是 Name, BuildID, 和 MinVersion。BuildID 可以用時間來表示。至於 MinVersion 表示執行此軟體所需的 XULRunner 最小版本號。因為本文範例使用了 HTML5 規格，所以最小版本號必須是 1.9.2 (Firefox 3.6內建核心版本)。
實作軟體使用介面(UI)
接著我要用 HTML 來設計我的桌面軟體的畫面。其實也沒什麼好講的，就跟我們平常在設計網頁一樣。只是我們的 HTML 等內容不用佈署到 web server 上，而是直接運行在桌面。
index.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Hello XULRunner</title>
<link rel="stylesheet" href="site.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
function event_change_name() {
var name = $('#entry_name').val();
$('#name').text(name);
var flickr = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" +
name + "&tagmode=any&format=json&jsoncallback=?";
$("#images").empty().text("loading...");
$.getJSON(flickr, function(data){
$("#images").empty();
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 2 ) return false;
});
});
}
$('#entry_ok').click(event_change_name);
$('#entry_name').change(event_change_name);
});
</script>
</head>
<body>
<h1>Hello <span id="name">XULRunner</span></h1>
<div class="entry_form">
<input id="entry_name" type="text"/>
<button id="entry_ok" type="button">OK</button>
</div>
<div id="images"></div>
<div>
<video src="Big_Buck_Bunny_small.ogv" controls="controls">
"Big Buck Bunny" is a sample Ogg video on <a href="http://en.wikipedia.org/wiki/Ogg">Ogg - Wikipedia</a>.
</video>
<embed height="300" width="420" src="butterfly.svg" type="image/svg+xml" />
</div>
</body>
</html>HTML 的內容概略說明如下:
- title - 視窗的標題。軟體運行期間，可用 JavaScript 變動。
- 載入 site.css - 畫面的樣式主題。視窗的大小可以藉由 body 的長寬來指定。
- 載入 jquery-1.4.2.min.js - jQuery 是什麼不用多說了吧？
- UI 上會呈現一個文字輸入框及一個「OK」按鈕，當使用者輸入一組文字並按下OK鈕後，就會呼叫我所撰寫的一段 JavaScript 程式碼，向 Flickr 查詢一組照片，並顯示在畫面上。
- 使用 HTML5 的 Video 規格，播放影片。因為 Firefox 3.6 的 HTML5 video 功能目前只支援 Ogg video ，所以不能直接播 Youtube 的影片作示範。
- 使用 HTML5 的 SVG 規格，呈現一個向量圖片。
site.css
body {
width: 800px;
height: 600px;
font-size: 16pt;
}
h1 {
border-bottom: 3px double black;
}
input[type="text"] {
padding: 10px;
border: 3px solid blue;
-moz-border-radius: 10px;
}在 HTML 中載入的三份外部文件: jquery-1.4.2.min.js, butterfly.svg, Big_Buck_Bunny_small.ogv，都是自網路下載的。 jquery-1.4.2.min.js 可以到 jQuery 官網取得。 butterfly.svg 取自 SVG Samples 。Big_Buck_Bunny_small.ogv 取自 Ogg - Wikipedia。
以上5份文件都要存放在 chrome/content 目錄內。
執行軟體
只要你安裝的 Firefox 3.6 ，你就能執行本文的範例。不需要額外安裝其他軟體。啟動方式是加上 -app 選項，並指定 application.ini 即可。
例如我執行本文範例時，Linux 上是放在 ~/hello_xulrunner ，Windows 上是放在 C:\workspace\hello_xulrunner。那麼執行方式如下例所示範。
# Linux
firefox -app ~/hello_xulrunner/application.ini
# Windows
"C:\Program Files\Firefox\firefox.exe" -app C:\workspace\hello_xulrunner\application.ini
Linux平台執行畫面如下:
Windows平台執行畫面如下:
參考文件
- Getting started with XULRunner
- sample project.zip at MDC
- Border-radius: create rounded corners with CSS! - CSS3 . Info
- SVG Samples
- Ogg - Wikipedia
- 為何無法在Firefox以HTML5格式使用Youtube
- jQuery