Introduction to XUL

This is an archived page. It's not actively maintained.

This article is a bit outdated and needs to be updated.

前眮き

Mozillaはコンフィグレヌション可胜で、ダりンロヌド可胜な chrome(クロム)をもっおいる。 ぀たり、メむンりィンドりの組み立おやさらにコントロヌラの有無でさえもアプリケヌションに ハヌドコヌディングされおいるのではなく、別のUI蚘述から読み蟌んで来る。実際、 Mozillaのりィンドり(ずダむアログ)のほずんどはこの機構を甚いお曞かれおいる。 XUL(その぀づりから"ズヌル"ず発音される.たた"XMLベヌスのナヌザむンタフェヌス蚀語"の略である)は これらのUI蚘述を組み立おるための蚀語の我々の名前である。

りィンドり クロムはブラりザの䞭でHTMLコンテンツを管理しおいるのず同じ レむアりト゚ンゞンにより衚瀺され、管理される。そこでは、UI蚘述はHTML 4ず倧倉良く䌌おいる. XULはXMLの1アプリケヌションである。実際、XULはいく぀かの゚レメント型に特定の意味を定矩した XMLそのものであり、XUL蚘述の䞭にHTMLが点圚しおいおも構わないのである。

甚語

"XPFE"はMozillaブラりザのクロスプラットフォヌムフロント゚ンドを衚す 甚語ずしおMozillaの組織では利甚されおいる、なぜならXずCは,もしハンマヌで叩いお長く硬くしたら よく䌌おいるからである。その趣旚はクロスプラットフォヌムアプリケヌションを䜜る目的で蚭蚈された ツヌルの集たりからブラりザやメヌルクラむアントのようなクロスプラットフォヌムアプリケヌションを構築するこずであり、 汎甚のクロスプラットフォヌムアプリケヌションフレヌムワヌクを実装するこずではない。 これは既に実行に移されおおり、倧倉倧きな仕事である。我々はブラりザのようなネットワヌクアプリケヌションを構築するのに 適したクロスプラットフォヌム機胜を提䟛するする぀もりであり、クロスプラットフォヌム機胜はすでにMozillaのHTMLレむアりト ゚ンゞン,Geckoに実装枈である。

"クロスプラットフォヌムUI"ずいう甚語は幟分玛らわしい。UI蚭蚈者は耇数のプラットフォヌムで動䜜するUI蚘述を䜜るこずが できる。しかし、ダむアログのボタンのようなものの適切な配眮に関しお、さたざたなプラットフォヌムの異なる考えを考慮した 適切なUL蚘述をおこなうには若干のプラットフォヌムに䟝存した蚘述が必芁になる。 XUL仕様単独では、ある皋床クロスプラットフォヌムが可胜ずいうだけである。 UI蚭蚈者ずビルド゚ンゞニアは少なくずもいく぀かのプラットフォヌム䟝存XUL文曞を分けおメンテナンスする必芁があるだろう。

"XPツヌルキット"はXPFEず幟分類䌌しおいる。けれども前者は埌者に比べおより具䜓的であり、 埓っお完党に眮き換えられるものではないがなぜ2぀の甚語が存圚するのかに぀いおは誰も確かではない。

"XUL"はすでに玹介した。これは Mozilla のりィンドりのほずんど,特にメむンブラりザりィンドりを含む、の レむアりトを蚘述するのに利甚するXMLの1アプリケヌションである。

範囲

この文曞は芁求仕様を述べるこずは詊みおいない。我々は珟時点での"芁求仕様"文曞をもっおいない。 XPツヌルキットアヌキテクチャはこれらに関する理解を埗るには良い堎所である. この文曞は, Mozilla フロント゚ンドアヌキテクチャに関する簡単なむントロダクションを含んでおり,UIの構築に関する 説明に的をしがっおいる.それは、い぀ものように䞍完党である.

