Splitters

スプリッター (Splitter)

Here, we'll look at how to add splitters to a window.

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

Splitting a Box

ボックスを分割する

There may be times when you want to have two sections of a window where the user can resize the sections. An example is the Mozilla browser window, where you can change the size of the sidebar panel by dragging the bar in-between the two frames. You can also hide the sidebar by clicking the notch.

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

This feature is accomplished by using an element called a splitter. It creates a skinny bar between two sections which allows the sides to be resized. You can place a splitter anywhere you want and it will allow resizing of the elements that come before it and the elements that come after it in the same box.

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

When a splitter is placed inside a horizontal box, it will allow resizing horizontally. When a splitter is placed inside a vertical box, it will allow resizing vertically.

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

The syntax of a splitter is as follows:

スプリッターの構文は次の通りです。

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

The attributes are as follows:

属性は次の通りです。

  • id
    The unique identifier of the splitter.
  • state
    Indicates the state of the splitter. Set this to open, the default, to have the split panel initially open or set it to collapsed to have one of the panels shrunk down (collapsed) and the other occupying all of the space.
  • collapse
    This indicates which side of the panel should collapse when the splitter notch (or grippy) is clicked or set into a collapsed state. Set this to before for the element before the spliiter, or after for the element after the splitter. If you set this to none, which is also the default, the splitter grippy does not collapse when clicked.
  • resizebefore
    When the splitter is dragged, the elements to the left resize. This attribute indicates which element should resize. Set this to closest to have the element immediately to the left of the splitter resize. Set this to farthest to have the element that is the farthest away from the splitter to the left resize. (The first element in the box). The default value is closest.
  • resizeafter
    When the splitter is dragged, the elements to the right resize. This attribute indicates which element should resize. Set this to closest to have the element immediately to the right of the splitter resize. Set this to farthest to have the element that is the farthest away from the splitter to the right resize. (The last element in the box). This attribute can also be set to grow, in which case the elements to the right of the splitter do not change size when the splitter is dragged, but instead the entire box changes size. The default value is closest.
  • id
    スプリッターの一意な識別子。
  • state
    スプリッターの状態を指示する。これをデフォルトの open に設定すると、スプリットパネルは最初から開いた状態になる。 collapsed に設定すると、パネルの一方が縮小して (折り畳まれ)、他方のパネルがスペース全体を占有した状態になる。
  • collapse
    これは、スプリッターのノッチ (あるいはグリッピー) がクリックされるか、 または折り畳む状態に設定された場合、パネルのどちら側を折り畳むかを指示する。 これを before に設定するとスプリッターの前の要素が、 after にするとスプリッターの後の要素が折り畳まれる。 デフォルトの none にすると、スプリッターのグリッピーは、 クリックされても、どちら側のパネルも折り畳まれない。
  • resizebefore
    スプリッターがドラッグされると、左側の要素がリサイズする。この属性は どの要素がリサイズすべきかを指示する。これを closest に設定すると、スプリッターのすぐ左にある要素がリサイズする。これを farthest に設定すると、スプリッターの左にある 最も離れた要素がリサイズする (ボックス内の最初の要素)。デフォルト値は closest である。
  • resizeafter
    スプリッターがドラッグされると、右側の要素がリサイズする。この属性は どの要素がリサイズすべきか指示する。これを closest に設定すると、スプリッターのすぐ右にある要素がリサイズする。これを farthest に設定すると、スプリッターの右にある 最も離れた要素がリサイズする (ボックス内の最後の要素)。この属性は、 grow にも設定可能である。この場合は、 スプリッターがドラッグされても、スプリッターの右にある要素のサイズは 変化せず、ボックス全体のサイズが変化する。デフォルト値は closest である。

If you set the collapse attribute, you should also add a grippy element inside the splitter which the user can use to collapse the element.

collapse 属性を設定するのなら、ユーザが要素を 折りたたむことができるように、splitter 内に grippy 要素を加えるべきです。

