リストコントロール

XUL には、リストボックスを作成するための要素が何種類かあります。

リストボックス

リストボックスは、複数の項目をリストとして表示するために使用されます。利用者はリストから項目を 1 つ選択できます。

XUL には、リストを作成する要素が 2 種類用意されています。 listbox 要素は、複数行のリストボックスを作成するために、また menulist 要素は、ドロップダウン・リストボックスを作成するのに使用されます。これらは、両方の機能を持つ、HTML の select 要素と同様に動作しますが、 XUL 要素には、さらに機能が追加されています。

最も単純なリストボックスは、listbox 要素を使用してボックスを作成し、リストのそれぞれの項目は listitem 要素を使用して作成します。例えば、下に示すリストボックスには 4 つの行があり、各行は 1 つの項目を持っています。

var el = env.locale; 例 1 : ソース表示

<listbox>
  <listitem label="Butter Pecan" />
  <listitem label="Chocolate Chip" />
  <listitem label="Raspberry Ripple" />
  <listitem label="Squash Swirl" />
</listbox>

HTML の option 要素と同様に、value 属性を使用してそれぞれの項目に値を設定することができます。設定した値はスクリプトで使用できます。リストボックスは、デフォルトでは適切な大きさになりますが、rows 属性を使用して、大きさを制御することも可能です。この属性には、リストボックスに表示させたい行数を設定します。利用者が表示しきれない行を表示できるように、スクロールバーが表示されるはずです。

次の例は、これらの追加機能を示します。

var el = env.locale; 例 2 : ソース表示

<listbox rows="3">
  <listitem label="Butter Pecan" value="bpecan" />
  <listitem label="Chocolate Chip" value="chocchip" />
  <listitem label="Raspberry Ripple" value="raspripple" />
  <listitem label="Squash Swirl" value="squash" />
</listbox>

この例では、一度に 3 行しか表示されないように変更が加えられました。また、リストのそれぞれの項目に対して値を設定しています。リストボックスには多くの追加機能がありますが、それについては後述します。

複数列を持つリストボックス

リストボックスは複数列表示もサポートします。各セルの内容は通常テキストのみが使用されますが、任意のものを含めてもかまいません。利用者がリスト内の項目を選択すると行全体が選択されます。セル 1 つだけを選択することはできません。

リストボックスの列の指定には 2 種類のタグが用いられます。 listcols 要素は、列についての情報を保持するために使用され、個々の列単位に指定する listcol 要素を囲います。なお、一つの列に対して、一つの listcol 要素が必要になります。

行内の個々のセルには、listcell 要素を用います。もし、3 列作りたい場合は、各 listitem 内に、3 つずつ listcell 要素が必要になります。セルにテキストの内容を指定するには、label 属性を listcell 要素に設定します。 1 列しか無い単純な場合は、前に示したリストボックスの例のように、listcell 要素を全く用いないで、 label 属性を直接 listitem 要素に設定してもかまいません。

次の例は 3 行 2 列のリストボックスです。

var el = env.locale; 例 3 : ソース表示

<listbox>
  <listcols>
    <listcol/>
    <listcol/>
  </listcols>
  <listitem>
    <listcell label="George" />
    <listcell label="House Painter" />
  </listitem>
  <listitem>
    <listcell label="Mary Ellen" />
    <listcell label="Candle Maker" />
  </listitem>
  <listitem>
    <listcell label="Roger" />
    <listcell label="Swashbuckler" />
  </listitem>
</listbox>

見出し行

リストボックスには、見出しとして特別な行を与えることができます。これは通常の行と類似していますが、表示のされ方が異なります。これを、列の見出しとして使うことが可能です。このために 2 種類の新しい要素を使用します。

普通の行を表すのに listitem 要素を利用するのと同じ要領で、見出し行には listhead 要素を用いることが出来ます。ただし、見出し行は普通の行とは異なるため、スクリプトから 1 行目を取得する際には無視されます。

