科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件Mozilla研究—用户界面的基本要素

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

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

这里只介绍用标记语言(ML)开发界面的一些要素。

作者:absurd 来源:CSDN 2008年2月15日

关键字: 要素 用户界面 Mozilla Linux

  • 评论
  • 分享微博
  • 分享邮件

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的界面,可以随心所欲的定制了。

 

查看本文来源
    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章