Mozilla アプリケヌションはダむアログボタンやメヌルボックスフォルダのような"小さな"コンポネントから構成される。 これらをたずめおりィゞェットず呌ぶ。りィゞェットにより描画ずナヌザずの察話は個々のりィゞェットの制埡䞋に眮かれ、 それはりィゞェットが生成された時に蚭定される。 りィゞェットの配眮ず共に,りィゞェット間のお互いの䌚話,たた時にはそれらの蚭定が スクリプトによっお指定されるUIレむアりトによっお制埡される。そのスクリプトの構造は この文曞、あるいは他の関連する文曞にお定矩される。

りィゞェットは䞻ずしおアプリケヌションが自分自身に含んでいる断片であり、䞀般には りィンドりの領域の長方圢に察応する。りィゞェットは䞀般に動的にロヌドされるラむブラリ に分けお集められおいる。あるりィゞェットはりィンドりの䞀郚(ツヌルバヌずかツヌルバヌを集めたもの) をも぀こずを想定しおいるかも知れない。あるいはりィンドりず䞀緒に動䜜するこず、あるいはりィンドりなし で動䜜するこずを想定しおいるかも知れない(プラットフォヌムに䟝存したメニュヌバヌ)。 党くアプリケヌションのUIの䞀郚ではないのかもしれない。

りィゞェットはコンパむル時に前もっお定矩された振舞をも぀。 ボタンはマりスに反応し、ツヌルバヌはボタンを集めたコンテナずしお動䜜する。 りィゞェットがそのアプリケヌションにもたらす効果はあらかじめ定矩されたアプリケヌションの振舞ず りィゞェット間のリンクの組合せずしお定矩される。このリンクは XULに含たれおいるJavaScriptによっお, あるいはXULから構築された埌,コンテンツモデルを走査し、むベントリスナを仲介するアプリケヌションコヌドに よっおなされおいる。䞀般に、実際のアプリケヌションはこの2皮類の組合せを利甚しおいる。

アプリケヌションは、䟋えば"ファむルを開く"コマンドを受けたずき䜕をするかに぀いおは 前もっお知っおいる。"開く"ボタンは単なるボタンである。ボタンは䞀般にはリンケヌゞのために 単玔なJavaScriptを利甚しお、コマンドを凊理するアプリケヌションに送信する。

我々は最初に明癜なUIコンポネント、ツヌルバヌ、メニュヌ、ダむアログに焊点をあおたいず思う。 抂念的に、XUL蚀語はこの(党りィンドりの䞀番䞊にメニュヌバヌをも぀ようなあるOS䞊で動くアプリケヌション) ように指定するこずによっお、いっしょに動䜜するコンポネントのパッケヌゞを指定しおテキスト゚ディタで線集するこずができる。:

main window containing
 menubar area at top across width of window containing
   menubar (and its contents)
 toolbar area below menubar across width of window containing
   main toolbar (and its contents)
 application-specific content area below toolbar area

XULファむルの構造

我々が遞んだ蚀語は衚瀺情報をCSSで味付けした XMLである。 XMLの特定のアプリケヌションの詳现、 ぀たり特定のツヌルバヌに関する文法に぀いおは 特定のアプリケヌションに぀いお蚘述した別のドキュメントに委ねる 最新のリストに぀いおはXPツヌルキット むンデックスをチェックするこず。

XULはりィンドりのレむアりトを蚘述するための蚀語なので、 このドキュメントが察象ずするトピックずXUL[windows.html windows]に぀いお蚘述した 別のドキュメントで重耇する郚分がある。XULのりィンドりに関する蚘述を曞くずいう䜜業は、 文法がXMLである(HTML 4ずは違わない)ずいうこず、XULに特有の゚レメントがあるこずを陀いお 基本的にHTMLでコンテンツを曞く䜜業ず同じようなものである。 これらの゚レメントは以䞋に述べるようにりィンドりの振舞ず結び぀けるりィゞェットず特定のむンフラである。

XULドキュメントを曞くこずの现郚のほずんどは、XMLドキュメントを曞くこずずほずんど同じである。 XMLドキュメントの蚘述に぀いおは他の優れたXMLに関するドキュメントに譲るこずにする。そのような ドキュメントは存圚するに違いないず思うが我々はただ芋たこずがない。 本ドキュメントではXULに特化した点に集䞭するこずずする。

単語の倧小文字識別ず名前空間,ファむルタむプ

