firefox附加組件開發者指南(三)——XUL簡介(下)

其他XUL功能

Overlay

XUL的一個與衆不同的特性就是overlay。可以將多個XUL文檔聯合起來,並當做一個單獨的XUL文檔來處理。在Firefox中,這用來對各種功能進行模塊化並實現了擴展。
通過在XML聲明中插入一個xul-overlay處理指令和根元素的開始標籤,通過xul-overlay指定的XUL文檔會在當前當前的XUL文檔讀取的同時進行讀取。實際顯示的XUL文檔是原始XUL文檔和由xul-overlay指定的文檔結合體。
將清單25的內容保存爲文件base.xul。看看使用這個XUL文檔的顯示例子。
清單25:base.xul

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xul-overlay href="overlayDocument.xul"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="box1">
<label id="label1" value="Text label"/>
</hbox>
<hbox id="box2">
<label id="label2" value="Text label"/>
</hbox>
</window>

附加元素

當定義XUL文檔打開爲overlay的時候,使用overlay元素作爲根元素。將清單26命名爲overlayDocument.xul並保存在base.XUL文件相同目錄下。
我們在Firefox窗口中打開base.xul。在讀取base.xul的同時讀取了文件overlayDocument.xul,結果如圖19所示,overlayDocument.xul文件附加到 base.xul之後。
清單26:overlayDocument.xul文件

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="Button 1"/>
<button label="Button 2"/>
<button label="Button 3"/>
</overlay>

圖19:清單25和26的輸出

合併與插入元素

通過在overlay的XUL文檔中插入id屬性到要添加的元素,基本文檔中相同id值的元素就會將它們的屬性和值合併到overlay文檔中。
用清單27中的內容覆蓋overlayDocument.xul並重新存儲。
清單27:代替overlayDocument.xul的內容

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="box1" align="center" style="border: 1px solid; margin: 1em;">
<button label="Button 1"/>
<button label="Button 2" insertbefore="label1"/>
</hbox>
<button label="Button 3"/>
</overlay>

再次在Firefox窗口中打開base.xul。如圖20所示,style屬性從具有id爲”box1”元素的overlay文檔合併到了基文檔中具有相同id的標籤上,插入到box中。
圖20:清單25和27的輸出

更多的,聲明瞭insertbefore=”label”的”button2”按鈕插入到了id爲label1的元素之前。相反的,如果想要直接插入到後面,就開業使用insertafter屬性。也可以使用position元素的方法來準確定位到任何位置。例如,使用position=”4”可以將其插入作爲第四個元素。

外部實體

XUL作爲XML的一種形式,也可以使用基於DTD的實體參考,如清單28所示。注意外部DTD文件只限於使用chrome URL來給出。網頁或本地目錄的常規DTD文件不會打開。
Note: You may use a relative path to access a chrome URL from an XUL document.
清單28:讀取外部實體

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<!DOCTYPE window SYSTEM "chrome://testapp/locale/testapp.dtd">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="&button.1.label;"/>
<button label="&button.2.label;"/>
</window>

清單29:testapp.dtd
<!ENTITY button.1.label "Firefox">
<!ENTITY button.2.label "Thunderbird">

屬性聲明的替代CSS

Gecko渲染引擎包含很多-moz-開頭的CSS屬性;這些是XUL的自定義屬性,下面表4中顯示了與常規XUL屬性的對應。事實上,那些XUL屬性是通過這些CSS屬性來操作的。
爲這些CSS屬性聲明的值與XUL屬性使用的是相同的整型值或者按鍵值。然而不推薦將這些屬性用於常規的XUL開發中,這些在自定義Firefox的UI時非常有用,不需要對userChrome.css編寫腳本。例如,如果你將清單30中的內容命名爲userChrome.css並保存到用戶profile文件目錄下的chrome目錄,tab工具欄就會出現在內容區域的下方。
表4:css屬性與XUL屬性的對應

XUL attribute

CSS property

Example

orient 

-moz-box-orient

-moz-box-orient: vertical;

align 

-moz-box-align

-moz-box-align: start;

pack 

-moz-box-pack

-moz-box-pack: stretch;

flex

-moz-box-flex

-moz-box-flex: 1;

ordinal

-moz-box-ordinal-group

-moz-box-ordinal-group: 2

清單30:一個將tab工具條放到底部的用戶樣式表
tabbrowser .tabbrowser-strip {
-moz-box-ordinal-group: 2;
}
tabbrowser tabpanels {
-moz-box-ordinal-group: 1;
}

文件類型對應的圖標

Firefox中使用一種特殊的URI結構moz-icon來產生文件類型的圖標,這些圖標是Firefox運行的系統中的標準圖標。例如,要爲後綴爲.pdf的文件顯示一個16×16的圖標,就可以使用moz-icon://.PDF?size=16。
你也可以使用內容類型作爲關鍵詞而不使用點後綴來作爲圖標的參考;例如,你可以使用moz-icon://goat?size=16&contentType=text/plain來顯示一個純文本的圖標。
表2中提到的按鈕圖標也可以使用moz-icon URI來調用,使用的標記爲moz-icon://stock/gtk-button name?size=button。注:在unix環境中這不起作用。

微調按鈕

你可以爲textbox元素添加一個type=”number”的聲明就可以將文本框指定爲一個熟人數字值的控件。這也會導致如圖21所示的微調按鈕的出現。與這個相關的屬性是min和max用來設置最小和最大值,以及increment來設置黨點擊一次微調按鈕時顯示的值的變化量。
圖21:用於數字輸入的文本框

滑動條

scale元素用起來與windows中的音量控制滑塊非常相似,用滑塊可以通過上下或左右移動滑塊來改變值(如清單31和圖22所示)。
Note: Although this control is also known as a slider, the slider element already exists in XUL as a part of a scrollbar, so this element has been named "scale".
清單31:scale元素

<hbox>
<scale orient="horizontal" min="-100" max="100" value="0"/>
<scale orient="vertical" min="0" max="100" value="50"/>
</hbox>
圖22:清單31的輸出

譯文PDF版下載


發佈了32 篇原創文章 · 獲贊 83 · 訪問量 29萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章