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 的程式,首先先建立出以下的目錄結構:
1 2 3 4 5 6 7 8 9 |
myapp/ | - chrome/ | | | - content/ | - defaults/ | - preferences/ |
接下來,我們切換到 myapp/ 目錄,開始把最基本的檔案填上。下面檔案都是以 myapp 當作目前目錄
<myapp>/application.ini
1 2 3 4 5 6 7 8 9 10 |
[App] Vendor=XULTest Name=myapp Version=1.0 BuildID=20100901 ID=xulapp@xultest.org [Gecko] MinVersion=1.8 MaxVersion=200.* |
<myapp>/chrome/chrome.manifest
1 |
content myapp content/ |
<myapp>/chrome.manifest
1 |
manifest chrome/chrome.manifest |
<myapp>/defaults/preferences/prefs.js
1 2 3 4 5 6 7 8 |
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 內容就是程式的主要外觀
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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> |
另外我們也要為他準備他所使用的 Javascript 在 chrome/content/main.js,內容是
1 2 3 |
function showMore() { document.getElementById("more-text").hidden = false; } |
執行
程式寫完了,讓我們來看結果吧。執行程式的方法也非常簡單:打開終端機,到剛剛解壓縮 xulrunner-*.tar.bz2 的地方,進入 xulrunner/ 輸入
1 |
./xulrunner <path to myapp>/application.ini |
如果一切正確,就可以看到一個 Hello world 的小程式。
自己的 browser
有 hello world 以後,我們來對這個小程式做一點點小小變化吧!把剛剛的 main.xul 稍微改一下,改成更簡單:
1 2 3 4 5 6 7 8 9 10 |
<?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> |
再執行一次,就可以看到 Mozilla 的網頁。這就是 browser element,Firefox 的介面也是用這樣製造出來的,所以其實這算是一個 Firefox 的簡化簡化簡化版本,不過我們卻可以對他做非常非常多事情。
回到 main.js,這個 main.js 一樣有 window 和 document 等全域物件,並且使用 dump() 全域函數來印出 debug message。我們可以使用 addEventListener 來聆聽事件,例如
1 |
window.addEventListener("load", ...) |
也可以用 getElementById 來取得 XUL 內的物件,比方說
1 |
document.getElementById("brow") |
再透過 browser element 的 contentDocument 屬性,可以取得 browser 內部的 document 物件。我們可以把 main.js 改成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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 標籤的值。
Reference
- https://developer.mozilla.org/en-US/docs/XUL/browser
- https://developer.mozilla.org/en-US/docs/Getting_started_with_XULRunner