XUL には、HTML のフォームコントロールに似た要素があります。これらの中には、つい最近実装されたものもあることに注意して下さい。
HTML には、(フォームコントロールとともに) テキストエントリーコントロールに使うことのできる input 要素があります。XUL は、単純なテキストエントリーフィールドに使える類似した要素をもっています。それが、textbox 要素です。
属性が何もなくとも、textbox は、ユーザーがテキストを入力できるボックスを作ります。これは、HTML の input に似ています。実際、Mozilla は、この両方を同じウィジェットにマップします。テキストボックスは、HTML の入力コントロールと同じ属性を受け取ります。以下の属性が、その幾つかです。
以下の例は、テキストボックスを示しています。
例 2.4.1
<label control="some-text" value="Enter some text"/> <textbox id="some-text"/> <label control="some-password" value="Enter a password"/> <textbox id="some-password" type="password" maxlength="8"/> |
上の textbox の例は、テキスト一行分を入力するだけに使えるテキスト入力を作ります。HTML にも、もっと大きなテキストエントリーエリアを作る textarea がありますが、textbox は、この目的にも使うことができます。異なった 2 つの要素は、必要ありません。multiline 属性を true に設定すると、テキストエントリーフィールドは、多数の行を表示します。
例えば
<textbox multiline="true"
value="This is some text that could wrap onto multiple lines."/>
|
HTML の textarea と同様に、サイズを設定するのに、rows と cols 属性を使うことができます。これは、表示する文字の行と列の数を設定するのに使います。
「ファイル検索」ダイアログにサーチエントリーフィールドを加えましょう。textbox 要素を使います。
<label value="Search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="Find" default="true"/> |
前のセクションで作ったボタンの前に、これらの行を追加します。このウィンドウを開くと、下のイメージで示したようなものが見えるはずです。
ラベルとテキスト入力フィールドがウィンドウに表示されていることに注意して下さい。テキストボックスは、非常に機能的で、その中に入力したり、テキストを選択できます。for 属性が使われている点に注意して下さい。これによって、ラベルがクリックされると、テキストボックスが選択されます。
チェックボックスとラジオボタンを作るために、2 つの追加要素を使うことができます。それらは、ボタンの変種です。チェックボックスは、有効にするか無効にするかのオプションのために使われます。ラジオボタンは、似た目的のために使われますが、それらのセットのうち、一度に一つしか選択できません。
チェックボックスとラジオボタンに、ボタンと同じ属性のほとんどを使うことができます。下の例は、簡単なチェックボックスとラジオボタンを示しています。
例 2.4.2
<checkbox id="case-sensitive" checked="true" label="Case sensitive"/> <radio id="orange" checked="false" label="Orange"/> <radio id="violet" checked="true" label="Violet"/> <radio id="yellow" checked="false" label="Yellow"/> |
最初の行は簡単なチェックボックスを作ります。ユーザーがチェックボックスをクリックすると、チェックと未チェックが切り替わります。checked 属性は、デフォルト状態を指示するのに使われます。これは、true か false のいずれかに設定します。label は、チェックボックスの横に表示されるラベルを指定するのに使われます。ラジオボタンも、同様です。
ラジオボタンをグループ化するには、radiogroup が使えます。ラジオグループ内のラジオボタンの一つだけが、一度に、選択可能です。一つをクリックすると、同じグループ内の別のボタンすべてがオフになります。以下の例は、これを示しています。
例 2.4.3
<radiogroup> <radio id="orange" checked="false" label="Orange"/> <radio id="violet" checked="true" label="Violet"/> <radio id="yellow" checked="false" label="Yellow"/> </radiogroup> |
チェックボックスとラジオボタンは、特殊用途化されたボタンにすぎません。ボタンは、ラベルとイメージからなることを思い出して下さい。チェックボックスは、チェックマークイメージをもつラベルにすぎません。ボタンと同じ属性の多くが使えます。
ドロップダウンリストは、HTML では select 要素を使って作ることができます。ユーザーは、テキストボックス内の一つの選択を見ることができ、別の選択をするために、テキストボックスの隣りにある矢印かそれに類似したボタンをクリックする場合があります。すると、別の選択肢がポップアップウィンドウで表示されます。XUL には、この目的で使われる menulist 要素があります。これは、テキストボックスとその横のボタンからなります。その名前は、選択肢をもつメニューをポップアップすることから選ばれました。メニューについては、後のセクションでもっと詳しく学びます。
ドロップダウンボックスを記述するには、3 つの要素が必要です。最初の要素は、menulist 要素で、横にボタンのあるテキストボックスを作ります (編集できないメニューリストの場合、テキストボックスはボタンになります)。2 番目の menupopup は、ボタンがクリックされたときに現われるポップアップウィンドウを作ります。3 番目の menuitem は、個々の選択肢を作ります。
そのシンタックスは、下の例で、説明しています。
例 2.4.4
<menulist>
<menupopup>
<menuitem label="Car"/>
<menuitem label="Taxi"/>
<menuitem label="Bus" selected="true"/>
<menuitem label="Train"/>
</menupopup>
</menulist>
|
このメニューリストは、個々の menuitem 要素からなる 4 つの選択肢をもちます。選択肢を表示するには、メニューリスト上の矢印ボタンをクリックします。selected 属性は、デフォルトで選択される値を指示するのに使われます。
menuitem 要素は、実際には、ボタンからなります。そのため、src、crop そして accesskey 属性を使うこともできます。
デフォルトでは、リストから選択することだけができます。ドロップダウンボックスによっては可能な自分自身の選択を入力することはできません。メニューリストの変種では、これが可能です。そこでは、現在の選択を表示するのにボタンを使うのではなく、テキストボックスが使われます。それにより、選択を入力することができます。例えば、ナビゲーターの URL フィールドには、以前に入力した URL を選ぶため、ドロップダウンがあります。しかし、URL は、自分で入力することもできます。
編集可能なメニューリストを作るためには、次のように、editable 属性を加えます。
例 2.4.5
<menulist editable="true">
<menupopup>
<menuitem label="www.mozilla.org"/>
<menuitem label="www.xulplanet.com"/>
<menuitem label="www.dmoz.org"/>
</menupopup>
</menulist>
|
ここで作られた URL フィールドには、3 つのあらかじめ作られた選択肢があり、ユーザーは、そこから選択することも、また、自分自身の選択フィールドに入力することもできます。value 属性はこの例では使われていないので、デフォルト値はブランクです。
リストボックスも作ることができます。その作り方は、ツリーに関するセクションにあります。
(進む) 次のセクションでは、HTML を使って、ウィンドウに追加要素を加える方法を学びます。