2. XUL ファイルの書き方

2006.09.04　株式会社四次元データ　溝口佑爾

この章では、ボックスやボタンの要素も入ったウィンドウを表示するアプリケーションを作ることを通じて XUL ファイルの書き方をもう少し細かく見ていきます。

2.1. この章のサンプル

次のような XUL ファイル 'sample2.xul' を /chrome/sample2/content/sample2/ に作成してください。念のため 'sample2.xul' 実行のためのRDFファイル 'contents.rdf' も載せておきます。

sample2.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="Howareyou"
    title="How are you"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <vbox>
        <label value="How are you?"/>
        <hbox>
          <button id="good" label="Good"/>
          <button id="bad" label="Bad"/>
          <button id="crazy" label="Crazy"/>
        </hbox>
      </vbox>
</window>

contents.rdf

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> 
  <RDF:Seq about="urn:mozilla:package:root">
  <RDF:li resource="urn:mozilla:package:sample2"/>
  </RDF:Seq>
  <RDF:Description about="urn:mozilla:package:sample2"
          chrome:displayName="Application Title"
          chrome:author="Author Name"
          chrome:name="sample2"
          chrome:extension="true"/>
  </RDF:Description>
</RDF:RDF>

前回と同じように 'installed-chrome.txt' ファイルに content,install,url,resource:/chrome/sample2/content/sample2/ という記述を追加→ 'chrome.rdf' の消去→ mozilla の再起動 でパッケージをインストールし、コマンドプロンプトで mozilla -chrome chrome://sample2/content/sample2.xul を実行します。

では sample2.xul を分析してみましょう。

2.2. XULファイル作成にかかわる記述

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="Howareyou"
    title="How are you"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <vbox>
        <label value="How are you?"/>
        <hbox>
          <button id="good" label="Good"/>
          <button id="bad" label="Bad"/>
          <button id="crazy" label="Crazy"/>
        </hbox>
      </vbox>
</window>

この２文は必ず XUL ファイルの最初に置きます。一行目は XML ファイルであることの宣言、２行目はスタイルシートの指定をしています。

2.3. ウィンドウの作成

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="Howareyou"
    title="How are you"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <vbox>
        <label value="How are you?"/>
        <hbox>
          <button id="good" label="Good"/>
           <button id="bad" label="Bad"/>
          <button id="crazy" label="Crazy"/>
         </hbox>
      </vbox>
</window>

基本的に XUL ファイルの記述は HTML の記述と似ています。ファイル全体は要素と呼ばれる単位から構成されます。

要素として記述されるものには例えば、ウィンドウやボタン、リンクや画像などがあります。要素は通常開始タグ("<要素名>")と終了タグ("</要素名>")に挟まれた形で記述されています。要素は内容として子要素と属性を持ちます。子要素は開始タグと終了タグの間に、属性は開始タグの中に記述されます。つまり要素は、

 <要素名  属性1,属性2, …>
  子要素1
  子要素2
    …
 </要素名> 

という形を取ります。

属性とは要素に対する情報です。人であれば名前や性別といった属性を情報として持つのと同じように、ウィンドウ要素やボタン要素にも名前（識別子と呼ばれます）や表示される文字などといった情報を、属性として指定することで、持たせます。例えば、上のウィンドウ要素（赤い部分）にある "id="Howareyou"" という部分は id 属性が "Howareyou" であること、つまりこのウィンドウが "Howareyou" という識別子を持つことを示します。この属性はスタイルシートでこのウィンドウの背景を変えるときに "Howareyou" という識別子（名前）に対して背景色を指定する、といったように利用することができます。属性には他にも、ボタン要素が持つ label 属性（そこに表示される文字を表す）など、それぞれの要素に応じて様々なものがあります。

そのような要素とその属性から成るXULファイルでは、まずウィンドウ要素やボックス要素などで入れ子構造を作り、その中にボタン要素やラベル要素などを配置することが基本になります。

ウィンドウ要素のシンタックスは次のようになります。

<window
          属性
          ･･･
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
          ウィンドウに入れる要素
          ･･･
</window>

id属性は識別子を表します。今回の場合の識別子は "Howareyou" です。title 属性はウィンドウに表示されるタイトルを表します。今回の場合ウィンドウに "How are you?" と表示されます。また xmlns 属性はウィンドウ要素における名前空間を宣言します。

2.4. ボックスの作成

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="Howareyou"
    title="How are you"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <vbox>
        <label value="How are you?"/>
        <hbox>
           <button id="good" label="Good"/>
          <button id="bad" label="Bad"/>
          <button id="crazy" label="Crazy"/>
        </hbox>
      </vbox>
</window>

ボックスのシンタックスは次のようになっています。

<hbox>
          ボックスに入れる要素
          ･･･
</hbox>

<vbox>
          ボックスに入れる要素
          ･･･
</vbox>

hbox 要素は水平方向のボックス ( horizontal box ) を作ります。水平方向のボックスの中には要素を横に並べることができます。 vbox 要素は垂直方向のボックス ( vertical box ) を作ります。垂直方向ボックスの中には要素を縦に並べることができます。

例えば今回の場合 <vbox> の中に <label> と <hbox> が縦に並び、さらにその <hbox> の中に <button> が横に３つ並んでいます。

2.5. ボタンとラベル

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="Howareyou"
    title="How are you"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <vbox>
        <label value="How are you?"/>
        <hbox>
          <button id="good" label="Good"/>
          <button id="bad" label="Bad"/>
          <button id="crazy" label="Crazy"/>
        </hbox>
      </vbox>
</window>

ボタン要素のシンタックスは次のようになります。一つのタグの中に内容を書き込みます。

<button  属性の記述 />

例えば 'sample2.xul' の中の

<button id="crazy" label="Crazy"/>

という部分がボタンです。このボタンの識別子は "crazy" です。label 属性は実際のボタンに表示する内容ですから、ボタンは "Crazy" という文字が表示されます。

ラベルのシンタックスはボタンと同じです。value 属性に表示したいテキストを指定します。

<label  属性の記述　/>

ラベルでは一行しか書けませんが、長いテキストで何行かに分けたいときは次のように description (記述) という要素を使います。description のシンタックスは、ウィンドウやボックスと同じように開始タグと終了タグで内容をはさむ形です。

<description>
   テキスト
   テキスト
   ･･･
</description>