XUL チュートリアル - ボタンを追加する

このセクションでは、ウィンドウにボタンを追加する方法を見ることにしましょう。

ウィンドウにボタンを追加する

これまでに作ったウィンドウには、まだ何もありませんでした。そのため、あまり面白いものではありません。このセクションでは、Find ボタンと Cancel ボタンという 2 つのボタンを追加しましょう。ウィンドウにそれらを置く簡単な方法も学ぶことにします。

HTML と同様に、ユーザーインターフェース要素を作るために使用できる多くのタグがあります。そのうち最も基本的なのが、button タグです。この要素は、単純なボタンを作るのに使います。

ボタン要素は、関連する 2 つの主要なプロパティーであるラベルとイメージをもちます。この一方あるいは両方が必要です。このため、ボタンは、ラベルだけ、イメージだけ、あるいはラベルとイメージの両方をもつことができます。ボタンは、ツールバー上のボタン、ダイアログの OK と Cancel ボタンのために、よく使われます。

button タグのシンタックスは次の通りです。

<button
    id="identifier"
    class="dialog"
    label="OK"
    src="image.gif"
    default="true"
    disabled="true"
    accesskey="t"/>

属性は次の通りで、すべてオプションです。

• id
  一意な識別子。これを使って、ボタンの識別ができる。この属性は、すべての要素にあるはずである。スタイルシートやスクリプトでボタンを参照したい場合、これを使用する。しかし、この属性は、ほとんどすべての要素に加えるべきである。しかし、このチュートリアルでは、分かりやすくするため、必ずしもそうなっていない。
• class
  ボタンのスタイルクラス。これは、HTML の場合と同じように働く。ボタンが現われるスタイルを指示するために使われる。ここでは、dialog という値が使われている。多くの場合、ボタンにクラスは使用しないだろう。
• label
  ボタン上に現われるラベル。例えば、OK や Cancel。これを指定しないと、テキストは表示されない。
• src
  ボタン上に現われるイメージの URL。この属性を指定しないと、イメージは表示されない。
• default
  この属性は、true か false に設定できる。true の場合、このボタンは、ウィンドウにとって、デフォルトボタンとなる。ユーザーが使用しているプラットフォームに依存するが、これは、一般に、ユーザーが ENTER キーを押すことによって、ボタンを押したことにできるということである。通常、これは、OK ボタンで true に設定し、他のボタンすべてでは false に設定するか全く何もしないかである。ウィンドウごとに一つのボタンだけがデフォルト値を true に設定できる。
• disabled
  この属性を true に設定すると、ボタンは無効となる。これは、通常、テキストをグレイで描画する。ボタンが無効である場合、ボタンの機能は実行されない。通常の有効なボタンには、この値を、false に設定する場合もある。この属性を全く指定しないと、ボタンは有効である。ボタンの無効状態は、JavaScript を使って切り換えることができる。
• accesskey
  これは、ショートカットキーとして使用する文字に設定する。この文字は、ラベルテキスト内に現われ、多くの場合、下線付きで描画される。ユーザーが ALT (あるいは類似キー、個々のプラットフォームで異なる) とアクセスキーを押すと、ウィンドウ内のどこからでも、ボタンを押したことにできる。

ボタンは、上でリストした以外にも多くの属性をサポートしていることに注意して下さい。それらについては、後で説明します。

デフォルトで、ボタンは、特別な外見なしにウィンドウ上に現われます。つまり、テキストとイメージだけが現われます。ツールバー上のボタンなどの場合には、これで十分でしょう。しかし、他の場合には、ボタンの周りに境界を置きたいかもしれません。あるいは、ユーザーがボタン上にマウスを動かすと、テキストを強調したいかもしれません。通常、これは、HTML の場合と同様に、ボタンのスタイルをスタイルシートやスクリプトを使って変更することによって行ないます。

ボタンの例

<button label="Normal"/>
<button label="Disabled" disabled="true"/>
<button label="Default" default="true"/>

上の例は、イメージ内にボタンを作っています。最初のボタンは、通常のボタンです。2 番目のボタンは、無効状態で、グレイで描かれています。3 番目のボタンは、デフォルトボタンで、濃い境界をもっています。ここにあるイメージは、モダンスキンのためのものです。他のスキンを使うと、無効ボタンやデフォルトボタンは、異なった描画がされます。

「ファイル検索」ユーティリティーのための簡単な Find ボタンを作ることにしましょう。下のコード例は、どうやってこれを行なうかを示しています。

<button id="find-button" label="Find" default="true"/>

このコードは、Find というラベルをもつ簡単なボタンを作ります。このボタンは、デフォルトボタンに指定されています。そのため、ユーザーは、 ENTER キーを押すことによって、Find ボタンを押したことにできます。

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

  <button id="find-button" label="Find" default="true"/>
  <button id="cancel-button" label="Cancel"/>

</window>

イメージを追加する

src 属性内に URL を指定することによって、ボタンにイメージを追加することができます。イメージは、URL (相対 URL でも絶対 URL でも構いません) からロードされ、ボタン上に表示されます。

ボタンのスタイルプロパティーを使ってイメージを指定する方法もあります。これは、XUL ファイルを変更せずに、'skin' (この場合、イメージの外見) を変えることができるようにするために設計されました。

CSS スタイルプロパティー list-style-image によって、使用するイメージを指定します。例を下に示しました。

<button id="find-button"
  label="Find" default="true" style="list-style-image: url('find.png')"/>

この場合、イメージ 'find.png' がボタン上に表示されます。style 属性は、HTML の対応要素と同様に機能します。一般に、これは、XUL 要素すべてで使えます。実際には、スタイル宣言は、別のスタイルシートに置くべきだということに注意して下さい。

(進む) 次のセクションでは、XUL ウィンドウにラベルとイメージを追加するのを見ることにしましょう。

例: 2.2.1 2.2.2 2.2.3