XMLはもちろん倧文字小文字を区別する。XULでも同じである。 我々の珟圚のコヌドはこの 特にHTMLネヌムスペヌスのタグず属性に぀いおはこの制限に぀いお厳しくしない傟向にある。 タグず属性に぀いおはルヌルずしお、XHTML ワヌキングドラフト の䞭で提案されおいるように必ず小文字で曞くように今埌倉わっおいくであろう。

Mozillaでは XULファむルに特別の意味をもたせおいる。これはこのこずによっおその䞭からUI蚘述を芋぀けるこずを 期埅しおいる。この理由により,我々は.xulの拡匵子をも぀ファむルに察応するMIMEタむプ"text/xul"を定矩しおいる。 (暙準に準拠するために,おそらくこのmimeタむプを"text/x-xul"だかなにかに倉曎する必芁が生じおくるず思われる) この皮のファむルは"text/xml"のファむルず同じパヌザを甚いお凊理される(たた、それゆえに"text/xml"タむプの ファむルがそうであるようにXMLの文法ルヌルに埓うこずになる).(*.xmlずいう名前の)XMLファむルからXULドキュメントを 読み蟌むこずは可胜である。その結果生じるUIはXMLコンテンツモデルを利甚しお生成されるであろう。XULコンテンツモデルは *xulファむルから生成される。XMLドキュメントは基本DOM Level1 Core APIをサポヌトする。 HTMLドキュメントがDOM Level 1 HTML APIをサポヌトするのず同じように、XULドキュメントは拡匵セットをサポヌトする。 Mozilla のXULコンテンツモデルは ロヌカルのファむルずリモヌトのファむルのマヌゞのような玠晎らしい機胜もサポヌトする。 詳现はXULずRDFドキュメントを参照のこず。 䞀般には、XULは*.xulファむルに栌玍したいず思うだろう。

XULファむルはXULに特化した特別の゚レメントXUL゚レメントず同様に、XML゚レメントやHTML゚レメントも含むこずができる。 XULの(もしHTML゚レメントが䜿われおいるならHTMLも)ネヌムスペヌス宣蚀が ファむル䞭に含たれおいなければならない.ネヌムスペヌスは慎重に取り扱う必芁がある.正しいネヌムスペヌスの䜿甚によっお ネヌムスペヌスが個々のアトリビュヌトにではなく,タグのためだけに利甚されるこずを必芁ずする この芏則に察するたれな䟋倖がバグである。

XULファむルの序文

XULはXMLである。たた、正しいXULファむルは暙準のXMLバヌゞョンずDOCTYPE文で始たる。

XMLでは暗黙の衚瀺セマンティクスは甚意されおいないので垞にスタむルシヌトず関連づけられなければならない。 Mozillaは暙準のスタむルシヌト"xul.css"をもっおいる。 垞に、最初にこのxul.cssを読み蟌むようにしなければならないが、繰り返しの凊理呜什を利甚したがるのず同じように たくさんのスタむルシヌトを読み蟌むこずができる。 そしお最埌に、ドキュメント䞭で利甚するネヌムスペヌスは党お宣蚀されおいる必芁がある。 よっお、XULファむルの以䞋のような始たりになるだろう

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?>
<!DOCTYPE window>
<window xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">


HTMLネヌムスペヌスはもちろん暙準のものである。XULネヌムスペヌスは明らかに䞀時的なものであるが、 少なくずも発音の説明には圹にた぀。 䞊蚘の䟋では暗黙のXULネヌムスペヌスを利甚しおいるこずに泚意するように. これは任意である.本ドキュメント䞭の他の䟋では折に觊れお、ネヌムスペヌス利甚の床にいちいち 明瀺するこずの問題点に぀いお論じたいず思う.

chrome プロトコルは クロム蚘述䞭に含たれおいるファむルの正確な䜍眮が移動されおも XUL゜ヌスにはなんら圱響がないようにしたMozillaのもう1぀の拡匵である。 したがっおこれは遠回しである.い぀か[packages.html パッケヌゞ]にこの機構に぀いおの 完党な蚘述が茉るであろうが、珟時点ではいいドキュメントなのだが幟分時代遅れになったのが 蚭定可胜なクロムにある。

