初识XUL用户界面UI开发

概要

XUL是Mozilia社区开发技术中的一员，主要是为用户界面UI服务，Firefox就XUL以及其它一系列相关的基础库开发出来的成功之作。事实证明XUL是成功的UI开发技术，本文以一个最简明的视角来向看官展示如何使用XUL来开发自己的定制UI程序。由于XUL及相关技术是基于WEB的，所以会HTML开发读者会更容易理解它的整个体系。当然XUL也用于桌面程序开发，Firefox就是最好的证明。

基本概念

这里的XUL是指 XML User Interface Language，独立来看，它就是XML技术的一种。而在XUL整个开发流程中，它需要和XPCOM等技术整合。XPCOM则表示 Cross Platform Component Object Model，是一种软件工程，以组件的形式来复用现有的代码以减轻程序开发负担。如果从软件复用的角度来看，这里的 XPCOM 可以和 Microsoft 的 COM 等价看待，它们都是一种代码复用技术。为了运行基于XUL的程序，就需要一个XULRunner运行环境。作为开发人员还需要 XULRunner SDK 来，开发编译自己的二进制程序，XULRunner SDK 也就是 Geoko SDK，二者是等价物。当然，如果只是利用现有的组件就更简单，只需要XUL运行环境就行。而 Firefox 也是基于XUL的程序，本身就集成了XULRunner，所以安装Firefox可以用来运行XUL程序了。给firefox 转入 -app application.ini 即可。

XUL作为一个基于WEB的技术，它集成了HTML、CSS、Javascript等标准的技术规范，坚果作为一个WEBER，可以立即接受XUL的设计思维。在WEB开发中界面和程序逻辑是可以很自由的分开的，它更倾向于MVC（Model-View-Control）这种开发技术，将界面和程序逻辑分开，降低项目的耦合度，使项目更易于开发和管理。

Hi XUL

一个典型的XUL程序框架由辅助信息文件、XUL界面定义、样式和程序脚本组成，目录结构如下。

+ myapp/|+-+ chrome/| +-+ content/| | +-- main.xul main.js theme.css| +-- chrome.manifest+-+ defaults/| +-+ preferences/|   +-- prefs.js+-- application.ini chrome.manifest

先来设置 application.ini:

[App]Vendor=JimbowhyName=XULDemoVersion=1.0BuildID=20160106ID=[e-mail][Gecko]MinVersion=1.8MaxVersion=200.*

再来设置 manifest 辅助信息：

content myapp content/

因为XUL 2.0使用根目录下的manifest文件，和旧版路径不一样，所以这里要设置第二个manifest文件：

manifest chrome/chrome.manifest

设置预引用组件：

pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");/* debugging prefs, disable these before you deploy your application! */pref("browser.dom.window.dump.enabled", true);pref("javascript.options.showInConsole", true);pref("javascript.options.strict", true);pref("nglayout.debug.disable_xul_cache", true);pref("nglayout.debug.disable_xul_fastload", true);

创建XUL文件：

<?xml version="1.0"?><?xml-stylesheet href="chrome://global/skin/" type="text/css"?><?xml-stylesheet href="theme.css" type="text/css"?><window id="main" title="XULDemo" width="800" height="532" screenY="60" screenX="280" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  <script type="application/javascript" src="chrome://XULDemo/content/main.js"/>  <caption  style="text-align:center;margin:32px;" label="Hello World"/>  <separator/>  <button label="More ..." oncommand="showMore();"/>  <separator/>  <description id="more-text" hidden="true">This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.</description></window>

创建交互脚本：

function showMore() {  document.getElementById("more-text").hidden = false;}

完成这些就可以算开发好一个XUL程序了，接下来可以选择将程序打包成XPI安装包，或使用XULRunner、Firefox来运行它，我使用后者：

firefox.exe -app application.ini

运行效果，背景是浏览的文章内容：

如果你觉得比较懒，这里提供一个BAT脚本，用来生成整个程序的结构和代码，只要将以下代码保存为XXX.BAT文件运行它就可以，如果需要含背景图片版，请到后面提供的地址下载打包文件：

