スプリッター

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

ボックスを分割する

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>

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

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

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

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

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

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

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

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

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

</tabbox>

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

 <hbox>

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

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