当前位置: 代码迷 >> Web前端 >> XUL 学习札记
  详细解决方案

XUL 学习札记

热度:486   发布时间:2012-10-09 10:21:45.0
XUL 学习笔记

1.什么是XUL
????? XML User Interface Language,发音为:zool,他是为开发更快更简单的Mozilla浏览器而开发的. 这是一个基于 XML的语言 ,所以XML的所有特性都适用于XUL. XUL是为了在Mozilla上开发而发展的一种语言,而Mozilla正在日益成为象Java一样的应用程序开发平台。现在Mozilla在许多操作系 统上都有移植,因此可以基于Mozilla实现跨平台的开发。
????? 学习XUL你需要了解的三项基本技术是:HTML,CSS和XML的基本知识。
????? 开发和测试XUL你需要安装Mozilla/Firefox,外加文本编辑器(因为开发程序所用的文件格式都是文本的)。
????? 我所参考的英文教程 .

????? 2.一个最简单的XUL
????? 先来看一个最基础的xul文件(打开一个文本文件,拷入下面代码,并另存为FindFiles.xul):

<?xml version="1.0"?>?
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
??? id="findfile-window"
??? title="Find Files"
??? orient="horizontal"
??? xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
...
</window>

????? 从文件头可以看出,这就是一个xml文档,并且指名了样式库
????? window标签,是XUL的最基本的标签,类似于HTML的Body,表示文本的开始,所有元素都必须包含在标签中,并且所有标签与属性都必须小写。

????? 3.基本元素

????? 为了能快速上手,我把XUL理解成一种xml+xslt的机制,xml中可以定义一些基本元素,xslt中负责解释这些元素,并呈现在页面中,而安装了 Firefox后,将提供解释xml的机制,并定义了一些基本元素,如果按照html中的基本元素来理解,就可以很快上手,随着学习的进展,可以来验证上 述的理解,下面先看看他给我们定义了哪些基本元素(括号中为该元素所拥有的属性):

  • label? (id,value,control)
  • button? (id,class,label,image,disabled,accesskey)
  • image? (id,src)
  • textbox? (id,type,maxlength,multiline,value)
  • checkbox? (id,checked,label)
  • radio? (id,selected,label)
  • radiogroup? (group radios together)
  • listbox -- listhead -- listcol -- listitem -- listcell
  • menulist -- menugroup -- menuitem
  • progressmeter? (id,mode,value) ,进度条
  • spacer (flex) ,占位符
  • html:+html元素,例如:html:table html:tr,表示使用html元素
  • vbox,hbox ,类似于html中table的功能,用于页面布局,排版

????? 这里未完全列出元素和属性,具体可以参考教程,写的很详细,下面看一个例子,来理解一下这些元素的使用:

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="findfile-window"
??? title="Find Files"
??? orient="horizontal"
??? xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
??? <vbox flex="1">
????? <spacer style="height: 10px" flex="1"/>
??????? <hbox>
???????? <groupbox orient="horizontal" flex="1">
????????? <caption label="Search Criteria"/>
???????????? <spacer style="width: 10px;"/>
?????????????? <textbox id="find-text" flex="1" style="min-width: 15em;"/>
???????? </groupbox>
??????? </hbox>
?????? <spacer style="height: 10px" flex="1"/>
?????? <hbox>
??????? <spacer flex="1"/>
??????? <button id="find-button" label="Find"/>
??????? <button id="cancel-button" label="Cancel"/>
?????? </hbox>
?????? <spacer style="height: 10px" flex="1"/>
??? </vbox>
</window>

????? 另为.xul的文件后,用Firefox打开,可以看到如下效果:
??

????? 4.脚本控制
????? XUL中的脚本是通过script元素包含进来的,一个XUL文件中可以包含多个script元素,其使用方法与DHtml中没啥两样,同样将Script使用到事件句柄后就可以了

<script src="findfile.js"/>
<script src="chrome://findfiles/content/help.js"/>
<script src="http://www.example.com/js/items.js"/>
<script>
function buttonPressed(event)
{

  alert('Button was pressed!');
}
var button = document.getElementById("okbutton");
button.addEventListener('command', buttonPressed, true);
</script>

<button id="test" onclick="alert('haha')"></button>

?????? 学习到这里,感觉XUL相对于Html来说,提供了更为丰富的页面元素,使用类似于Html,但是更为强大。目前还不知道能否在IE中使用,也不清楚怎么应用到桌面程序中,希望通过继续的学习来得到答案。

  相关解决方案