XML用户界面语言（XUL）开发入门(4)

运行XUL应用程序

可以选择 3 种方式来运行XUL应用程序：

对于简单的 UI 测试（chrome 测试），只需要打开 Firefox（或者任何基于 Mozilla 的浏览器，例如 Seamonkey 或者 Mac OSX 中的 Camino）中的 .xul 文件。这种方法对于测试非常简单的应用程序很有用。Firefox 不知道 chrome.manifest，因此它也不会找到您从主要的 chrome 引用的其他 chrome 文件。

下一个测试方法是使用 XULRunner。可以下载一个 XULRunner 安装工具，或者从源文件构建 XULRunner。如果从源文件构建 XULRunner，同时也会从源文件构建 Gecko SDK。一旦安装了 XULrunner，只需要将你的 application.ini 文件位置传递给它就行了。XULrunner 将会读取此文件，以及前面提到的其他两个配置文件，以初始化应用程序。

最后，您可以使用 Firefox 3.0 作为XUL运行时。它的功能和 XULRunner 很相似。如果通过 xulrunner <path_to_app>/application.ini 在命令行使用 XULRunner 调用了您的应用程序，那么要使用 Firefox 3.0 的话，就需要使用 firefox -app <path_to_app>/application.ini 命令。

博客编辑器

XUL 开发环境准备就绪后，就可以使用XUL构建一个示例应用程序了。我们将会构建一个简单的博客编辑器，这个编辑器可以创建并预览博客条目。也可以在本地保存博客条目并在以后重新载入。编辑器将会使用XUL作为用户界面，并使用 JavaScript 来完成每件事情。开始之前，先设置用户界面。

博客编辑器的用户界面

这是最令开发人员憎恶的应用程序部分。创建用户界面非常繁琐，但是XUL使这变得很容易。XUL 有许多控件，用于创建部件和指定布局。请看清单 4 中定义的一个简单 UI。

清单 4.XUL（/chrome/xulblogger/home.xul）中定义的 UI

<?xml version="1.0"?>

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

<xul:window id="xulblogger" title="Create Blog Entry" orient="horizontal"

　　 align="start" xmlns="http://www.w3.org/1999/xhtml" height="1000"

　　 xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

　　 <xul:script src="blog.js"/>

　　 <xul:script src="json.js"/>

　　 <xul:vbox height="800">

　　　　　<xul:hbox>

　　　　　　　 <xul:label value="Name of entry"/>

　　　　　　　 <xul:textbox id="name" multiline="false" cols="70"/>

　　　　　　　　 <xul:label value="Signature"/>

　　　　　　　　　<canvas id="canvas" width="300" height="10"

style="border:1px solid gray;">

　　　　　　　　</canvas>

　　　　　</xul:hbox>　　　　　

　　　　　<xul:textbox id="entry" multiline="true" rows="10" cols="80"/>

　　　　　<xul:hbox>

　　　　　　　 <xul:label value="Tags"/>

　　　　　　　 <xul:textbox id="tags" cols="80" multiline="false"/>

　　　　　　　 <xul:button id="saveBtn" class="btnClass" label="Save" />

　　　　　　　 <xul:button id="previewBtn" label="Preview" onclick="preview()"/>

　　　　　</xul:hbox>

　　　　　<xul:hbox>

　　　　　　　　 <xul:label value="Publish Date"/>

　　　　　　　　 <xul:datepicker type="grid" value="{new Date()}"/>　　　　　　　

　　　　　</xul:hbox>

　　　　　<div id="preview"></div>

　　 </xul:vbox>　　

　　 <xul:script src="canvas.js"/>

　　 <xul:script>read();</xul:script>

</xul:window>

这是一个很简单的 UI。XUL vbox 和 hbox 组件使布局变得很简单。按从左到右的顺序，vbox 在垂直方向上依次排列各个对象，而 hbox 在水平方向排列各个对象。UI 有 2 个标签、3 个文本框（包括一个多行文本框）和 2 个按钮。这些都是非常直观的代码；即使您以前没有见过XUL，也能知道这些代码的用途。该 UI 还使用了几个更高级的控件。它使用了一个 datepicker 控件。这是在 Firefox 3 中引入的新控件。注意使用 JavaScript 表达式初始化 datepicker
的开始日期（值属性）的方式。此外，还需要注意使用户可以在XUL控件内部绘制的画布控件，该控件使他们能够对博客发布进行电子签名。仔细研究这个控件的工作原理。