介绍XUL的一篇文章

基于XML的用户界面标记语言 —— XUL
丁建亭
同济大学，上海，200092

　　摘要：深入考察如何基于XUL开发Rich Client web Application。本文首先介绍XUL以及 XUL的使用方法然后利用XUL实现文件查询系统．最后讨论XUL和其他UI语言相比所具有的优点。
关键词：XUL，XML，MVC，Java，Mozilla
中图分类号：TP311．文献标识码：A
　XML User Interface Language - XUL
Tim Ding
Abstract：Study how to develop rich client web application by using XUL．First there is an introduction about XUL
and usage of XUL in the paper．Then show how to implement the system of find file At last compare XUL with other UI
languages and draw a conclusion．
Key Word：XUL，XML，MVC，Java，Mozilla

1引言
　　随着网络应用的普及，B/S模式系统的应用范围越来越广泛。B/S系统是基于无连接、无状态的HTTP协议．使用浏览器承载客户端界面和主要功能．客户端功能因而受到浏览器的严重限制，难以实现一些复杂的功能．也不容易设计出人性化的界面，而且 HTML/JavaScript页面在不同的浏览器中往往呈现不同的外观．同时也难以设计多窗口的应用程序．大量的代码被用来生成 HTML/JavaScript的页面，所以当开发一套 B/S模式的复杂的企业应用时．设计客户端会耗费大量的时间．并且容易导致错误。
　　针对上述问题 ．Mozilla开源社区开发出了基于XML的用户标记语言--XUL．它不仅能开发 Rich Client Web Application．也可以开发独立于浏览器运行的应用程序。本文主要在如何利用 XUL开发 Rich Client Web Application方面做一深入介绍。

2 XUL
　　XML User-interface Language．简 称 XUL(pronounced zool and it rhymes with coo1)．它是一种构建UI的标记语言，利用XUL，可以很容易地构建丰富的、复杂的、跨平台的web应用。许多基于Mozilla的浏览器(Mozilla、Macintosh平台上的 AOL、Linux上的 Galeon以及 Netscape)，它们的菜单、工具栏、滚动条、对话框等等都是用 XUL文档构建的。
　　XUL是基于XML技术对 Html的扩展，完全兼容Html。XUL利用 CSS来控制界面风格，利用DTD方便的实现本地化，利用JavaScript实现事件机制．而且可以通过调用Mozilla提供的丰富的底层API实现文件操作、网络操作、图形操作等各种操作．并且这种 API是完全跨平台的，当然也可以通过对象文档接口DOM来动态控制用户界面。
　　XUL存在的理由何在?多半是因为 HTML适合显示超文本文档，但是却不适合显示 GUI。传统的基于Web的应用程序花费了无穷无尽的力量．试图强行让HTML具有传统表单/菜单形式的应用程序的外观。例如在 Browser/Server时代最经典的 Framework：Erik等编写的 Bindows．这个框架已经将 JavaScript的OOP和基于 IE(6.0) 的DHTML发挥到极点，Bindows可以说解决了很多WEB开发人员需要解决的所谓 UI问题．但是．HTML还是不能满足日趋复杂的企业应用，特别是那些要求多次提取网页来完成一项事务处理的复杂系统．用html技术实现往往会导致交互速度低得无法接受，因为HTML当初根本就没有打算达到那样的目的。因此网络上出现了“回归 Client/Server模式”呼声。
　　现在 XUL到来了。XUL沿袭了 HTML的极瘦客户机模式，但稍微让它变胖了一些。除了任何极瘦客户机都会提供的几种最平常的表单元素之外，XUL还像复杂些的客户机软件一样，提供了完整的控件组。以前C/S结构的客户端可能是VB开发的，也可能是Delphi 开发的．现在更胖的客户端可以实现为一个或者多个XUL文档．不再是一组对象，并且 XUL文档能通过WEB传递(或者仅仅进行本地处理)，这样，XUL就将HTML轻量级的优势与传统 GUI结构化的可用性结合起来了。
　　XUL像 HTML一样，很多标签都比较简单，例如toolbar、menu、textbox和 radiogroup等等。在 XUL的标签中，有很多是容器标签，就像 java swing中的JPanel、JToolBar等，可以对它们包含的标签的布局产生影响，例如”hbox”是”horizontal box”的缩写。这种包容关系在XUL中有很多，例如toolbox包含 menubar，而 menubar 又包含若干 menus．其中每一个 menus都可以提供一个menupopup下拉菜单．这个 menupopup中又包含若干个 menuitem菜单项。至于其他标签，spacer用于在屏幕上的元素之间加入空隙。button和 checkbox．textbox等象 HTML中的标签一样，用来执行脚本和输入数据的。Grid标签是用来显示一系列数据的，比html高级之处在于grid能和datasource绑定。label和 description两个标签专门用来代替 HTML中的 <p>。 XUL标签中用到的某些属性与 HTML中是一样的，比如 id、class、value、accesskey、readonly和 selectedlndex。其他属性则是 XUL专有的，比如 grippyhidden(不让用户隐藏某个菜单栏)和 oncommand(这是一个事件处理程序，当选中某个菜单项时激活)。
　　XUL事件处理机制和HTML是大致相同的，除了一些特殊的应用。使用方法就是在标签的属性添加一个属性，例如：onclick．onmousedown，onkeypress，onload，oncommand等．属性的值是需要调用的Script函数。
<button id=”cancel-button” label=”Cancel” onclick=”window.close();”/>
Command标签通常创建一些命令来执行一定的操作。尽管你能调用 Script来完成同样的操作，但是Command与Script相比有以下优势：
1) 当需要时能自动取消；
2) 与 Java中的interface相似，调用的某个 command．无需知道command的具体实现。
因此Command在大系统中非常有用。
<command id=”cmd_openhelp” oncommand=”alert(‘Help!’);”/>
<button label=”Help” command=”cmd_openhelp”/>