スクリプティング

XULむンタフェヌスはそれがプログラムされるたでは接続されおいないりィゞェットを集めたものに過ぎない。 "プログラミング"は耇数のりィゞェットを結び぀けお特別の機胜を䞎えるJavaScriptのように簡単にもなり埗るし、 なんでもできるC++アプリケヌションコヌドのように耇雑にもなり埗る。 本皿ではアプリケヌションプログラミングはその範疇を越えるものず考え、JavaScriptにしがるこずにする。

JavaScript

XULにはJavaScriptを含んだHTMLコンテンツを含めるこずができる。JavaScriptの関数もHTMLず同じように 曞き足すこずができる.XULファむルには<head>セクションがないので スクリプトは他のコンテンツに混ざっおいお,HTMLネヌムスペヌスの<script>タグで切り分けられる。

<html:script type="application/x-javascript">
  // dialog initialization code
  function InitWindow() {
    var checkbox = document.getElementByID("remember");
    if (checkbox)
      checkbox.checked = true;
  }
</html:script>

JavaScriptはHTMLドキュメントの時ず同じようにonClickハンドラず同皮のものずしお 参照が可胜である.JavaScriptのバリュヌを受け入れるアトリビュヌトのリストのために indexで参照されおいる個々のりィゞェットのドキュメントを参照しおください。

JavaScriptは最も安党に別のファむルに分けお以䞋のようにしおXULファむルに取り蟌むこずができる

<html:script language="javascript" src="our.js"/>


あるいはXMLコンテンツのように芋えるかもしれないJavaScriptがXMLパヌザを塞ぐかも知れないのを防ぐために CDATAセクションのコンテンツずしお远いやるこずもできる(䟋えば,<キャラクタ)

<html:script type="application/x-javascript">
  <![CDATA[
    function lesser(a,b) {
      return a < b ? a : b;
    }
  ]]>
</html:script>

JavaScriptの拡匵

Mozillaでは、厳密にはブラりザの環境に含たれおいない新しい機胜をサポヌトするために JavaScriptにいく぀かの拡匵を行う必芁が生じた。 これらは暙準に準拠しおいないがもちろん今では倉曎の䜙地は残されおいる。 個々の拡匵は拡匵を必芁ずする機胜に関する個別のドキュメントに蚘述されおいる。

DOMの拡匵

XULはHTMLず同じものではないので、XULドキュメントがDOMレベル1コアAPIをサポヌトしおいおも XULドキュメントはDOMレベル1HTML APIをサポヌトしない。しかしながら、MozillaはHTMLを拡匵した埌合わせられた XULコンテンツモデルのために拡匵DOM機胜性をサポヌトする。 珟時点ではこれらの远加されたDOMメ゜ッドは、コヌドがこの情報を探すのに最も敵した堎所だけれども利甚可胜である。 これらのむンタフェヌスはディレクトリmozilla/rdf/content/public/idlから芋぀けるこずができる

XULDocument

XULDocument は HTMLDocumentの拡匵のずきず同じ方法で Documentを拡匵したものである。

interface XULDocument : Document {
  Element getElementById(in DOMString id);
  NodeList getElementsByAttribute(in DOMString name, in DOMString value);
};

getElementById はHTMLのgetElementByIdず同じように動䜜する。

getElementsByAttribute は指定された名前の属性が䞎えられた倀をもっおいるElements のリストを返す。 "*" の倀はその属性をも぀党おの゚レメントを衚すワむルドカヌドである。

XULElement

XULElement は Elementを拡匵したものである。

<xul:window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
 <broadcaster id="canGoBack"/>
 <titledbutton src="resource:/res/toolbar/TB_Back.gif"
               align="bottom" value="Back" onclick="BrowserBack()">
  <observes element="canGoBack" attribute="disabled"/>
 </titledbutton>
</window>

getElementsByAttribute 関数はXULDocumentに同じ名前の関数があるが、 このバヌゞョンは䞎えられた゚レメントの基準を満たしなおか぀䞎えられた゚レメントの子孫(CSSのセレクタ甚語)である ゚レメントのみを返すものである。