@echo offset APPNAME=XULDemoset VENDOR=Jimbowhyset BUILDID=%time%set WCD=%CD%set ROOT=demo_%time:~-5,2%_%time:~-2,2%if EXIST %ROOT% goto ERRORmd %ROOT% && cd %ROOT%    echo Ready to build infrostructure    md chrome && cd chrome    echo content %APPNAME% content/>>chrome.manifest    echo build main.xul    md content && cd content    echo ^<?xml version="1.0"?^>>>main.xul    echo=>>main.xul    echo ^<?xml-stylesheet href="chrome://global/skin/" type="text/css"?^>>>main.xul    echo ^<?xml-stylesheet href="theme.css" type="text/css"?^>>>main.xul    echo=>>main.xul    echo ^<window id="main" class="theme_1" title="%APPNAME%" screenY="60" screenX="280" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"^>>>main.xul    echo=>>main.xul    echo   ^<script type="application/javascript" src="chrome://%APPNAME%/content/main.js"/^>>>main.xul    echo=>>main.xul    echo   ^<caption label="Hello World"/^>>>main.xul    echo   ^<splitter collapse="before" resizeafter="farthest"^>^<grippy /^>^</splitter^>>>main.xul    echo   ^<hbox^>>>main.xul    echo       ^<button label="More" oncommand="showMore();"/^>>>main.xul    echo       ^<button label="max" oncommand="max();"/^>>>main.xul    echo       ^<button label="min" oncommand="min();"/^>>>main.xul    echo       ^<button label="restore" oncommand="restore();"/^>>>main.xul    echo       ^<button label="exit" oncommand="exit();"/^>>>main.xul    echo    ^</hbox^>>>main.xul    echo   ^<separator/^>>>main.xul    echo   ^<description id="more-text" hidden="true"^>This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.^</description^>>>main.xul    echo=>>main.xul    echo ^</window^>>>main.xul        echo build theme.css    echo=>>theme.css    echo #main { color:white;font-size:18px; text-align:center;}>>theme.css    echo .theme_1 { width:800px;height:532px; background:url(bg.png); }>>theme.css    echo .theme_2 { width:864px; height:535px; background:url(insect-1.png); }>>theme.css    echo .theme_3 { width:748px; height:521px; background:url(moth-2.png); }>>theme.css    echo button {color:#888;width:80px;font-size:12px;}>>theme.css    echo window caption,>>theme.css    echo window description {background:url(bg.jpg);}>>theme.css    echo build main.js    echo=>main.js    echo function showMore() {>>main.js    echo     var ws=[800,864,748], hs=[532,535,521];>>main.js    echo     document.getElementById("more-text").hidden = false;>>main.js    echo     var main = document.getElementById("main");>>main.js    echo     var index = parseInt(Math.random()*3+1);>>main.js    echo     main.className = "theme_"+index;>>main.js    echo     window.resizeTo(ws[index-1],hs[index-1]);>>main.js    echo     var win = openDialog("dialog.xul", "dlg", "", "pizza", 6.98);>>main.js    echo }>>main.js    echo=>>main.js    echo function max(){>>main.js    echo     window.maximize();>>main.js    echo }>>main.js    echo=>>main.js    echo function min(){>>main.js    echo     window.minimize();>>main.js    echo }>>main.js    echo=>>main.js    echo function restore(){>>main.js    echo     // window.restore(); This method is currently not working, but you can use:>>main.js    echo     var main = document.getElementById("main");>>main.js    echo     var x = main.getAttribute("screenX");>>main.js    echo     var y = main.getAttribute("screenY");>>main.js    echo     // window.screenX or Y will be set zero if in maximize>>main.js    echo     window.moveTo(x, y);>>main.js    echo }>>main.js    echo=>>main.js    echo function exit(){>>main.js    echo     window.close();>>main.js    echo }>>main.js    cd %WCD%/%ROOT%    echo build prefs.js    md defaults && cd defaults    md preferences&& cd preferences    echo=>prefs.js    echo pref("toolkit.defaultChromeURI", "chrome://%APPNAME%/content/main.xul");>>prefs.js    echo=>>prefs.js    echo /* debugging prefs, disable these before you deploy your application! */>>prefs.js    echo pref("browser.dom.window.dump.enabled", true);>>prefs.js    echo pref("javascript.options.showInConsole", true);>>prefs.js    echo pref("javascript.options.strict", true);>>prefs.js    echo pref("nglayout.debug.disable_xul_cache", true);>>prefs.js    echo pref("nglayout.debug.disable_xul_fastload", true);>>prefs.js    cd %WCD%/%ROOT%    echo build chrome.manifest    echo=>chrome.manifest    echo manifest chrome/chrome.manifest>>chrome.manifest    echo build application.ini    echo [App]>>application.ini    echo Vendor=Jimbowhy>>application.ini    echo Name=%APPNAME%>>application.ini    echo Version=1.0>>application.ini    echo BuildID=20160106>>application.ini    echo ID=[e-mail]>>application.ini    echo=>>application.ini    echo [Gecko]>>application.ini    echo MinVersion=1.8>>application.ini    echo MaxVersion=200.0.*>>application.iniecho Ready to copy infrostructurecd %WCD%xcopy /E %ROOT% %WCD%echo Delete temporary filermdir /S /Q %ROOT%goto FINISH:ERRORecho Exists folder %ROOT%, XUL Application infrostructure build not yet.echo Please del %ROOT% before retry.goto FINAL:FINISH@echo XUL Application infrostructure build.goto FINAL:FINAL

