打造自己的世界-XUL Runner

XUL Runner 算是 Firefox 的兄弟之一，他允許我們用 Gecko 內部的元件設計一個擁有自己外觀(而不一定需要長的像是 Firefox)的應用程式。因為 Gecko 內部元件非常的豐富，而且 XUL Runner 也有跨平台的能力，使用 XUL Runner 可以簡化我們開發應用程式的工作。

要開發 XUL Runner 程式，首要工作就是要有 XUL Runner。Mozilla FTP 上面有提供 prebuilt 的版本，分為 Windows, Linux 和 Mac 版本。這篇文章的安裝過程以 Linux 版本為例，其他版本也大同小異，可以參考 MDN。抓 XUL Runner 記得抓不是 SDK 的版本，我們並不需要使用 SDK 的功能，但是沒有 SDK 的話整個壓縮檔的大小會小很多。

安裝

Linux 版的 XUL Runner 安裝起來非常簡單：解壓縮就好。他是個綠色軟體。

Hello world

要建立一個 XUL Runner 的程式，首先先建立出以下的目錄結構：

 myapp/
|
 - chrome/
| |
| - content/
|
 - defaults/
 |
 - preferences/

myapp/

- chrome/

| |

| - content/

- defaults/

- preferences/

接下來，我們切換到 myapp/ 目錄，開始把最基本的檔案填上。下面檔案都是以 myapp 當作目前目錄

<myapp>/application.ini

[App]
Vendor=XULTest
Name=myapp
Version=1.0
BuildID=20100901
ID=xulapp@xultest.org

[Gecko]
MinVersion=1.8
MaxVersion=200.*

[App]

Vendor=XULTest

Name=myapp

Version=1.0

BuildID=20100901

ID=xulapp@xultest.org

[Gecko]

MinVersion=1.8

MaxVersion=200.*

<myapp>/chrome/chrome.manifest

content myapp content/

1	content myapp content/

<myapp>/chrome.manifest

manifest chrome/chrome.manifest

1	manifest chrome/chrome.manifest

<myapp>/defaults/preferences/prefs.js

pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");

/* debugging prefs, disable these before you deploy your application! */
pref("browser.dom.window.dump.enabled", true);
pref("javascript.options.showInConsole", true);
pref("javascript.options.strict", true);
pref("nglayout.debug.disable_xul_cache", true);
pref("nglayout.debug.disable_xul_fastload", true);

pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");

/* debugging prefs, disable these before you deploy your application! */

pref("browser.dom.window.dump.enabled", true);

pref("javascript.options.showInConsole", true);

pref("javascript.options.strict", true);

pref("nglayout.debug.disable_xul_cache", true);

pref("nglayout.debug.disable_xul_fastload", true);

開始寫 XUL 囉

首先建立一個檔案在 chrome/content/main.xul 內容就是程式的主要外觀

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

 <script type="application/javascript" src="chrome://myapp/content/main.js"/>

 <caption label="Hello World"/>
 <separator/>
 <button label="More >>" oncommand="showMore();"/>
 <separator/>
 <description id="more-text" hidden="true">This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.</description>

</window>

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<button label="More >>" oncommand="showMore();"/>

<description id="more-text" hidden="true">This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.</description>

</window>

另外我們也要為他準備他所使用的 Javascript 在 chrome/content/main.js，內容是

function showMore() {
 document.getElementById("more-text").hidden = false;
}

function showMore() {

document.getElementById("more-text").hidden = false;

}

執行

程式寫完了，讓我們來看結果吧。執行程式的方法也非常簡單：打開終端機，到剛剛解壓縮 xulrunner-*.tar.bz2 的地方，進入 xulrunner/ 輸入

./xulrunner <path to myapp>/application.ini

1	./xulrunner <path to myapp>/application.ini

如果一切正確，就可以看到一個 Hello world 的小程式。

自己的 browser

有 hello world 以後，我們來對這個小程式做一點點小小變化吧！把剛剛的 main.xul 稍微改一下，改成更簡單：

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

 <script type="application/javascript" src="chrome://myapp/content/main.js"/>
 <browser <a href="http://www.theinnocents.org/">オンライン カジノ</a>  type="content" src="http://www.mozilla.org" id="brow" flex="1"/>

</window>

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<browser <a href="http://www.theinnocents.org/">オンラインカジノ</a> type="content" src="http://www.mozilla.org" id="brow" flex="1"/>

</window>

再執行一次，就可以看到 Mozilla 的網頁。這就是 browser element，Firefox 的介面也是用這樣製造出來的，所以其實這算是一個 Firefox 的簡化簡化簡化版本，不過我們卻可以對他做非常非常多事情。

回到 main.js，這個 main.js 一樣有 window 和 document 等全域物件，並且使用 dump() 全域函數來印出 debug message。我們可以使用 addEventListener 來聆聽事件，例如

window.addEventListener("load", ...)

1	window.addEventListener("load", ...)

也可以用 getElementById 來取得 XUL 內的物件，比方說

document.getElementById("brow")

1	document.getElementById("brow")

再透過 browser element 的 contentDocument 屬性，可以取得 browser 內部的 document 物件。我們可以把 main.js 改成

window.addEventListener("load", function () {
 var b = document.getElementById("brow");
 b.addEventListener("DOMContentLoaded", function(e) {
 var doc = e.originalTarget;
 if (doc != b.contentDocument) {
 return;
 }

 var title = doc.getElementsByTagName("title")[0];
 if (title) {
 title = title.innerHTML;
 } else {
 title = "<This document has no title tag>";
 }

 dump("Title: " title "\n");
 });
 b.loadURI("http://www.mozilla.com");
});

window.addEventListener("load", function () {

var b = document.getElementById("brow");

b.addEventListener("DOMContentLoaded", function(e) {

var doc = e.originalTarget;

if (doc != b.contentDocument) {

return;

}

var title = doc.getElementsByTagName("title")[0];

if (title) {

title = title.innerHTML;

} else {

title = "<This document has no title tag>";

}

dump("Title: " title "\n");

});

b.loadURI("http://www.mozilla.com");

});

這個簡單的程式，示範如何載入一個文件並且取得文件 DOM 之中的數值。首先，我們會在 window load 以後，取出 browser 的參照並且放到 b 變數。之後開始聆聽 browser 的 “DOMContentLoaded" 事件。再透過 loadURI 載入 http://www.mozilla.com/。載入完成後，聽到 DOMContentLoaded 事件後，取出瀏覽器中的 document 物件，就可以直接操作內部的 DOM，取得 title 標籤的值。

安裝