首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

XUL 学习札记

2012-10-09 
XUL 学习笔记1.什么是XUL ????? XML User Interface Language,发音为:zool,他是为开发更快更简单的Mozilla

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打开,可以看到如下效果:
?? XUL 学习札记

????? 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中使用,也不清楚怎么应用到桌面程序中,希望通过继续的学习来得到答案。

热点排行