很早就知道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; ?>
效果图:

三、相关链接
- XML-RPC in JavaScript
- XUL Project

|