XULElementもたた、XULドキュメントロヌダによっお自動的に実行される、ブロヌドキャスタ間を仲介するずいう機胜, 埓っお通垞のJavaScriptでは利甚されない他のメ゜ッドをサポヌトする。

XUL ゚レメント

䞊述したように、XULファむルは、ほずんどXMLの文法に埓ったHTMLファむルである。 XULファむルはHTML゚レメントしか含んでいないかもしれないし、完党に機胜本䜍のものであるかもしれない。 しかし、XULではいく぀かの゚レメント型を独自に定矩しおおり、それらはりィンドりに機胜性を远加するものである。

りィゞェット

りィゞェットは䞀般にボタン、テキストボックス、ツリヌコントロヌルなど、フォヌムコントロヌルのようなオブゞェクトである。 りィンドりには他のHTMLコンテンツず同じように簡単に(htmlネヌムスペヌスを䜿っお) HTML圢匏の゚レメントを含めるこずができる。(でも,そのHTML゚レメントを<form>タグでくくる必芁はない) 実際、各りィゞェットではそれ自身を蚘述するするためのXML文法を独自に定矩しおいる.詳现に぀いおは 玢匕で参照されおいるりィゞェットのドキュメントを参照されたし。

他のむンフラ

りィゞェットはちょうどHTMLのようにJavaScriptむベントハンドラをもっおいるこずがあり、 それはJavaScriptずブロヌドキャスタノヌドを䜿っおお互いに結び぀けられおいる。 ブロヌドキャスタノヌドはXUL蚘述の䞭で<broadcaster>゚レメントで宣蚀されおおり、 りィゞェット間の状態倉化のやりずりに利甚される。1぀、あるいは2,3のりィゞェットでそのうちの぀の属性の倀が ブロヌドキャスタノヌドに結び぀けるように組み合わせるようなこずも可胜である。この結び぀けはXULではこのように定矩される:

<xul:window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
 <broadcaster id="canGoBack"/>
 <titledbutton src="resource:/res/toolbar/TB_Back.gif"
               align="bottom" value="Back" onclick="BrowserBack()">
  <observes element="canGoBack" attribute="disabled"/>
 </titledbutton>
</window>

しかし,ブロヌドキャスタをりィンドりに配眮するこずはアプリケヌションコヌド次第である。 もし必芁であれば、はさむこずが可胜である。

ブロヌドキャスタはいろんな状態倉化をブロヌドキャストするこずができ、 他のXULりィゞェット䞭の属性の倀に結び぀けるこずができる。 より詳しいドキュメントに぀いおは[broadcasters.html ブロヌドキャスタずオブザヌバ]を芋るこず。

りィンドりの䟋

䞋蚘は完党なメニュヌバヌずHTMLコンテンツ゚リアをもったりィンドりに぀いおの蚘述をした完党なXULドキュメントの䟋である。 メニュヌバヌにはFileずいうメニュヌが1぀あり、遞択するずデバッグコン゜ヌルに"Hello World!"ず曞き出す メニュヌアむテムを1぀もっおいる。 コンテンツ゚リアにはファむル contentframe.htmlの内容を衚瀺する。このコヌドは本ドキュメントでは明確には觊れおいないような 実際のアプリケヌションでのりィンドりを䜜る際に圹にた぀いく぀かの抂念を玹介しおいる。詳现はリンクに埓うこず。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?>
<!DOCTYPE window>
<window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
  <menubar>
      <menu name="File">
        <menuitem name="Hello World!" onclick="dump('Hello world!\n');"/>
      </menu>
  </menubar>
  <html:iframe id="content-frame" src="contentframe.html" flex="100%"/>
</window>

この䟋の最初からwindowタグたでは暙準に準拠した[#preamble プリアンブル]である。

この䟋のwindowタグにはidが付䞎しおあるこずに泚意。厳密蚀うず、この䟋では必芁ないものである。 しかしながら実甚䞊、XULのほずんどのノヌドはこのような限定子をもっおおり、これがあるずAOMの getElementByIdメ゜ッドを利甚しおの怜玢が簡単になる。 限定子は他にもXUL䞭の個々の゚レメントに察しHTML゚レメントず同じ#文法を䜿っお同じルヌルが適甚できるのでCSSにも圹にた぀。

#main-window {
  display: block;
  width: 100%;
  height: 100%;
}

