ボックスモデルの多くの機能を見てきました。ここでは、例を使って、詳細をもっと見ることにしましょう。
min-width や max-height などのスタイルプロパティーは、どの要素にも適用できます。それらをボタンやテキストインプットに追加しましたが、スペーサーやボックスにも追加できます。更に、flex 属性も、あらゆる要素に適用できます。
例 3.3.1
<button label="Left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="Right" style="min-width: 100px;" flex="1"/> |
上の例では、3 つの要素はすべてフレキシブルであるので、リサイズされます。2 つのボタンには、100 ピクセルという最小幅が指定されています。ボタンは、これよりも小さくなることはありませんが、もっと大きなものになる場合があります。ここで、ウィンドウは 200 ピクセル以上の大きさで表示されるべきです。これだけの大きさがあれば、2 つのボタンにとって十分でしょう。3 つの要素はすべてフレキシブルですが、これ以上の広さを必要としないので、フレキシビリティーが、余分なスペースを加えることはありません。
上のイメージで分かるように、コンテナに適したように垂直方向に広がる 2 つのボタンがあります。この場合、これはウィンドウで、ウィンドウはデフォルトで垂直方向のボックスです。align 属性が水平方向のボックス上でのこの振る舞いをコントロールします。要素、あるいはもっとよい方法を取るなら、ボックス自身に最大の高さを置くことによって、これを伸縮させないようにすることができます。ボックスに最大の高さが指定されている場合、その内部の要素はこの制約を受けます。しかし、ここでの問題は、要素の大きさを事前に知っておく必要があるということです。以下は、align 属性セットを使った例です。
例 3.3.2
<box align="top"> <button label="Left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="Right" style="min-width: 100px;" flex="1"/> </box> |
複雑なレイアウトを行なうためには、一般に、ネストしたボックスを追加し、要素の幾つかに最小サイズと最大サイズを指定し、要素によってはフレキシブルの指定をする必要があります。最善のインターフェースとは、どんなサイズで表示されても問題がないというものです。ボックスモデルは、自分で色々なことを試してみないと、理解するのが難しいでしょう。
以下は、2 種類のボックスの概略です。
ボックスは、テーブルなどの HTML 要素の内部を含めて、XUL ファイルのどこにでも置けます。しかし、HTML 要素の内部に置くと、レイアウトは、部分的に HTML 要素がコントロールすることになります。これは、flex が、期待した通りに、正しく動作しないかもしれないということです。フレキシビリティーは、ボックスかボックス型の要素の内部にある要素だけにとって意味があるということを思い出して下さい。
1. スペーサーを使う
例 3.3.3
<button label="One"/> <spacer style="width: 5px"/> <button label="Two"/> |
ここで、スペーサーは、幅を明示的に 5 ピクセルに設定することによって、2 つのボタンの間のセパレーターとして使われています。(CSS の margin プロパティーを使って) マージンを設定することもできるでしょう。
2. ボタンを中央に置く
例 3.3.4
<hbox pack="center" align="center" flex="1"> <button label="Look at Me!"/> <button label="Push Me!"/> </hbox> |
この例には、内部にボタンが 2 つある水平方向のボックスがあります。ボックスはフレキシブルです。ボックスには、pack があり、ボタンを水平方向で中央に置くために使われています。align は、ボタンを垂直方向に配置します。その結果、ボタンは水平、垂直の両方向で中央に置かれます。この例は、2 番目のボタンが最初のボタンの隣りではなく下側に来ることを除けば、垂直方向のボックスでも動作します。
3. 「テキスト検索」ダイアログ 例 3.3.5
<box orient="vertical" flex="3"> <label control="t1" value="Search Text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </box> <box orient="vertical" style="min-width: 150px;" flex="1" align="start"> <checkbox id="c1" label="Ignore Case"/> <spacer flex="1" style="max-height: 30px;"/> <button label="Find"/> </box> |
ここでは、2 つの垂直方向のボックスが作られます。一つはテキストボックスのためのもの、もう一つはチェックボックスとボタンのためのものです。左のボックスには、右のボックスの 3 倍のフレキシビリティーがあります。そのため、ウィンドウのサイズが増えた場合、いつでも、余分のスペースを 3 倍受け取ります。右のボックスは、150 ピクセルの最小幅をもちます。
テキストボックスはフレキシブルです。そのため、ウィンドウがリサイズすると、それもリサイズします。テキストボックスも、100 ピクセルの最小幅をもちます。チェックボックスは、右のボックス内に、ラベルとともに表示されます。チェックボックスのすぐ下には、スペーサーがあります。スペーサーは伸縮しますが、30 ピクセル以上になることはありません。その結果、チェックボックスと Find ボタンは、互いに 30 ピクセル以下の間隔で配置されます。
2 番目のボックスには、start の配置があります。これによって、子供要素は左端に配置されます。これを指定しなかった場合、デフォルトは stretch です。こうすると、子供要素は水平方向で伸縮することになったはずです。Find ボタンのサイズを変更したくないので、配置を設定する必要があります。
(進む) 次は、もっと特殊用途化されたボックス型であるグループボックスを学びます。