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

    技术2022-05-11  9

    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~~

     


    最新回复(0)