初识XUL用户界面UI开发

概要

XUL是Mozilia社区开发技术中的一员，主要是为用户界面UI服务，Firefox就XUL以及其它一系列相关的基础库开发出来的成功之作。事实证明XUL是成功的UI开发技术，本文以一个最简明的视角来向看官展示如何使用XUL来开发自己的定制UI程序。由于XUL及相关技术是基于WEB的，所以会HTML开发读者会更容易理解它的整个体系。当然XUL也用于桌面程序开发，Firefox就是最好的证明。

基本概念

这里的XUL是指 XML User Interface Language，独立来看，它就是XML技术的一种。而在XUL整个开发流程中，它需要和XPCOM等技术整合。XPCOM则表示 Cross Platform Component Object Model，是一种软件工程，以组件的形式来复用现有的代码以减轻程序开发负担。如果从软件复用的角度来看，这里的 XPCOM 可以和 Microsoft 的 COM 等价看待，它们都是一种代码复用技术。为了运行基于XUL的程序，就需要一个XULRunner运行环境。作为开发人员还需要 XULRunner SDK 来，开发编译自己的二进制程序，XULRunner SDK 也就是 Geoko SDK，二者是等价物。当然，如果只是利用现有的组件就更简单，只需要XUL运行环境就行。而 Firefox 也是基于XUL的程序，本身就集成了XULRunner，所以安装Firefox可以用来运行XUL程序了。给firefox 转入 -app application.ini 即可。

XUL作为一个基于WEB的技术，它集成了HTML、CSS、Javascript等标准的技术规范，坚果作为一个WEBER，可以立即接受XUL的设计思维。在WEB开发中界面和程序逻辑是可以很自由的分开的，它更倾向于MVC（Model-View-Control）这种开发技术，将界面和程序逻辑分开，降低项目的耦合度，使项目更易于开发和管理。

Hi XUL

一个典型的XUL程序框架由辅助信息文件、XUL界面定义、样式和程序脚本组成，目录结构如下。

+ myapp/|
+-+ chrome/
| +-+ content/
| | +-- main.xul main.js theme.css
| +-- chrome.manifest
+-+ defaults/
| +-+ preferences/
|   +-- prefs.js
+-- application.ini chrome.manifest

先来设置 application.ini:

[App]
Vendor=Jimbowhy
Name=XULDemo
Version=1.0
BuildID=20160106
ID=jimbowhy@test.org

[Gecko]
MinVersion=1.8
MaxVersion=200.*

再来设置 manifest 辅助信息：

content myapp content/

因为XUL 2.0使用根目录下的manifest文件，和旧版路径不一样，所以这里要设置第二个manifest文件：

manifest chrome/chrome.manifest

设置预引用组件：

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文件：

<?xml version="1.0"?>

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

<window id="main" title="XULDemo" width="800" height="532" screenY="60" screenX="280" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

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

  <caption  style="text-align:center;margin:32px;" label="Hello World"/>
  <separator/>
  <button label="More ..." oncommand="showMore();"/>
  <separator/>
  <description id="more-text" hidden="true&#