XUL チュートリアル - スクロールバー

今回は、ウィンドウにスクロールバーを追加するのを見ることにしましょう。

スクロールバーを追加する

スクロールバーは、多くの場合、ユーザーが大きな文書内を移動できるようにするために使われます。スクロールバーは、その他に、ある範囲内の値を要求する必要がある場合にも使えます。スクロールバーを作る方法はたくさんあります。XUL では、その一つとして、scrollbar タグを使って作ることができます。大きなテキストボックスのような HTML 要素にも、スクロールバーが必要になる場合があるでしょう。

まず、スタンドアローンのスクロールバーの作り方から説明しましょう。ユーザーは、スクロールバーを調整するために値を設定します。これを使うことはあまりないでしょう。スクロールバーは、幾つかの部品からなります。スクロールバーの主部品であるスライダー、これは、調整可能なボックスをもちます。次に、両端の 2 つの矢印ボタンです。スクロールバーは、これらの要素すべてを、自動的に作ります。

スクロールバーのシンタックスは、次の通りです。

<scrollbar
    id="identifier"
    align="horizontal"/>
    curpos="20"
    maxpos="100"
    increment="1"
    pageincrement="10"/>

属性は、次の通りです。

• id
  スクロールバーの一意な識別子。
• align
  これは、スクロールバーの方向を指定する。デフォルトは、horizontal で、左から右に広がるスクロールバーを作る。vertical を指定することもできる。これは、上から下に広がるスクロールバーを作る。
• curpos
  これは、スクロールバーのサムネイル (前後にスライドできるボックス) の現在位置を指定する。値は、0 から maxpos の値までの間である。この値に単位は必要ない。デフォルト値は 0 である。
• maxpos
  これは、スクロールバーのサムネイルの最大位置を指定する。値は数値で、単位は必要ない。デフォルト値は 100 である。
• increment
  ユーザーがスクロールバーの矢印の一つをクリックしたとき、curpos の値がどれだけ変化するかを指定する。デフォルト値は 1 である。
• pageincrement
  ユーザーがスクロールバーのボックスと矢印の間のトレイをクリックしてスクロールバーのページングをすると、curpos の値がどれだけ変化するかを指定する。デフォルト値は 10 である。

上のシンタックスで示した例は、0 から 100 までの値をもつことのできるスクロールバーを作ります。初期値は 20 です。この値は、XUL にとって、何ら特殊な意味はありません。これは、どんなことにでも使えます。多くの場合、位置を示すために使われるでしょう。スクロールバーの矢印の一つをクリックすると、値は、上か下に 1 変化します。スクロールバーをページングすると、値は、10 変化します。

ユーザーがスクロールバーの矢印をクリックすると、サムネイルは、increment の値によって指定された量、動きます。この属性の値を増やすと、スクロールバーはもっとたくさん動くことになります。スクロールバーの左端か上端の位置の値は、0 です。スクロールバーの右端か下端の値は、maxpos によって指定した値です。

スクロールバーの値を調整することによって、サムネイルを望みの位置に置くことができます。また、ユーザーが矢印をクリックしたときの変化も、望みの値にすることができます。

スクロールバーの実装

スクロールバーは、実際上、3 つの異なった要素からなっています。つまり、スライダーと 2 つの矢印ボタンです。必要なら、これら別々の要素からスクロールバーを作ることができます。次のコードは、スクロールバー中に入れる実際の内容の例です。

<scrollbar id="scid" curpos="0" maxpos="100"
    increment="1" pageincrement="10">
  <scrollbarbutton type="decrement"/>
  <slider flex="1"/>
  <scrollbarbutton type="increment"/>
</scrollbar>

スクロールバー内に自分で何も置かなければ、これらすべては、自動的に作られます。

• scrollbarbutton この要素は、スクロールバーの両端のボタンを表わす。type 属性は、値が変化する方向を示す。それは、increment か decrement に設定する (デフォルトは存在しないので、このいずれかに設定しなければならない)。この要素は、スクロールバーの外で、通常のボタンのように振る舞うような、実際的な値をもたない。
• slider この要素は、スライドするサムネイルのためのエリアである。これは、本質的に、矢印ボタンのないスクロールバーと同じである。この要素は、必要であれば、スクロールバーの外で使うことができる。curpos などの scrollbar 属性は、ここでも使える。スライダーがスクロールバー内に置かれると、スクロールバーによって指定された属性は、スライダーによって指定された属性を上書きする。

必要な場合、スクロールバーに追加的なボタンを加えるために、この事実が使えます。しかし、この種の変更は、後のセクションで説明する XBL に残しておくのがベストです。

(進む) 次は、フォントとカラーピッカー (font and color pickers) を作る方法を見ることにしましょう。