XUL チュートリアル - HTML 要素を追加する

ボタンを幾つか追加したので、他の要素を追加しましょう。

ウィンドウに HTML 要素を追加する

利用できる XUL 要素すべての他に、XUL ファイル内に、直接、HTML 要素を追加することもできます。実際のところ、XUL ファイルでは、どんな HTML 要素でも使うことができます。これは、ウィンドウ内に Java アプレットやテーブルを置くことができるということです。けれども、XML は、大文字と小文字を区別することを思い出して下さい。そのため、タグと属性は、小文字で入力しなければなりません。

できる限り、XUL ファイル内で HTML 要素を使うことは避けるべきです。しかし、このセクションでは、それはともかくとして、HTML 要素の使い方を説明することにします。

XUL ファイル内で HTML 要素を使うためには、それを宣言しなければなりません。これによって、Mozilla は、HTML タグを XUL タグから区別します。以下の属性を、XUL ファイルの window タグに追加する必要があります。実際には、別のやり方もありますが、これが一番簡単です。

これは、HTML の宣言です。XUL を宣言するのに使ったのと非常によく似ています。(幾つかのバリエーションが使えますが)、これは、示した通り、正確に入力しなければなりません。そうしないと、正しく動作しないはずです使用した URL は、HTML (この場合、バージョン 4.0) を記述する文書を指します。Mozilla は、実際には、この URL をダウンロードすることはない点に注意して下さい。しかし、Mozilla は、それが HTML であると認識します。

これを「ファイルを開く」ウィンドウに追加しましょう。下の赤のコードが変更を示しています。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="findfile-window"
    title="Find Files"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" label="Find" default="true"/>
  <button id="cancel-button" label="Cancel"/>

</window>

これによって、いつものように、HTML タグが使えます。次のことを覚えておいて下さい。

どんな HTML タグでも使うことができますが、head と body は、実際には、役立たないでしょう。HTML 要素を使う例を下に示します。

この例は、ファイル banner.jpg からイメージ、チェックボックス、1 セルからなるテーブルを作ります。利用できる場合にはいつでも、XUL 機能を使うべきです。そして、多分、XUL を使ったレイアウトでは、テーブルを使うべきではありません。(レイアウトを行なうための XUL 要素があります。) 接頭辞 html: がタグの先頭に加えられていることに注意して下さい。これは、Mozilla が、これは HTML タグであって XUL タグではないと知るためにあります。html: という部分を付けない場合、ブラウザーは、要素は XUL 要素であると考え、エラーを生成します。というのも、img、input、table などは妥当な XUL タグではないからです。

HTML タグの内部に XUL 要素を置くこともできます。それらは、テーブルが複雑な HTML レイアウトのために使われるのと非常に類似した形で、要素をレイアウトするのに使うことができます。しかし、これはすべきではありません。XUL には、後のセクションで見るように、レイアウトのため、それ自身の要素があるからです。

XUL では、description か label 要素を使ってラベルを追加することができます。できる限り、これらの要素を使うべきです。しかし、これは、テキストを複数の行に折り返しません。下の例のように、HTML の label 要素を使うか、別の HTML ブロック要素 (p や div など) 内にテキストを置くことによって、コントロールにラベルを追加することもできます。

このコードによって、テキスト 'Search for:' が表示され、その後に入力要素と OK ボタンが続きます。XUL ボタンは、ここでそうであるように、HTML 要素の内部に現われることができるという点に注意して下さい。これは、XUL 要素すべてに当てはまります。必要な場合には、これらを自由に相互に組み合わせることができます。しかし、制約が一つあります。プレーンテキストは、通常、(p タグなどの) テキストを表示できる HTML 要素内に置かれた場合にのみ表示されるということです。テキストがある XUL 要素 (例えば、description ) がこれを許さなければ、その外にあるテキストは、表示されないでしょう。以下の例が役に立つかもしれません。

HTML 要素の例

ここからは、HTML 要素をウィンドウに追加する例です。個々のケースでは、分かりやすくするため、window とその他の共通情報は、省略してあります。

このケースでは、p タグの一つは、テキストをその内部に置くのに使われ、もう一つは、テキストを多数の行に分けるのに使われています。

イメージから分かるように、div タグ内のテキストは表示されていますが、その他のテキスト (Expense Report 1 と What I Did Last Summer) は表示されていません。これは、テキストを取り囲んでそれを表示することのできる HTML か XUL 要素がないためです。このテキストを表示させるには、それを div タグの内部に置くか、テキストを description タグで囲む必要があります。

上の 3 つのケースはどれも、別々の理由から、何も表示しません。ウィンドウ自身は、エラーが発生しても、何も表示しないことに注意して下さい。
ケース 1: po は、妥当な HTML タグではない。そのため、Mozilla は、それについて何をすればいいのか分からない。
ケース 2: div は妥当であるが、HTML でそうであるにすぎない。これを動作させるには、html: 識別子を加える必要がある。
ケース 3: description 要素は、XUL だけで妥当であって、HTML ではそうではない。これは、html: 識別子をもつべきではない。

要素を「ファイルを開く」ダイアログに追加する

「ファイル検索」ダイアログにテキストを追加しましょう。以下では、以前に加えたラベルの前に、説明テキストを加えることにします。このテキストは、ダイアログの先頭に表示されます。要素を別の行に分けるため、div タグも加えることにします。

<html:div>
  <html:div>
    Enter your search criteria below and select the Find button to begin   
    the search.
  </html:div>

  <label value="Search for:" control="find-text"/>
  <textbox id="find-text"/>

</html:div>

  <button id="find-button" label="Find" default="true"/>
  <button id="cancel-button" label="Cancel"/>

イメージで、どのようにして、説明テキストとテキストボックスラベルが 2 行に分けられているかという点に注意して下さい。

要素の位置とサイズを指定するのに、あまり関心を寄せなかったことに気が付いたかもしれません。通常、これは自動的に処理されます。上のイメージにある「ファイル検索」ダイアログを見て下さい。4 つの要素は左から右にレイアウトされていることに気付くでしょう。最初にラベル、次にテキストボックス、そして 2 つのボタンです。ウィンドウも、内部にある要素にふさわしいサイズになっています。新しい要素を追加するたびに、ウィンドウは、その要素にふさわしい大きさになります。要素サイズを指定するウィンドウをレイアウトする方法については、後のセクションで詳細に説明します。

すぐに、この変更を削除して、XUL 要素だけを使うことにします。

(進む) 次は、要素間に間隔を置く方法を学ぶことにしましょう。