An example would be helpful here:

ここでは、例が役立つでしょう。

Example 4.6.1: Source View
<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>

Here, four iframes have been created and a splitter has been placed in-between the first and second one. The collapse has been set to a value of before, meaning that if the splitter grippy is clicked on, the first frame would disappear and the splitter and the remaining frames would shuffle to the left. Ths splitter grippy is drawn centered inside the splitter.

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

The splitter has been given a resizeafter value of farthest. This means that when the splitter is dragged, the farthest element after it will change size. In this case, frame 4 will change size.

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

A value has not been specified for resizebefore so it will default to a value of closest. In this case, there is only one frame before the splitter, so frame 1 will change size.

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

Frames 2 and 3 will only change size if you drag the splitter far enough to the right that frame 4 has reached its minimum size.

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

The 4 panels with the splitter in a collapsed state:

スプリッターが折り畳まれた状態の 4 つのパネル。

An image of the 4 panels with the splitter resized to the right is shown below. Notice how the middle two panels have not changed size. Only panel 1 and panel 4 have changed size. You can just see part of the fourth panel. If you continue to drag the splitter to the right, the other two panels will shrink.

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

You can use the style properties such as min-width, max-height on the iframes to specify minimum or maximum widths or heights in the box. If you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes.

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

For example, if you specified a minimum width of 30 pixels on panel 4 above, it would not shrink below that size. The other two panels would have to shrink. If you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at 60 pixels wide). You can still collapse the splitter however.

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

You can also place more than one splitter in a box if you want, in which case you could collapse different parts of it. Similarly, you do not have to collapse just iframes. Any element can be collapsed.

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

Splitter Example

スプリッターの例

Let's see what the find file dialog looks like with a splitter in it. One possibility would be to add the results of the search in the dialog. We'll add an area in-between the search criteria and the buttons along the bottom. A splitter will allow you to collapse, or hide, the search results.

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

</tabbox>

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

 <hbox>

Here, a splitter and an iframe have been added to the dialog. We don't need the spacer after the tabbox any more so we can remove it. The content of the frame is contained in a file called 'results.html'. Create this file and put whatever you want in it for now. The iframe will be replaced later with a results list when we know how to create it. For now, it serves to demonstrate the splitter.

ここでは、スプリッターと iframe がダイアログに追加されています。 tabbox の後の spacer はもう必要ありませんので、 削除しても構いません。フレームの内容は、'results.html' という名前のファイルに 入れられます。このファイルを作って、その中に望みの内容を何でも入れて下さい。 後で結果リストの作り方が分かったときに、iframe をその結果リストで置き換えます。 今は、スプリッターの例を示すのに iframe を使います。

The splitter has been set to a collapse value of before meaning that the element just before the splitter will collapse. Here, it is the iframe. As the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.

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

The resizeafter attribute has been set to grow so that the elements after the splitter push themselves down when the splitter is dragged down. This results in the content of the frame growing to any size. It should be noted that the window does not resize itself automatically. You'll also notice that this is a horizontal splitter because it has been placed in a vertical box.

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

Normal State:

通常の状態:

Collapsed State:

折り畳まれた状態:


(Next) Next, we'll look at how to create a scroll bar.

(進む) 次は、スクロールバーの作り方を見ることにしましょう。

Examples: 4.6.1

Find files example so far: Source View

今のところの「ファイル検索」の例: Source View


Copyright (C) 1999 - 2004 XulPlanet.com
訳者: kmine
このドキュメントのオリジナルは XULPlanet において英語で公布されています。
またドキュメントの管理の言語は現在も英語です。この日本語訳は、
利用者の利便のために Mozilla Japan 翻訳部門によって提供されたものです。
フィードバックは英語で、元の著者に送って下さい。
翻訳された文書の一覧は、現在以下のURLで見ることが出来ます。
http://www.mozilla.gr.jp/jt/xul/progress.html