XUL チュートリアル - ラベルとイメージを追加する

このセクションでは、ウィンドウにラベルとイメージを追加する方法を説明します。更に、要素をグループに含める方法も見ます。

テキスト要素

XUL ファイルに、タグで囲まずに、直接テキストを埋め込むことはできません。そうやっても、それは表示されることはありません。ウィンドウにテキストを含める最も基本的な方法は、description 要素を使うことです。例を下に示します。

<description value="This is some text"/>

value 属性によって、表示させたい文字列が指定できます。テキストが折り返されることはありません。テキストは、一行だけで表示されます。これは、テキストが短い場合に適しています。

テキストが長い場合、内容を description の開始タグと終了タグの内側に置くことができます。テキストを value 属性を使って指定する場合と違って、子供のテキストは、必要に応じて、複数の行に折り返されます。HTML の場合と同様、改行と余分な空白 (whitespace) は一つのスペースに切り縮められます。後で、折り返しが見れるよう、要素の幅を制限する方法を見ることにします。

<description>
  Hello there
</description>

2 番目の要素 label も同じように使うことができますが、こちらはボタンやテキストボックスなどのコントロールのラベルで使われることを意図している点が違います。ユーザーがラベルをクリックすると、そのコントロールはフォーカスされます。フォーカスさせたい要素の id に control 属性の値を設定して下さい。

<label value="Click here:" control="open-button"/>
<button id="open-button" label="Open"/>

上の例では、ラベルをクリックすると、ボタンがフォーカスされます。

イメージ

HTML と同様に、XUL には、ウィンドウ内にイメージを表示するための要素があります。この要素は、image と、適切な名前をしています。タグ名が HTML とは違っている点に注意して下さい (img ではなく image)。イメージファイルの URL を指定するのに、src 属性が使えます。下の例は、これを示しています。

<image src="images/banner.jpg"/>

このシンタックスを使うことができますが、イメージ URL を設定するには、スタイルシートを使う方が望ましいでしょう。前のセクションで、ボタンに list-style-image CSS プロパティーを使う方法を見ました。ここでも、それが使えます。以下がその例です。

XUL:
 <image id="image1"/>
 <image id="search"/>

スタイルシート:
 #image1 {
   list-style-image="chrome://findfile/skin/banner.jpg";
 }
 #search {
   list-style-image="chrome://findfile/skin/search.gif";
 }

イメージは、クロムディレクトリー、ここでは、findfile パッケージのスキンからもってきています。これが、通常、イメージを参照する方法です。イメージは、普通、スキンディレクトリーに置きます。

(進む) 次のセクションでは、ウィンドウに入力コントロールを追加する方法を学びます。

例: 2.3.1 2.3.2 2.3.3