スプリッター

ここでは、ウィンドウにスプリッターを追加する方法を見ていきます。

ボックスを分割する

1 つのウィンドウ内を 2 つのセクションに分割し、利用者がそれぞれのセクションに割り当てる大きさを変更できるようにしたい場合が、しばしばあると思います。 1 つの例として、Mozilla のブラウザウィンドウがあります。 サイドバーパネルのサイズは、2 つのフレーム間にあるバーをドラッグすることで変更可能です。 また、ノッチの部分をクリックすることで、サイドバーを隠すこともできます。

スプリッター要素

この機能は、splitter と呼ばれる要素によって実現されています。 スプリッター要素は、2 つのセクション間に細いバーを作り、それぞれに割り当てる大きさを変更できるようにします。 スプリッターは、必要ならばどこにでも配置することができ、同じボックス内でそれより前の要素と、後の要素をリサイズすることが可能になります。

スプリッターを水平ボックス内に置くと、水平方向でリサイズ可能になります。 また、垂直ボックス内に置くと、垂直方向でリサイズ可能になります。

スプリッターの構文を以下に示します。

<splitter
    id="identifier"
    state="open"
    collapse="before"
    resizebefore="closest"
    resizeafter="closest">

スプリッターの属性を以下に示します。

id
スプリッターの一意な識別子です。
state
スプリッターの状態を指示します。これをデフォルトの open に設定すると、分割されたパネルは最初から開いた状態になります。collapsed (折り畳む) に設定すると、片方のパネルは縮小して折り畳まれ、もう一方のパネルがスペース全体を占有した状態になります。
collapse
グリッピー (grippy) と呼ばれる、スプリッターについているノッチがクリックされるか、または状態が collapsed に設定された場合に、パネルのどちら側を折り畳むかを指示します。before に設定するとスプリッターの前の要素が、after にするとスプリッターの後の要素が折り畳まれます。デフォルトの none にすると、スプリッターグリッピーがクリックされても、どちら側のパネルも折り畳まれません。
resizebefore
スプリッターのドラッグによって、要素のリサイズが発生します。この属性は、左側 (垂直配置では上側) に置かれた要素に対して、どの要素がリサイズされるべきかを指示します。これを closest に設定すると、スプリッターのすぐ左にある要素がリサイズされます。farthest に設定すると、スプリッターの左側で最も離れた要素 (ボックス内の最初の要素) がリサイズされます。デフォルトは closest になります。
resizeafter
スプリッターのドラッグによって、要素のリサイズが発生します。この属性は、右側 (垂直配置では下側) に置かれた要素に対して、どの要素がリサイズされるべきかを指示します。これを closest に設定すると、スプリッターのすぐ右にある要素がリサイズされます。farthest に設定すると、スプリッターの右側で最も離れた要素 (ボックス内の最後の要素) がリサイズされます。また、grow という値も設定可能です。この場合、スプリッターがドラッグされても、スプリッターの右側にある要素のサイズは変化せず、ボックス全体のサイズが変化します。デフォルトは closest になります。

collapse 属性を設定する場合は、splitter 内に、利用者が要素を折り畳むために使用する、grippy 要素を加える必要があります。

スプリッターの例

参考のために、例を示します。

例 1 : ソース 表示

<vbox flex="1">
  <iframe id="content-1" width="60" height="20" src="w1.html"/>
  <splitter collapse="before" resizeafter="farthest">
    <grippy/>
  </splitter>
  <iframe id="content-2" width="60" height="20" src="w2.html"/>
  <iframe id="content-3" width="60" height="20" src="w3.html"/>
  <iframe id="content-4" width="60" height="20" src="w4.html"/>
</vbox>
画像:splitter-ex1.jpg

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

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

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

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

画像:splitter-ex2.jpg

この画像は、4 つのパネルの例で、スプリッターを折り畳んだ状態に変更したものです。

画像:splitter-ex3.jpg

この画像は、 4 つのパネルの例で、スプリッターを右にリサイズしたものです。 中央の 2 つのパネルのサイズが変わっていないことに注目してください。 1 番目のパネルと 4 番目のパネルのサイズだけが変わっていることがわかると思います。 4 番目のパネルは、最小限の部分だけが見えています。 スプリッターを右にドラッグし続けた場合、残りの 2 つのパネルが小さくなります。 ボックスの最小または最大の幅や高さを指定するために、iframe に min-widthmax-height などのスタイルプロパティを使うことが可能です。 これらの設定を行った場合、スプリッターによって設定が検出され、利用者が最小サイズや最大サイズを超えて、スプリッターをドラッグできないようになります。

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

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

ファイル検索ダイアログにスプリッターを追加する

それでは、ファイル検索ダイアログにスプリッターを加えてみることにしましょう。 スプリッターを使用可能な箇所はいくつか考えられると思いますが、今回はダイアログ内に検索結果を追加するために使用してみることにします。 具体的には、検索条件と下部にあるボタンの間に検索結果のためのエリアを追加し、 スプリッターによって、このエリアを折り畳むか隠すことができるようにします。

</tabbox>

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

 <hbox>

この例では、スプリッターと iframe がダイアログに追加されています。 tabbox の後の spacer は、もう必要ないため、削除してもかまいません。 フレームのコンテンツは、「<tt>results.html</tt>」という名前のファイルから読み込まれます。 このファイルを作り、中身は何でもよいので適当に好きなものを入れておいてください。 iframe は、後のセクションで結果リストの作り方を学んだときに、その結果リストで置き換えることにしましょう。 今回は、スプリッターの例を示すのが目的であるため、とりあえず iframe を使うことにします。

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

resizeafter 属性の値は、grow に設定されています。 このため、スプリッターの後ろにある要素は、スプリッターが下方向にドラッグされた場合、スプリッターに押し下げられます。 その結果、フレームのコンテンツ部分を任意の大きさに広げることが可能です。 ただし、コンテンツ部分が大きくなっても、ウィンドウ自身は自動的にリサイズされない点は注意しておく必要があります。 また、垂直配置のボックスの中に置かれているため、スプリッターが水平になっていることにも注意して下さい。

通常の状態:

画像:splitter1.png

折り畳まれた状態:

画像:splitter2.png

ここまでのファイル検索ダイアログの例 : ソース 表示

次は、ツールバーの作り方を見ていきます。

ドキュメントのタグと貢献者

Contributors to this page: fscholz, ethertank, Morishoji, Mgjbot
最終更新者: fscholz,