在写示例程序的时候，深觉XUL有一种HTA复活的感觉，因为XPCOM也是一种和COM极为相似的技术，历史在以极度相似的现象重复，XUL会不会是HTA的旧瓶装新酒呢！作为一种技术，我更愿意从框架的层次来去理解它。

HTA是Microsoft老早就有的技术，XUL也实现了它，而且提供了更完善的技术后援。这里也同样提供一下HTA的参考，将代码保存为app.hta就可以像程序一样运行它：

<head>    <title>HTA Demo</title>    <HTA:Application ID="oHTA"        Applicationname="myApp"        border="none"        borderstyle="normal"        caption="no"        icon="icon.ico"        maximizebutton="yes"        minimizebutton="yes"        showintaskbar="no"        singleinstance="yes"        sysmenu="yes"        version="1.0"        windowstate="normal">    <style type="text/css">        body        {            text-align:center;color:#EEFF88;background:url(bg.jpg);            width:640px;height:320px;overflow:hidden;            /* FILTERS NOT WORKING IN CSS */            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=./chrome/content/bg.png, sizingMethod=scale)            filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);        }        a { color:white; }        h1        {            position:relative;            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);                        filter:glow(Color=#FAF900,Strength=2,enabled=0);        }    </style>    <script type="text/javascript">        function load(){            var w=800, h=480;            window.resizeTo(w,h);            window.moveTo((window.screen.width - w) / 2, (window.screen.height - h) / 2);        }        function link(a){            alert(a);        }    </script></head><body style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=./chrome/content/bg.jpg, sizingMethod=scale)" onload="load();">    <h1 style="margin-top:25%;filter:alpha(opacity=100),xray;">HTA stand for HTml Application <p style="color:yellow;"> from <p> <p style="color:#33CC22;">Microsoft over years!</p></h1>    <div> See also:<a href="https://msdn.microsoft.com/en-us/library/ms536496" onclick="link(this);">Introduction to HTML Applications</a></div></body>

资源链接

1. 代码下载：xul_hta_demo.zip 
   http://pan.baidu.com/s/1i3Br5OD#path=%252FScripting%252Fdemos 
2. XULRunner 入门：https://developer.mozilla.org/en-US/docs/Mozilla/Projects/XULRunner/Getting_started_with_XULRunner
   
3. XUL项目文档：https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL
   
4. XUL Documentation.pdf
   单文件版本：http://download.csdn.net/detail/winsenjiansbomber/9399515
   含分立文件版本：http://download.csdn.net/detail/winsenjiansbomber/9399529
   

Update

自本文发布后这几天，就一直沉在Mozilia开发中心MDN里面，一面细读XUL Tutorial，一面将其转成PDF版本，并特意为PDF电子版制作了封面，喏：

所以更新最大的内容就是添加了资源的链接，还有相关的示例代码，这部分只更新到度盘。在做DEMO时，由于例子较多，所以使用XML数据源来生成按钮，需要按FLOAT面壁来处理，不然，以XUL的BOX搞不定，这个BOX布局还真死板，这是我第一次在XUL架构上发现的一个大坑。关于XUL的float布局，当翻寻大量参考后，最后在《Rapid Application Development With Mozilla》找到两点提示，以上。

• float. Float is not supported at all in XUL.
• There are two exceptions to this rule. The <description> tag and the <label> tag will line-wrap their contents as needed. The XUL <description> tag displays content the way most HTML tags do.

期间发现官方的文案经常会在图片处理上失误，许多页面图片出现了丢失的情况。本人参考其它页面的图片地址来尝试探索出相应的图片，尽量修复文章的示例图片，使用了JS代码来检索Mozilia资源服务器：

var url = "https://developer.mozilla.org//files/642/Cskin6.jpg";var css = "max-height:220px;max-width:220px;";var img = "<img style='CSS' src='URL' />".replace("URL",url).replace("CSS",css);for(var i=3200, b=i+400; i<b; i++) document.write(img.replace("642",i));

不料有意外发现，比如这张图（源地址：https://mdn.mozillademos.org/files/3398/pic_015.jpg）：

突然发现Firefox社区的开发人员品味好糟糕，这个例子告诉广大开发人员，不要在公开服务器上放个人的资源，特别是这种反映个人品味的图片资源。要放也要先提高一下自身的品味，比如说坚果就会选择这类图片了：

又或者这个:

以上图片源自玉子的乐乎，透过这里可以看到更多关于好的内容：jimbowhy.lofter.com