Mozilla研究—用户界面的基本要素
转载时请注明出处和作者联系方式：http://blog.csdn.net/absurd
作者联系方式：李先静<xianjimli at hotmail dot com>
更新时间：2007-3-23
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的οnlοad="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的界面，可以随心所欲的定制了。
~~end~~
