このセクションでは、作った要素間に間隔を置く方法を見ることにしましょう。
ユーザーインターフェースを開発する場合の問題の一つは、個々のユーザーのディスプレイが異なるということです。ユーザーによっては、高解像度の大きなディスプレイをもっているかもしれませんし、低解像度のディスプレイをもっているかもしれません。更に、プラットフォームが違えば、ユーザーインターフェースに特別な要件が必要かもしれません。多数の言語のサポートを追加すれば、ある言語のテキストは、別の言語のものより大きな場所が必要かもしれません。
多数のプラットフォームと言語をサポートする必要のあるアプリケーションは、通常、これができるようにするため、広いスペースを使ってレイアウトされたウィンドウをもちます。プラットフォームとユーザーインターフェースツールキットの中には、ユーザーのニーズに応えることができるよう、リサイズと再配置できるスマートなコンポーネントを提供しているものもあります。(たとえば、Java では、レイアウトマネージャーを使います。)
XUL では、要素を自動的に配置し、リサイズすることができます。これまで見てきたように、「ファイル検索」ウィンドウは、その内部にある要素に適したサイズで表示されました。何かを追加するたびに、ウィンドウは大きくなります。
XUL は、'ボックスモデル' ('Box Model') と呼ばれるレイアウトシステムを使います。これについては、次のセクションで、もっと詳しく説明しますが、これを使えば、本質的に、ウィンドウを一連のボックスに分割することができます。ボックスは、自分で定義できる仕様に基づいて、配置、リサイズされます。今は、window 要素は、ボックスの一種だと覚えて下さい。
ボックスの詳細に入る前に、レイアウトに役立つ別の XUL 要素であるスプリング (spring) を紹介しましょう。スプリングは、非常に単純で、必要な要素は一つだけです。これについては、後で、説明します。最も簡単なスプリングは、次のようなものです。
ボックスの詳細に入る前に、レイアウトに役立つ別の XUL 要素 spacer を紹介しましょう。スペーサーは非常に単純で、必要な属性は一つだけです。これについては、後で説明します。最も簡単なスペーサーは、次のようなものです。
<spacer flex="1"/>
| Mozilla の比較的古いバージョンでは、スペーサーの変わりにスプリング要素が使われています。 |
スペーサーは、ウィンドウ内に間隔を開けるのに使われます。その最も便利な機能は、ユーザーがウィンドウをリサイズするとき、伸縮できるということです。これは、ウィンドウの右側や下部にボタンをどのように置くかに関するもので、これによって、ウィンドウがどんなサイズでも、それらのボタンを右側や下部に置いておくことができます。これから見ていくように、多数のレイアウト効果を得るため、一連のスペーサーを使うことができます。
上のシンタックスで、スペーサーは、flex と呼ばれる属性を一つもちます。これは、スペーサーのフレキシビリティーを定義するために使われます。上のケースでは、スペーサーの flex は、1 です。これによって、スペーサー要素は、伸縮性のあるものになります。スペーサーを、直接、ウィンドウ内に置くと、スペーサーは、ウィンドウのサイズが変更されると、サイズが大きくなります。スペーサーはフレキシビリティーがあるので、伸び縮みします。
すぐに、「ファイル検索」ダイアログにスペーサーを追加することにします。まず、現在のダイアログがリサイズされた場合、何が起きるか見ることにしましょう。
「ファイル検索」ウィンドウのサイズを変更しても、要素は、開始時の場所のままです。ウィンドウにたくさんのスペースがあっても、そのどれも移動させられたり、リサイズされることはありません。テキストボックスと Find ボタンの間にスペーサーを追加すると、どうなるか見ることにしましょう。
スペーサーを追加してウィンドウをリサイズすると、スペーサーが広がってスペースをうめることがわかります。ボタンは、右に移動されられました。スペーサーを追加するためのコードは、以下の通りです。これを Find ボタンの直前に挿入します。
<spacer flex="1"/> <button id="find-button" label="Find" default="true"/> |
XUL は、要素にとって適切な幅と高さを計算し、要素にフレキシビリティーをもたせるようスペースを追加します。要素の幅と高さに関する情報を指定しない場合、要素のデフォルトサイズがその内容によって決められます。ダイアログの Cancel ボタンは、その内部のテキストに適した幅に設定されていることに気が付くでしょう。テキストボックスなどの他の要素にも、適切なデフォルトサイズが決められます。
flex 属性は、ボックス (この場合、ウィンドウ) に適したサイズに、要素が変更できるかどうかを指定するために使われます。flex 属性がスペーサーに適用されることは既に見ました。しかし、この属性は、どの要素にも適用できます。例えば、Find ボタンをリサイズさせたいかもしれません。
イメージから分かるように、Find ボタンに flex 属性を置くことによって、ウィンドウがリサイズしたら、Find ボタンがリサイズします。実は、スペーサーには、特殊なものは何もありません。実際には、これは、隠れたボタン (hidden button) と考えることができるでしょう。スクリーン上に描かれないことを除くと、ボタンと同じように働くからです。
上のイメージで起こったことに気が付いたかもしれません。Find ボタンのサイズが多くなっただけでなく、メインのラベルとボタンの間にスペースが現われています。もちろん、これは、前に置いたスペーサーです。スペーサー自身もリサイズされました。注意してよく見ると、サイズの変更は、スペーサーとボタンで均等に行なわれていることに気が付くはずです。スペーサーが余分なスペースの半分を受け取り、ボタンが残りの半分を受け取ったのです。
このようになる理由は、スペーサーと Find ボタンの両方に、flex 属性があるためです。両方ともフレキシブルであるため、ボタンとスペーサー両方が均等にリサイズされます。
ある要素を 2 倍の大きさに拡大させたい場合はどうするのでしょうか。flex の値にもっと大きな数を使います。flex 要素の値は、割合です。ある要素が 1 という flex をもち、隣の要素が 2 という flex をもっている場合、2 番目の要素が、2 倍の大きさになります。実際、flex が 2 であるということは、この要素が、flex が 1 の要素の 2 倍の flex をもっているということなのです。
flex 属性は、要素間でサイズの割合がどうあるべきかに関してヒントを与えているにすぎません。要素に明示的に設定されたサイズや、あるウィジェットの特殊要件などの様々な理由から、フレキシビリティーは、正確に配分されない場合があります。
flex 属性は、HTML 要素を含むどの要素にも置くことができます。しかし、それがボックス内の要素に直接置かれた場合にのみ、意味をもつことができるということにすぎません。ボックスは、次のセクションで見ることにします。これは、たとえ flex を HTML 要素に置くことができるとしても、その要素がボックス要素以外の要素にある場合は、効果はないということです。
幾つか例を見ることにしましょう。
例 1:
<button label="Find" flex="1"/>
<button label="Cancel" flex="1"/>
例 2:
<button label="Find" flex="1"/>
<button label="Cancel" flex="10"/>
例 3:
<button label="Find" flex="2"/>
<button label="Replace"/>
<button label="Cancel" flex="4"/>
例 4:
<button label="Find" flex="2"/>
<button label="Replace" flex="2"/>
<button label="Cancel" flex="3"/>
例 5:
<html:div>
<button label="Find" flex="2"/>
<button label="Replace" flex="2"/>
</html:div>
例 6:
<button label="Find" flex="145"/>
<button label="Replace" flex="145"/>
|
flex に 0 を指定すると、flex 属性を設定しなかったことになります。これは、要素がフレキシブルではないということです。
「ファイル検索」ダイアログを垂直方向にリサイズすると、ボタンは、ウィンドウの高さに適したようにリサイズされることに気が付いたかもしれません。これは、ボタンすべてがウィンドウによって与えられた暗黙的な垂直方向のフレキシビリティーをもつためです。次のセクションで、これを変更することについて説明します。
flex の値が、時には、パーセントで指定されるのを見ることがあるかもしれません。これには特殊な意味は何もありません。パーセント記号がないものとして扱われるだけです。
(進む) 次に、'ボックスモデル' の詳細と、それを使ったレイアウトの仕方について学ぶことにしましょう。