打造自己的世界-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/ 目錄,開始把最基本的檔案填上。下面檔案都是以 myapp 當作目前目錄

<myapp>/application.ini

<myapp>/chrome/chrome.manifest

<myapp>/chrome.manifest

<myapp>/defaults/preferences/prefs.js

開始寫 XUL 囉

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

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

執行

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

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

自己的 browser

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

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

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

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

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

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

Reference

 

 

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *