Mozilla研究—用户界面的基本要素

mozilla是一个以浏览器为中心的软件平台，它在我们平台中占有重要地位。我们用它来实现WEB浏览器、WAP浏览器、邮件系统、电子书和帮助阅读器等应用程序。为此，我最近花了不少时间去阅读mozilla的代码和文档，我将写一系列的BLOG作为笔记，供有需要的朋友参考。本文介绍一下用户界面的基本要素。

我们说过mozilla应用程序的界面都是以标记语言(ML)来写的，其实这里有个例外，那就是以embeded方式构建而成的minimo，这里的embeded和IE Control类似，以控件形式提供，可以嵌入到自己的应用程序之中。这类应用程序的界面还是用原生的C/C++实现的，和普通开发没有什么差别，我们就不再多说了，而这里只介绍用标记语言(ML)开发界面的一些要素。

1.       XUL

这是一种用XML来描述用户界面的语言。用XML来描述用户界面已经不是什么新鲜的事了，像Qt designer和Glade都是用XML文件格式来存放用户界面描述的，但它们都只是纯粹的描述界面。而XUL同时描述了事件处理、风格(style)和字符串国际化等信息，可以直接被mozilla layout引擎解析执行。

2.       XBL

这种称为扩展绑定语言(Extensible Binding Language)的东东也mozilla的一大特色。作为程序员，我们都知道公共函数库的重要性，公共代码可以反复重用，从而提高开发效率。在开发用户界面时，也会遇到这个问题，很多界面都比较类似，拷贝/粘贴当然很容易，但以后维护起来就麻烦了。而XUL并没有提供重用机制，XBL刚刚弥补了它的不足。在XUL中只描述具有共性的部分，而由XBL对它以多种方式进行扩展。XBL自身也有组合和继承机制，大大提高可重用性。

3.       CSS

我们知道Cascading Style Sheets在网页中已经应用很多年了，而在浏览器本身中使用倒是很少听说。这也没有什么奇怪的，像GTK+中的RC和CSS功能都差不多，也就是说GNOME应用程序一直都在使用类似于CSS的东西。有了CSS，把应用程序的界面视感(look and feel)与功能独立开来，两者可以独立变化，这是非常自然的事了。

在XUL中使用CSS和在HTML中使用CSS一样方便。不过CSS在这里，除了可以修改界面风格，还可以把XBL和XUL关连起来，以完成对XUL的扩展。

4.       Javascript

在XPConnect的支持下，Javascript也可以用来开发COM组件，可以实现任何功能，不过胶合用户界面(XUL)和内部实现才是它最拿手的好戏。当然，其中文档对象模型(DOM)起了很大作用，Javascript通过文档对象模型(DOM)来操作XUL中的元素。

5.       DTD

它在这里不是为了定义某种语言的语法，而是完成字符串的本地化。这看起来有些大材小用，不过在XML中使用DTD来替换要翻译的字符串，没有比这更好的办法了。

6.       property

在XUL中用DTD来做字符串国际化，虽然是妙着一招，可是在javascript中它就没有用武之地了。这里该轮到property上场了，在nsIStringBundle接口的帮助下，javascript可以方便的从property文件中取到所要的字符串。

下例是安装XPI时提示框对应的XUL：

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://mozapps/content/xpinstall/xpinstallConfirm.css" type="text/css"?>

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

<?xml-stylesheet href="chrome://mozapps/skin/xpinstall/xpinstallConfirm.css" type="text/css"?>

<!DOCTYPE dialog SYSTEM "chrome://mozapps/locale/xpinstall/xpinstallConfirm.dtd">

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

        id="xpinstallConfirm" title="&dialog.title;" style="width: 30em" 

        onload="XPInstallConfirm.init()" 

        ondialogaccept="return XPInstallConfirm.onOK();"

        ondialogcancel="return XPInstallConfirm.onCancel();">

  <script src="chrome://mozapps/content/xpinstall/xpinstallConfirm.js"/>

  <stringbundle id="xpinstallConfirmStrings" 

                src="chrome://mozapps/locale/xpinstall/xpinstallConfirm.properties"/>

  <vbox flex="1" id="dialogContentBox">

    <description id="itemWarningIntro"/>

    <vbox id="itemList" class="listbox" flex="1" style="height: 16em; overflow: auto;"/>

    <description>&warningText2.label;</description>

    <description class="warning">&warningText3.label;</description>

  </vbox>

</dialog>

    xml-stylesheet指明了css文件的位置。

    DOCTYPE 指明了存放字符串的DTD文件的位置。

    script 指明了脚本文件的位置。

    stringbundle 指明了存放字符串的properties文件的位置。

事件的处理函数关联和HTML中一样，是通过tag属性来指定的。比如dialog的onload="XPInstallConfirm.init()"指明了onload事件的处理函数。

下例是上面用到的xpinstallConfirm.css文件：

installitem {

  -moz-binding: url("chrome://mozapps/content/xpinstall/xpinstallItem.xml#installitem");

  display: -moz-box;

}

.listbox {

  -moz-appearance: listbox;

}

#itemList {

  margin: 10px 4px 10px 4px;

}

-moz-binding: 指明了XBL文件的位置。

所有这些文件都是文本文件，而且简单易懂，只是稍微看看相关资料，就可以去修改mozilla的界面，可以随心所欲的定制了。