コントロール (Control)

主要なコントロールについては、XUL controls - Mozillaでその外観と機能を確認できます。

XULの要素はHTMLのそれに近いものがあります。しかしXULとHTMLは異なるため、混同しないように注意が必要です。

シンプルな要素 (Simple Elements)

description

description要素は、テキストを表示するために使用します。

<description value="TEST" />

<description>TEST</description>

参考

label

label要素は、他のコントロール要素に説明を付ける目的で使用します。ただテキストを表示するだけならば、description要素を用います。

関連付けるコントロールのid属性と同じ値を、control属性に指定します。

<label value="TEST" control="foo" />
<textbox id="foo" />

そうしてlabelをクリックすると、関連付けられたコントロール、この例ではtextboxにフォーカスが合います。

テキストが途中で改行されても良い場合には、value属性ではなくタグの間に記述します。

<label>TEST</label>

リンクの設定

href属性でURLを指定することで、label要素からそのページを開けるようになります。このとき同時に「class="text-link"」の指定もする必要があり、さもなくばリンクは有効とならず、フォーカスを合わせることもできません。

<label href="http://example.com"                   value="AA" />
<label href="http://example.com" class="text-link" value="BB" />

リンクをクリックすると、href属性で設定されているページが新しいタブで開きます。

参考

button

<button label="A" />
<button label="B" accesskey="b" oncommand="alert('BB')" />

既定では、このように縦に並びます。これを横に並べるにはhbox要素で囲みます。

accesskey属性

accesskey属性で要素にショートカットキーを割り当てられます。割り当てるキーは任意ですが、通常はlabel属性に含まれる文字にします。そのときlebel属性を実体参照で指定しているならば、それに合わせてaccesskey属性の値も実体参照とすべきです。

ユーザーインターフェイスへの表示

accesskey属性の指定がユーザーインターフェイスにどのように反映されるかは、プラットフォームやロケールに依存します。accesskey - XUL | MDN

たとえば次のようにaccesskey属性を設定すると、

<button label="Character" accesskey="C" />
<button label="Character" accesskey="c" />
<button label="キャラクタ" accesskey="c" />
<button label="キャラクタ" accesskey="キ" /> <!-- これは検証のため -->

ロケールの設定に応じて、以下のように表示されます。

英語環境

日本語環境

英語環境ではlabelにaccesskeyの文字が含まれている場合には、その文字が下線付きで表示され、さもなくばlabelの後にかっこで囲まれて表示されます。日本語環境では、つねにかっこで表示されます。

キーの入力では大文字/小文字の区別はされませんが、英語環境ではlabelにその文字が大文字/小文字ともに含まれている場合には、区別されて表示されます。

上記の例ではaccesskey属性にカタカナを割り当てていますが、これは検証のためであり、実際は英数字に限定すべきです。ショートカットキーのコードをウィンドウに送信することで任意の文字をキーとして使用することは可能ですが、それは実用的ではないため、実際にはキーボードから入力できる文字のみとします。

参考

textbox

<textbox value="foo" />
<textbox value="bar" multiline="true" />

参考

listbox

リストはlistboxでボックスを構成し、その項目はlistitemで定義します。

<listbox rows="3">
  <listitem label="A" />
  <listitem label="B" />
  <listitem label="C" />
  <listitem label="D" />
</listbox>

複数列 (Multi-Column)

listcolsとlistcolで列を定義し、項目 (listitem) は列ごとにlistcellで定義します。

<listbox rows="3">
  <listcols>
    <listcol flex="1" />
    <listcol flex="1" />
  </listcols>
  <listitem>
    <listcell label="AAA" />
    <listcell label="1" />
  </listitem>
  <listitem>
    <listcell label="B" />
    <listcell label="222" />
  </listitem>
</listbox>

ヘッダー行 (Header Rows)

listheadとlistheaderで定義します。

<listbox rows="3">
  <listhead>
    <listheader label="AAA" />
    <listheader label="BBB" />
  </listhead>
  <listcols>
    <listcol flex="1" />
    <listcol flex="1" />
  </listcols>
  <listitem>
    <listcell label="1" />
    <listcell label="2" />
  </listitem>
  <listitem>
    <listcell label="3" />
    <listcell label="4" />
  </listitem>
</listbox>

listboxでは、ユーザーのドラッグによりヘッダの幅を変更することはできません。そのような用途ならば、ツリーを使用します。

flex属性

各列の幅はflex属性で指定します。1つの列にだけ指定した場合は、その列が空いたスペースを埋めるように拡大されます。複数の列に指定した場合は、それぞれの数値の比で幅が決定されます。flex - Mozilla | MDN

