作者：未知 来源：月光软件站 加入时间：2005-2-28　月光软件站

很早就知道XUL是什么东西，但一直未用过，直到今天在David Sklar的BLOG上看到这篇关于XUL的文章（Creating Rich Applications with Mozilla, XUL, and AMP Technology）。

一、什么是XUL？

XUL即XML-based User Interface Language的缩写，是一种基于XML的界面设计语言，提供了各种各样的元件(elements)和物件(widgets)。它可以在 Mozilla 家族的所有产品中运行。

其实就跟微软大势宣扬的XAML一样，未来没有C/S或者B/S可言。至于XUL和XAML这两者谁效仿谁，就不是我们这些最终用户该研究的了:)

二、牛刀小试

<?php
function genFunctionPanel() {
  $exts = get_loaded_extensions();
  natsort($exts);
  $xul = '<tree flex="1">
      <treecols>
        <treecol label="函数列表" flex="1" primary="true"/>
      </treecols>
      <treechildren>';
  foreach ($exts as $ext) {
    $funcs = get_extension_funcs($ext);
    if (count($funcs)) {
      $xul .= '<treeitem container="true">
            <treerow>
              <treecell label="'. $ext .'" />
            </treerow>
            <treechildren>';
      foreach ($funcs as $function) {
        $xul .= '<treeitem>
                <treerow>
                  <treecell label="'. $function .'" />
                </treerow>
              </treeitem>';
      }
      $xul .= '</treechildren></treeitem>';
    }
  }
  $xul .= '</treechildren></tree>';
  return $xul;
}

function genConstantPanel() {
  $xul = '<listbox flex="1">
      <listcols>
        <listcol flex="1"/>
        <splitter />
        <listcol flex="1"/>
      </listcols>
      <listhead>
        <listheader label="常量" />
        <listheader label="值" />
      </listhead>';
  foreach (get_defined_constants() as $const => $value) {
    $xul .= '<listitem>
          <listcell label="'. $const .'" />
          <listcell label="'. $value .'" />
        </listitem>';
  }
  $xul .= '</listbox>';
  return $xul;
}
$functions = genFunctionPanel();
$constants = genConstantPanel();
$xul = <<< EOD
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window title="PHP-XUL" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox flex="1">
  <vbox align="center">
    <hbox flex="1">
      <tabbox>
        <tabs>
          <tab label="函数列表" />
          <tab label="PHP常量" />
        </tabs>
        <tabpanels>
          <tabpanel id="functions">
            $functions
          </tabpanel>

          <tabpanel id="constants">
            $constants
          </tabpanel>
        </tabpanels>
      </tabbox>
    </hbox>
    <hbox>
      <image src="http://blog.csdn.net/images/blog_csdn_net/ezdevelop/18636/o_wwl-photo.gif" />
    </hbox>
    <hbox>
      <label value="PHP - XUL" style="font-weight:bold;"/>
    </hbox>
    <hbox>
      <label value="www.phpsalon.com" style="font-weight:bold;"/>
    </hbox>
    <hbox>
      <button label="按钮测试！" onclick="alert('Hello World.');" />
    </hbox>
  </vbox>

  <splitter />
  <vbox flex="2">
    <groupbox caption="欢迎光临">
      <hbox align="absmiddle">
        <description style="margin-top: 5px;">地址：</description>
        <textbox id="siteurl" size="50"/>
        <button label="访问网站" onclick="document.getElementById('descFrame').setAttribute('src', document.getElementById('siteurl').value);" />
      </hbox>
    </groupbox>
    <splitter />
    <hbox flex="1">
      <iframe flex="1" id="descFrame" name="descFrame"/>
    </hbox>
  </vbox>
</hbox>
</window>
EOD;

header("Content-type: application/vnd.mozilla.xul+xml; charset=gb2312");
echo $xul;
?>

效果图：

三、相关链接

1. XML-RPC in JavaScript
2. XUL Project

相关软件：