「ファイル検索」ダイアログに要素を幾つか追加することにします。まず、Macintosh の Sherlock ユーティリティーのような、ファイルのサイズや日付といった他の情報を検索できるようにします。
<box orient="horizontal">
<menulist id="searchtype">
<menupopup>
<menuitem label="Name"/>
<menuitem label="Size"/>
<menuitem label="Date Modified"/>
</menupopup>
</menulist>
<spacer style="width: 10px;"/>
<menulist id="searchmode">
<menupopup>
<menuitem label="Is"/>
<menuitem label="Is Not"/>
</menupopup>
</menulist>
<spacer style="width: 10px;"/>
<textbox id="find-text" flex="1" style="min-width: 15em;"/>
</box>
|
ドロップダウンボックスを 2 つ、ダイアログに追加しました。それらを分けるため、個々の要素の間にスペーサーを加えています。こうしたスペーサーには、明示的に、それぞれ 10 ピクセルの幅を与えています。ウィンドウがリサイズされると、テキストボックスは大きくなりますが、他のコンポーネントは大きくならないことに気が付くでしょう。また、ラベルが削除されたことに気が付くはずです。
ウィンドウを垂直方向にリサイズしても、要素のサイズは変わりません。これは、それらの要素が水平方向のボックス内にあるためです。Find ボタンと Cancel ボタンがウィンドウの下部にあると、これはもっと適切かもしれません。これは、2 つの水平方向のボックスの間にスペーサーを加えることで、簡単に行なうことができます。
<spacer style="height: 10px"/>
<box orient="horizontal">
<menulist id="searchtype">
<menupopup>
<menuitem label="Name"/>
<menuitem label="Size"/>
<menuitem label="Date Modified"/>
</menupopup>
</menulist>
<spacer style="width: 10px;"/>
<menulist id="searchmode">
<menupopup>
<menuitem label="Is"/>
<menuitem label="Is Not"/>
</menupopup>
</menulist>
<spacer style="width: 10px;"/>
<textbox id="find-text" flex="1" style="min-width: 15em;"/>
</box>
<spacer style="height: 10px" flex="1"/>
<box orient="horizontal">
|
これで、ダイアログがリサイズされると、2 つのボタンはダイアログの下部に沿って移動します。最初のスペーサーは、タイトルラベルと検索条件要素 (search criteria element) の間に間隔を置きます。
これ以外にも、ダイアログに加えることのできる多くの装飾があります。一つは、Fewer ボタンと More ボタンを加えることでしょう。これによって、ユーザーは、追加の検索条件を指定できます。これらは、テキストボックスの下の右隅に表示されることになるでしょう。これは、検索条件をもつボックスの後とスペーサーの前に追加できます。これは、後で加えることにしましょう。
検索条件の周囲に境界があると、もっとよくなるでしょう。これを行なう方法は 2 つあります。CSS の border プロパティーを使うか、groupbox 要素を使うかです。最初の方法は、ボックス自身にスタイルを設定する必要があります。しかし、ここでは、2 番目の方法を使うことにしましょう。グループボックスには、ベベル付きのボックスを描画するという利点があるからです。
ボックスを groupbox に変更しましょう。
<groupbox orient="horizontal"> <label control="searchtype" value="Search Criteria"/> <html:menulist id="searchtype"> . . . <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> |
その他にも、外見上の問題があります。ボックスの下部に垂直方向に広がるように、グループボックスを広げることができるでしょう。また、要素をもっとうまく配置できるように、余白を変更することもできます。しかし、これは、開発の終盤にさしかかるまで、行なわないことにします。
このチュートリアルで要素の追加を続ける間、ボックスモデルとその機能の例をもっと見ていくことにします。
(進む) 次のセクションでは、プログレスメーターから始めて、その他の XUL 要素について学ぶことにします。