3基于XUL的查询文件系统
　　查询文件系统的目的是解决用户查询文件的问题．完全实现查询的智能化，从而提高用户的查询效率。一个好的查询文件系统的界面应具备以下几个特点：1)高效性：能否快速输入查询条件直接决定了操作人员的工作效率．因此输入查询条件的速度是非常重要的；2)可移植性：系统可以作为应用程序来运行，也可以作为 Web应用程序来运行．基于以上两点，查询文件系统的表示层利用XUL来实现。
下面是文件查询系统界面的实现代码。
　　代码清单 l
<!-- 菜单实现代码 --一>
<!-- 输入查询条件多个tabpanel实现代码-->
<tabbox>
<groupbox orient=”horizontal”>
<caption label=”Search Criteria”/>
<menulist formid=”mainform” id=”searehtype”>
<menupopup>
<menuitem label=” Name”/>
<menuitem label=” Size”/>
<menuitem label=” Date Modified”/>
</menupopup>
</menulist>
<spacer class=” springspace”/>
<menulist formid=’’maiform”id=”searchmode”>
</menulist>
</groupbox>
<tabpanel>
<tabpanel id=”optionspanel” orient=”vertical”>
<checkbox formid=”mainform” id=”casecheck” label=”Case Sensitive Search”/>
<checkbox formid=”maiform” id=” wordscheck” label=”Match Entire Filename”/>
</tabpanel>
</tabpanels>
</tabbox>
　　代码清单 l的界面显示
　　在两个 tab的输入项中输入数据．点击”Find”钮，Mozilla就会调用代码清单 2中的submit(formid)数．把输入的数据提交到服务器端 http://16.157.130.8:7001/xul/dofind.jsp进行处理．然后把结果返回给Mozilla。
代码清单2中的javascript处理思路如下：XUL没有提供和 html form对应的部件，所以提交数据时首先需要创建一个html form ，然后取formid是 mainform(每个需要提交数据 的部件 的 formid属性的 value为mainform)的部件 ，接着取得它们的 value，如果是checkbox就取 data.item(i).checked．紧接着把 id和value以hidden的形式append到http form 中．最后提交httpform 。
代码清单 2
function submit(formid){
vat form =createForm (formid, ”mainform”,”dofind.jsp”,”post”,”_self”);
setFormData(form，formid)；
form.submit0；
}
function createForm(formid,name,action,method,target){
vat form =document．getElementByld(formid)；
if(form !=nul1){
document.documentElement.removeChild(form)；
var form:document.createElementNS {“http://www.w3.org/1999/xhtml”,”html:form”)；
form.setAttribute(“id”.formid);
form.setAttribute(“nanle”,name);
form.setAttribute(“action”,action);
form.setAttribute(“method”,method);
form.setAttribute(“target”,target);
document.documentElement.appendChild(form);
}
return form;
}
function setFormData(form,formid){
var data=document.getElementsByAttribute(“formid”,formid);
for(i=0; i<data.1ength; i++){
vat val=document.createElementNS(“http://www.w3.org/1999/xhtml”,”html:input”);  
va1.setAttribute(“type”,”hidden”);  
va1.setAttribute(“name”,data.item(i).getAttribute(“id”));  
alert(data.item(i).checked);  
if(data.item(i).value===undefined)f
va1.value=data.item(i).checked;  
} else {
va1.value=data.item(i).value;  
}
form.appendChild(va1);  
}
}

4同类技术
　　从最先 MS公布的 Longhorn的下一代．Net用户接口语言 (XAML)，到 Macromedia为了配合 JAVA的FLEX Flash用户接口语言(MXML1，它们都是由最早的SVG、XUL转变过来的。
　　XUL是基于现有的 web技术开发出来的．比如CSS和 Java,Script．Web开发人员由于对这些技术都比较熟悉，因此转向XUL技术相对转向其它 UI语言更加容易和平滑，而XAML所涉及的几乎都是．NET的技术，对于web开发人员，这种转变的面临着巨大的技术鸿沟，因此要想在web领域使用XAML技术．不可避免存在很多困难。
 
5总结
　　本文主要对 XUL的概念和用法做了简单的概述并对开发中遇到的问题提出了解决方案，同时将 XUL与同类技术做比较，阐述了不同技术各自的优缺点。本人对 XUL的理解还不是很透彻，水平有待提高，不当之处，请大家指正。

6参考文献：
[1] http://www.mozilla.org/projects/xul/joy-of-xul.html

很好很好。xulplant看的头痛就放弃了

刚开始看xul，想请教一下路过的朋友，如何让多列的list的列的宽度可以拖拽改变，而不是通过设置flex的属性

还请各位前辈不吝赐教

大哥大姐，咋都这么不好意思呢

zhitao521：大哥大姐，咋都这么不好意思呢回到原帖

Sorry，我对XUL了解也很有限，空余时间不多，帮不上忙。