コード	表示
<listcol /> <listcol />
<listcol /> <listcol flex="1" />
<listcol flex="1" /> <listcol flex="1" />
<listcol flex="2" /> <listcol flex="1" />

参考

List Controls - XUL Tutorial | MDN (英語)
リストコントロール - XUL チュートリアル | MDN (日本語)

listbox - XUL | MDN

参考

シンプルな要素 - XUL チュートリアル - XUL | MDN

ボックスモデル (Box Model)

<hbox>
  <!-- ここに置かれた要素は水平に並べて配置される -->
</hbox>

<vbox>
  <!-- ここに置かれた要素は垂直に並べて配置される -->
</vbox>

hbox

<hbox>
  <button label="A" />
  <button label="B" />
  <button label="C" />
</hbox>

box要素は、既定ではhbox要素と同等です。ただしorient属性をverticalとすると、vboxと同等となります。

vbox

<vbox>
  <button label="A" />
  <button label="B" />
  <button label="C" />
</vbox>

vbox - XUL | MDN

groupbox (グループボックス)

<groupbox>
  <caption label="A" />
  <description value="100" />
  <description value="200" />
</groupbox>

caption要素には、任意の要素を内包させることができます。そのような用途ではcaptionを開始タグと終了タグで記述し、その内容として目的の要素を間に記述します。

たとえばcheckboxを配置するならば、それは次のようにします。

<caption>
  <checkbox label="A" id="foo" />
</caption>

さらにこのチェックボックスのチェックが外されたとき、captionやチェックボックス内の要素を無効に見せかけるには、次のようにします。

var checkbox = document.getElementById( 'foo' );
checkbox.addEventListener( 'click', function()
    {
        var caption = this.parentNode;

        // captionは無効化できないため、半透明にして無効化されているように見せかける
        caption.nextSibling.style.opacity = this.checked ? 1 : 0.5;

        // disabled属性がサポートされるならば、その状態に応じて切り替える
        caption.nextSibling.nextSibling.disabled = ! this.checked;
    }, false );

radiogroup (ラジオグループ)

radiogroupは、radioをグループ化するの用います。このコントロールはradioをまとめる機能を与えるのみで、境界線が描画されるような外観上の作用はありません。

radiogroupの子要素としなければ、radio要素をユーザーに選択させることはできません。

<radiogroup>
  <radio label="A" />
  <radio label="B" />
  <radio label="C" />
</radiogroup>

ラジオグループ - グループボックス - XUL チュートリアル | MDN

参考

グループボックス - XUL チュートリアル | MDN

参考

レイアウト要素 (Layout Elements)

	要素	説明
スタックとデッキ	stack、deck	要素を重なった1組のカードのように扱う
スタックの配置	stack	サイズに応じて要素が伸縮
タブボックス	tabbox、tabsなど	ウィンドウ上部にタブを表示
グリッド	grid	要素を格子状に配置 (表組み)
コンテンツパネル	iframe、wizard	HTMLや他のXULファイルの表示
スプリッター	splitter	ボックスの分割

その他のレイアウト要素 - XUL チュートリアル - XUL | MDN

tab

タブを実現するには、

tabbox
tabs
tab
tabpanels
tabpanel

の5つの要素を使用します。

<tabbox>
  <tabs>
    <tab label="AAA" />
    <tab label="BBB" />
  </tabs>
  <tabpanels>
    <tabpanel>aaa</tabpanel>
    <tabpanel>bbb</tabpanel>
  </tabpanels>
</tabbox>

参考

Tabboxes - XUL チュートリアル | MDN

Grids

要素を格子状に配置し、表組みを実現できます。

<grid>
  <columns>
    <column flex="2"/>
    <column flex="1"/>
  </columns>
  <rows>
    <row>
      <description value="AAA" />
      <description value="B" />
    </row>
    <row>
      <description value="CC" />
      <description value="DDDD" />
    </row>
  </rows>
</grid>

参考

Grids - XUL チュートリアル | MDN

splitter

コントロールの間に配置することで、それぞれのサイズを変更できるようになります。

参考

Splitters - XUL Tutorial | MDN (英語)
スプリッター - XUL チュートリアル | MDN (日本語)

splitter - Mozilla | MDN

ツリー (tree)

≫ツリー (tree)

参考

XUL controls - XUL | MDN (英語)
XUL controls - XUL | MDN (日本語)
各コントロールが、画像付きで紹介されています。

XUL Tutorial - Mozilla | MDN (英語)
XUL チュートリアル - XUL | MDN (日本語)

リファレンス

XUL Reference - XUL | MDN (XUL要素)
Attribute (XUL) - XUL | MDN (属性)

Firefoxアドオンの情報サイトから、まとめて検索