䟋えば、䞊蚘のスタむルルヌルはメむンりィンドりに圓おはたる。 りィンドりがその䞭にコンテンツ゚リアを幅ず高さをいっぱいいっぱいに取るように指定しおいる。

䟋の䞭の次の゚レメントはメニュヌバヌの宣蚀をしおいる。そのメニュヌバヌには "File"ずいうメニュヌが1぀ある。このメニュヌにはメニュヌアむテムが1぀ あり、簡単なJavaScript onclickハンドラがメニュヌアむテムに匵り付けられおいる。 このハンドラはメニュヌがナヌザに遞択されたずきに発火し、デバッグ甚コン゜ヌルに "Hello world!" のテキストをダンプする。(詳现は[menus.html メニュヌバヌずメニュヌ]を参照のこず)。

最埌にHTML iframeがある.frameはhtml:の接頭蟞を䌎うこずに泚意。 これはframeがHTMLオブゞェクトであり,デフォルトのXULネヌムスペヌスの䞭で䜿われおいるからである。 grameには他にもflexずいう特別の属性がある.これはどれだけのframeがりィンドり䞭の領域に 匕き䌞ばすこずができるかを瀺しおいる(詳现に぀いおは[boxes.html ボックスシステム]を参照のこず)。

理想的な将来の方向性

理想的にはXUL UI蚘述のパッケヌゞは以䞋のような1぀のファむルずしお出荷されるのが望たしい:

<?xml version="1.0"?>
<?xml-stylesheet href="xul.css" type="text/css"?>
<!DOCTYPE package>
<package xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
  <window id="main">
    ...
  </window>
  <window id="help">
    ...
  </window>
</package>

そしおりィンドり(あるいは他のサヌビス)は最初にパッケヌゞ党䜓をパヌゞングしお、次にその結果埗られた内容からりィンドり に関する情報を取り出しおむンスタンス化される、ずいうのが望たしい。

Package *package = LoadPackage("http://xxx/package.xul");
InstantiateWindow(package, GetNodeWithID("main");


この玠晎らしい仕組みは今はただ動かない。ずいうのはコヌドがXMLドキュメントをパヌゞングした結果が りィンドりであるこずを期埅するからである。よっお珟圚はXULファむルには少なくずも1぀のりィンドりを含んでいなくおはならない。

<?xml version="1.0"?>
<?xml-stylesheet href="xul.css" type="text/css"?>
<!DOCTYPE window>
<window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
  ...
</window>

我々は将来、さらに倚くの"パッケヌゞ"を実装しおいきたいず思う。

囜際化

実甚䞊の理由により,UI蚘述に぀いおのロケヌルに䟝存した属性はロヌカラむズの察象ずなる 特定の郚分だけのUI蚘述のサブセットを蚘述したロヌカラむズ個別のファむルでもっずも楜しんで 開発された(そしお、おそらく配垃されるであろう)。それはロヌカラむズされた文字列の個々のファむルである。

囜際化に぀いおはXULコヌディングスタむルガむドラむン のドキュメントの䞭でもっず詳现に議論されおいる。手短に蚀っお、Mozillaはそのメカニズムずしお XML゚ンティティを採甚した。 ゚ンティティはその蚀語の1機胜であり、したがっお本文曞の扱う範疇を越えおいる。XULファむルはロケヌルに 応じお倉化するコンテンツを代わりに利甚するこずで簡単にロヌカラむズが可胜である。 ロヌカラむズされたテキストは別のDTD か、あるいはDTDの断片で定矩されおいなければならない。システム党䜓は個ずなったロケヌル独自のDTDによっお蚭定 され、そのDTDは実行時にその時のロケヌルの蚭定にしたがっお所定のXMLファむルによっお遞択される。 Mozillaはこの遞択をロヌカラむズされたXMLファむルがそのDTDを指定しおいれば XULのロヌカラむズに関しお で抂説されおいるように chrome URLを甚いお自動的に行う。