このセクションでは、ウィンドウに簡単なボタンを追加する方法を見て行きます。
ウィンドウにボタンを追加する
前回作成したウィンドウは、まだ中に何も置かれてないため、あまり面白いものではありませんでした。 このセクションでは、Find (検索) ボタンと Cancel (取消) ボタンの 2 つのボタンを追加します。 また、ウィンドウの中でこれらの配置を決める簡単な方法についても学びます。
HTML と同様、XUL には、ユーザーインターフェイスの要素を作成するためのタグがたくさんあります。 最も基本的なものは、 button タグです。 この要素は、単純なボタンを作成するために使用します。
button 要素には、2 つの主要なプロパティ、label と image があります。 通常、ボタンには、この 2 つのうちのどちらか、あるいは両方が必要になります。 したがって、ボタンには、「ラベルだけ」、「画像だけ」、あるいは「ラベルと画像の両方」を設定することが可能です。 ボタンは、ダイアログの「OK」および「Cancel」ボタンとして普段から使用されています。
ボタン要素の構文
button
<button
id="identifier"
class="dialog"
label="OK"
image="images/image.jpg"
disabled="true"
accesskey="t"/>
ボタンの属性には以下のようなものがあり、全てオプションです。
-
id - ボタンを識別するための一意な識別子。この属性は、全ての要素に存在します。id は、ボタンをスタイルシートやスクリプトから参照する必要があるときに使用します。この属性は、必要ない場合でも、出来るだけ全ての要素に対して設定しておいた方が良いと思います。なお、このチュートリアルで示す例の中では、単純化のために設定していない場合もあります。
-
class - ボタンのスタイルクラス。動作は HTML と同様です。ボタンが表示される外見のスタイルを指定するために使用します。この場合は、
dialogという値が使用されています。ほとんどの場合、ボタンに対して class を使用する事はないと思います。 -
label - OK や Cancel といった、ボタンに表示されるラベル。この属性が指定されていない場合、何のテキストも表示されません。
-
image - ボタンに表示される画像の URL。この属性が指定されていない場合、画像は表示されません。画像は、スタイルシート中で
list-style-imageプロパティを使用することによっても、指定することができます。 -
disabled - この属性が
trueに設定された場合、そのボタンは無効になります。無効状態では、ボタンのテキストは通常灰色で表示されます。もしボタンが無効のときは、そのボタンの機能は実行出来ません。この属性が設定されない場合、ボタンは有効になります。ボタンの有効・無効の切り替えは、JavaScript で変更することができます。 -
accesskey - この属性は、ショートカットキーとして使用する文字で、可能な限り設定するようにします。この文字は、ラベルのテキストに含まれている文字であるべきで、通例、下線付きで表示されます。【訳注: ラベルが日本語の場合は、「開く (O) 」のようにショートカットキーは括弧で囲って付加しておきます】 利用者が ALT キー (または、そのプラットフォームの同様のキー) を押しながらアクセスキーを押した場合、ボタンはそのウィンドウならどこからでもフォーカスを得ることが出来るはずです。
ボタンは、上に挙げたものよりも、さらに多くの属性をサポートしていることを補足しておきます。 他の属性については、後で触れる予定です。 以下にボタンの例をいくつか示します。
ボタンの例
var el = env.locale; 例 1 : ソース 表示
<button label="Normal"/> <button label="Disabled" disabled="true"/>
上の例を表示させると、画像で示すようなボタンが作成されるはずです。 最初のボタンは Normal (通常) のボタンです。 二番目のボタンは Disabled (無効) になっているので、灰色表示 (グレイアウト) されています。
ファイル検索ユーティリティのために簡単な Find (検索) ボタンを作成に取りかかることにします。 以下のサンプルコードはその方法を示しています。
<button id="find-button" label="Find"/>
ファイル検索ダイアログの例
それでは、前のセクションで作成した findfile.xul ファイルに、上記のコードを追加してみましょう。コードは window タグの間に挿入する必要があります。追加するコードを、以下に赤字で示します：
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button id="find-button" label="Find"/>
<button id="cancel-button" label="Cancel"/>
</window>
Find だけでなく、Cancel ボタンも追加されていることを注記しておきます。 水平配置 (orient="horizontal") がウィンドウに与えられているため、二つのボタンは横に並んで表示されます。 この XUL ファイルを Mozilla で開くと、右の画像で示すようなウィンドウが表示されるはずです。
次のセクションでは、XUL ウィンドウにラベルと画像を追加する方法について調べます。