四、XUL常用元素4.1 創建窗體
當准備好開發工具之後，就可以開始寫XUL了。先看一段XUL文件
<?XML version="1.0" encoding="GB2312"?>
<?XML-stylesheet href=""chrome://Chrome/skin" type="text/CSS"?>
<?XML-stylesheet href=""chrome://Chrome/skin/contact.css" type="text/CSS"?>
<window
id="QQ_setup"
class="sb_faceplate"
title="QQ2006設置"
XMLns:html="http://www.w3.org/1999/xHtml"
XMLns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
解釋一下
<?XML version="1.0" encoding="GB2312"?>
XUL也是XML文件，每個XML都必須有一個聲明，這裡聲明了版本和編碼
<?XML-stylesheet href=""chrome://Chrome/skin" type="text/CSS"?>
<?XML-stylesheet href=""chrome://Chrome/skin/contact.css" type="text/CSS"?>
指明樣式表所在位置，chrome是Mozilla一種協議，就像http一樣，只有當包被注冊到Mozilla後才可以通過Chrome訪問資源，所以在測試XUL時，可以用相對或絕對路徑，比如
<?XML-stylesheet href="../skin/contact.css" type="text/CSS"?>
作用是一樣的
<window
每個文件只能有一個window標簽，相當於Html的body
id="QQ_setup"
用於唯一識別元素，可以為JS所調用
class="sb_faceplate"
引用的樣式表類名
title="QQ2006設置"
窗體標題
XMLns:html=http://www.w3.org/1999/xHtml
XMLns=http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
引入XUL所用的名字空間。照抄就行。
>
除了上面，還有其它屬性，常用的有
hideChrome="true" 窗口標題欄是否隱藏
height="200" 窗口高度
sizemode="maximized | minimized| normal" 窗口初始化模式，最大化、最小化和普通
4.2 按鈕 <button>
<button id="button" label="Find" default="true"/>
按鈕比較簡單，label是顯示的文字，如果有多種語言版本，就要在文件頭載入DTD文件，然後用引用形式顯示文字，後面將做介紹，default是布爾值，表示窗口打開時按回車所觸發的按鈕
4.3 文本標簽<label>和<description>
<label value=" DisplayName " class="label"/>
Value是顯示文本，同時可以用class來為標簽定義樣式
<description value=" DisplayName " class="label"/>
Description基本上跟label是相同的，比如上面2行代碼顯示效果是一樣的，但description標簽可以顯示多行文字，例如
<description>
This is a multi-line description.
It should wrap if there isn't enough room to put it in one line.
Let's put in another sentence for good measure.
</description>
跟Html一樣，多個空格將被當成一個空格，回車和’n’也是不起作用的，只有當文本寬度超過上級元素圍的寬度了，才會換行，但是也可以用width屬性來定義寬度，例如
<description style="max-width:20px;">
This is a multi-line description.
It should wrap if there isn't enough room to put it in one line.
Let's put in another sentence for good measure.
</description>
例外，文本標簽可以使用control屬性來跟按鈕、輸入框之類的元素綁定，下面代碼點擊label後會觸發button，Accesskey是快捷鍵，用Alt+D即可使該label為當前焦點
<label control="DisplayName" value=" DisplayName " Accesskey="d" class="label"/>
<button id=" DisplayName " label="MyName"/>
4.4 圖片<image>
<image src=”snow.png” width=”20” height=”26”/>
Image標簽跟Html一樣，不過這不是常用的作法。常用的作法是放在skin目錄下，通過樣式表來控制。例如：
<image id="snow" />
同時在CSS裡面指定屬性
#snow{
height: 20px;
width: 26px;
background-image: url(images/snow.gif);
}
當然，你也可以用這樣顯示圖片，但我覺得這樣並不靈活，有時會撐大圖片，比較難控制
#snow{
height: 20px;
width: 26px;
list-style-image: url(images/snow.gif);
}