XUL チュートリアル - スプリッター

ここでは、ウィンドウのスプリッターを追加する方法を見ることにしましょう。

ボックスを分割する (Splitting a Box)

時に、一つのウィンドウ内にセクションを 2 つ置き、ユーザーがセクションをリサイズできるようにしたい場合があるかもしれません。その例は、Mozilla のブラウザーウィンドウです。そこでは、2 つのフレーム間にあるバーをドラッグすることによって、サイドバーパネルのサイズを変更できます。また、ノッチをクリックすれば、サイドバーを折りたたむこともできます。

この機能は、splitter と呼ばれる要素を使って実現されています。この要素は、2 つのセクション間に細いバーを作ります。これによって、その両側のリサイズができます。スプリッターは望みのどこにでも置くことができ、同じボックス内のその前後にある要素のリサイズができます。

スプリッターを水平方向のボックス内に置くと、水平方向のりサイズができるようになります。また、垂直方向のボックス内に置くと、垂直方向のリサイズができるようになります。

ここでは、4 つの iframe が作られ、スプリッターが最初のフレームと 2 番目のフレームの間に置かれています。collapse は、before という値に設定されています。このため、スプリッターのグリッピーがクリックされると、最初のフレームが折り畳まれ、スプリッターと残りのフレームは左に移動します。

スプリッターは、resizeafter に farthest という値が与えられています。このため、スプリッターがドラッグされると、その後の最も離れた要素のサイズが変化します。この場合は、4 番目のフレームのサイズが変わります。

resizebefore には値が指定されていません。そのため、デフォルトが適用されて closest という値になります。この場合は、スプリッターの前にはフレームが一つしかないので、最初のフレームのサイズが変わります。

2 番目と 3 番目のフレームは、4 番目のフレームが最大サイズになるまで右にスプリッターをドラッグした場合にだけ、サイズが変わります。

スプリッターを使って右にリサイズした場合の 4 つのパネルのイメージを下に示しました。中央の 2 つのパネルのサイズが変わっていないことに注意して下さい。1 番目のパネルと 4 番目のパネルのサイズだけが変わっています。4 番目のパネル部分を見て下さい。スプリッターを右にドラッグし続けると、残りの 2 つのパネルは小さくなります。

ボックス内の最小幅や高さを指定するため、iframe に対して、min-width や max-height などのスタイルプロパティーを使うことができます。これを行なうと、スプリッターはそれを検出し、ユーザーが最小サイズや最大サイズを超えて、スプリッターをドラッグすることができないようにします。

例えば、上の 4 番目のパネルに 30 ピクセルの最小幅を指定すると、パネルは、そのサイズよりも小さくなることはありません。他の 2 つのパネルのサイズが小さくなります。1 番目のパネルの最小幅を 50 ピクセルに設定すると、(60 ピクセル幅で始まっているので) スプリッターは左に 10 ピクセルしかドラッグできません。しかし、この場合でも、スプリッターを折り畳むことはできます。

必要なら、一つのボックスに複数のスプリッターを置くこともできます。この場合は、スプリッターの別々の場所を折り畳むことができます。同様に、iframe だけを折り畳むことはありません。どんな要素でも折り畳むことができます。

スプリッターを変更する

スプリッターは、実際には、一種のボックスです。そのため、その内部に別の要素をインクルードすることができます。これによって、スプリッターの外見をカスタマイズすることができます。

スプリッターの内部に何の内容もインクルードしない場合や、通常そんなことはしないといった場合、デフォルトの要素が追加されます。しかし、これは collapse が before か after のいずれかに設定されている場合にだけ当てはまります。この属性を設定しなかったり、その値を none に設定する場合は、デフォルトの内容は追加されません。これは、ユーザーが折り畳むことのできるスプリッターと折り畳むことのできないスプリッターを区別できるようにするためです。スプリッターのデフォルト内容は次の通りです。

お分かりのように、2 つのフレキシブルなスペーサーの間に、grippy と呼ばれる要素がスプリッターに追加されています。この 2 つのスペーサーはグリッピーを中央に置くために使われています。グリッピーとは、もちろん、隣のフレームを折り畳むのに使えるスプリッターの真中にあるノッチのことです。

グリッピーは、特殊な要素です。それは、本質的に、ある追加的な振る舞いをするボタンで、それをスプリッター内で機能させます。スプリッターの state 属性を直接グリッピーに置く場合があるかもしれません。グリッピーは通常のボタンと同じ様にカスタマイズできます。スプリッターの外に置くと、grippy 要素は、ボタンのように働きます。

ツールバーの端にあるノッチはグリッピーとも呼ばれることを覚えているかもしれません。両方とも何かを折り畳むという機能においては類似していますが、実装上、関係はありません。

スプリッター内の方向は、スプリッターの方向によって決められる点に注意すべきです。水平方向のスプリッターは水平方向をもち、垂直方向のスプリッターは垂直方向をもちます。

スプリッターの例

内部にスプリッターをもつ「ファイル検索」ダイアログがどのように見えるか、見ることにしましょう。可能性の一つは、ダイアログ内に検索結果を追加することでしょう。検索条件と下部にあるボタンの間にエリアを追加することにします。スプリッターによって、検索結果を折り畳むことができます。

</tabbox>

 
 <iframe src="results.html"/>
 <splitter collapse="before" resizeafter="grow"/>

 <!--spacer flex="1"/-->
 

 <box orient="horizontal">

ここでは、スプリッターと iframe がダイアログに追加されています。スペーサーがコメントにされていることにも気が付くでしょう。これはもう必要ありません。お望みなら、削除しても構いません。フレームの内容は、'results.html' という名前のファイルに入れられます。このファイルを作って、その中に望みの内容を何でも入れて下さい。iframe は、後で、結果リストの作り方が分かっている場合、それによって置き換えられます。今は、これはスプリッターの例を示すのに役立ちます。

スプリッターの collapse は、before 値に設定されています。このため、スプリッターの直前の要素が折り畳まれます。ここでは、iframe がそれに当たります。下のイメージが示しているように、グリッピーがクリックされると、iframe が折り畳まれ、ボタンが上に移動します。

resizeafter 属性は、grow に設定されています。そのため、スプリッターの後の要素は、スプリッターが下方向にドラッグされた場合、下方に移動します。この結果、フレームの内容はどんなサイズにでもなれます。ウィンドウ自身は自動的にリサイズされない点に注意すべきです。また、これは水平方向のスプリッターであることにも注意して下さい。スプリッターは垂直方向のボックスに置かれているためです。

通常の状態:

隠された状態:

(進む) 次は、ウィンドウにメニューバーを追加する方法を見ることにしましょう。