Skip to main content

Visit Mozilla.org

XUL Tutorial:Adding HTML Elements

出典: MDC


« 前 次 »


ボタンの追加もできたので、それ以外の要素もいくつか追加してみましょう。

目次

[編集] ウィンドウに HTML 要素を追加する

XUL ファイルに、有効な XUL 要素が全て置けるのは当然ですが、 XUL ファイルには、加えて HTML 要素を直接追加する事も可能です。 実際、XUL ファイルでは、任意の HTML 要素が使用できます。 このことは Java アプレットや表といったものですら、ウィンドウ内に配置可能であることを意味しています。 しかしながら、XUL ファイルで HTML 要素を使用するのは可能な限り避けるべきです。 (その理由はいくつかありますが、主な理由は、後のセクションで説明する、レイアウトの制御に関係しています)。 といっても、このセクションでは、とりあえず HTML 要素の使用方法について説明していくことにします。 XML は大文字・小文字を区別するため、HTML 要素でもタグと属性は小文字で入力しなければならないことを覚えておいてください。

[編集] XHTML 名前空間

XUL ファイルで HTML 要素を使用するには、XHTML 名前空間を使用するために宣言を行なわなければなりません。 宣言により、Mozilla は、HTML タグを XUL タグから区別することができます。 このためには、次に示す属性を、XUL ファイルの window タグか、最初に出てくる HTML 要素に追加する必要があります。 

xmlns:html="http://www.w3.org/1999/xhtml"

これは HTML の宣言で、以前のセクションで説明した XUL の宣言と似ています。 この宣言は正確に上記の通り入力しなければなりません。誤っていると正常に動作しないので注意してください。 Mozilla はこの URL を実際にはダウンロードしませんが、HTML の宣言を指しているものとして認識しています。

ファイル検索ウィンドウに追加する場合の例を示します。 

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

これで、いつものように HTML タグを使用する事ができますが、以下のことは覚えておいて下さい。

  • 上記のように HTML 名前空間を宣言した場合は、各々のタグの始めに html: という接頭辞を付けなければなりません。
  • タグは小文字でなければなりません。
  • 全ての属性値は引用符で囲まれなければなりません。
  • XML では、内容を持たないタグの終わりには、スラッシュを置く必要があります。 これは後で示す例で明確になるはずです。

[編集] HTML 要素を利用する

どんな HTML タグでも使用可能とはいっても、head や body は実際には役に立ちません。 HTML 要素を使用する具体的な例を以下に示します。 

<html:img src="banner.jpg"/>

<html:input type="checkbox" value="true"/>

<html:table>
  <html:tr>
    <html:td>
      A simple table
    </html:td>
  </html:tr>
</html:table>

この例では、banner.jpg ファイルから画像が作成され、チェックボックスと、セルが 1 つの表が作成されます。 可能な限り、常に XUL の機能の方を使用するべきことから、XUL でレイアウトのために表を使用することはおそらくないはずです。 (レイアウトを行なうための XUL 要素があります)。 各々のタグの前に html: という接頭辞が付いていることに注意してください。 これによって Mozilla は、それが HTML タグであって XUL タグではないと認識します。 html: 部分を取り除いた場合、ブラウザはこれらの要素が XUL 要素だと判断するため、表示されなくなります。 なぜなら、img、 input、 table などは有効な XUL タグではないからです。

XULでは、description または label 要素でラベルを追加することができます。 可能であれば、これらの XUL 要素を使用するべきです。 しかしながら、コントロールにラベルを追加するために、HTML の label 要素を使用したり、単純に (p や div のような) HTML のブロック要素の中にテキストを記述することも可能です。 以下に例を示します。

例 1 : ソース 表示 

<html:p>
  Search for:
  <html:input id="find-text"/>
  <button id="okbutton" label="OK"/>
</html:p>

このコードは、「Search for:」というテキストを表示し、その下に input 要素と OK ボタンが表示されます。 この例のように、XUL のボタンを HTML 要素の中に置くこともできる、という事に注意してください。 プレインテキストは、 (p タグのように) 通常はテキストの表示が許可されている HTML 要素の中に置かれたものだけが表示されます。 それ以外のものは、テキスト表示を許可する XUL 要素 (例えば description 要素) の中に置かれたもの以外は表示されません。 次の例を参照してください。

[編集] HTML 要素の例

ウィンドウに HTML 要素を追加する例を以下に示します。 どの例も、単純化するために window や他の共通する情報は除いてあります。

[編集] チェックボックス付きのダイアログの例

例 2 : ソース 表示 

<html:p>
  Click the box below to remember this decision. 
  <html:p>
    <html:input id="rtd" type="checkbox"/>
    <html:label for="rtd">Remember This Decision</html:label>
  </html:p>
</html:p>
画像:htmlelem-ex1.png

この例では、外側の p タグが、テキストを中に表示するために使われ、内側のものはテキストを複数行に分割するために使われています。

[編集] HTML ブロックの外部にあるテキストの例

例 3 : ソース 表示 

<html:div>
    Would you like to save the following documents?
    <html:hr/>
</html:div>   
Expense Report 1
What I Did Last Summer
<button id="yes" label="Yes"/>
<button id="no" label="No"/>
画像:htmlelem-ex2.png

画像からわかるように、div タグの中にあるテキストは表示されていますが、他のテキスト (Expense Report 1 と What I Did Last Summer) は表示されていません。 これは、テキストを表示できる HTML あるいは XUL 要素がテキストを囲んでいないからです。 このテキストを表示するには、div タグの中に置くか、テキストを description タグで囲む必要があります。

[編集] 無効な HTML 要素の例 

<html:po>Case 1</html:po>
<div>Case 2</div>
<html:description value="Case 3"/>

この 3 つの例はどれも表示されませんが、表示されない理由はそれぞれ違っています。

Case 1 
po は有効な HTML タグではなく、Mozilla はそれをどう表示したらよいかわかりません。
Case 2 
div は HTML でのみ有効です。動作させるためには、html: 修飾子を加える必要があります。
Case 3 
description 要素は XUL では有効ですが、HTML では無効です。html: 修飾子を付けてはいけません。

次のセクションでは、要素間に間隔を置く方法を学びます。

« 前 次 »

"http://developer.mozilla.org/ja/docs/XUL_Tutorial:Adding_HTML_Elements" より作成