見出し行の各セルには listheader 要素が利用されます。セルに対するラベルは label 属性で設定します。

前の例に見出し行を付加したものを示します。

var el = env.locale; 例 4 : ソース表示

<listbox>
  <listhead>
    <listheader label="Name" />
    <listheader label="Occupation" />
  </listhead>

  <listcols>
    <listcol/>
    <listcol flex="1" />
  </listcols>
  <listitem>
    <listcell label="George" />
    <listcell label="House Painter" />
  </listitem>
  <listitem>
    <listcell label="Mary Ellen" />
    <listcell label="Candle Maker" />
  </listitem>
  <listitem>
    <listcell label="Roger" />
    <listcell label="Swashbuckler" />
  </listitem>
</listbox>

この例では、列を伸縮可能 (flexible) にするため flex 属性が利用されています。この属性については、後のセクションで述べますが、ここでは水平方向の余った空間を、この列が占めるようにするために指定しています。ウィンドウをリサイズすることで、ウィンドウの幅に追随して、列が伸縮するのを見ることが出来ます。幅を狭めるとラベルが自動的に短縮されて、一部が省略符号 (...) にされます。この省略符号化を無効にしたい場合は、セルや項目の crop 属性を none に設定します。

ドロップダウンリスト

HTML では、select 要素を使用してドロップダウンリストを作成できます。利用者はテキストボックスに単一の選択された内容を見ることができ、テキストボックスの横にある矢印か、それと類似のボタンをクリックすることで、別の選択肢を選ぶことができます。このとき選択肢はポップアップウィンドウに表示されます。 XUL にも、この目的で使用可能な menulist 要素があります。この要素は、テキストボックスとその横のボタンから構成されています。 menulist の名称は、それが選択肢を含んだメニューをポップアップする事から来ています。

ドロップダウンボックスを記述するには、3 つの要素が必要です。最初は、menulist 要素で、これはボタンが横にあるテキストボックスを作成します。 2 番目は menupopup で、ボタンがクリックされたときに表示されるポップアップウィンドウを作成します。3 番目は menuitem で、個々の選択肢を作成します。

構文を以下の例で示します。

var el = env.locale; 例 5 : ソース表示

<menulist label="Bus">
  <menupopup>
    <menuitem label="Car" />
    <menuitem label="Taxi" />
    <menuitem label="Bus" selected="true" />
    <menuitem label="Train" />
  </menupopup>
</menulist>

このメニューリストには、それぞれの menuitem 要素で規定された、4 つの選択肢があります。選択肢を表示するには、メニューリストの矢印ボタンをクリックします。どれか 1 つが選択されると、選択されたものがメニューリストに表示されます。 selected 属性は、デフォルトで選択される値を指定するのに使用されます。

編集可能なメニューリスト

デフォルトでは、リストからの選択しかできないため、選択肢以外の値を直接入力する事はできません。メニューリストの変種には、入力欄の編集が可能なものもあります。例えば、ブラウザの URL 欄は以前に入力した URL を選択するドロップダウンが表示されますが、それを自分で直接入力することもできます。

編集可能なメニューリストを作成するには、次の例のように editable 属性を追加します。

var el = env.locale; 例 6 : ソース表示

<menulist editable="true">
  <menupopup>
    <menuitem label="www.mozilla.org" />
    <menuitem label="www.xulplanet.com" />
    <menuitem label="www.dmoz.org" />
  </menupopup>
</menulist>

ここで作成された URL 欄は、既登録の選択肢 3 つがあるため、利用者はこれらから選択することが出来ますが、自分が設定したい値を欄に直接入力する事も可能です。なお利用者が入力した値は、新しい選択肢としては追加されません。この例では label 属性が使用されていないので、デフォルト値は空白です。

次のセクションでは、プログレスメーターの作成について学びます。

« 前のページ次のページ »