さらに要素を追加する

それでは、ファイル検索ダイアログに要素を追加していきましょう。 最初に、ファイルのサイズや日付といった名前以外の情報でも検索できるようにしてみます。

<hbox>
  <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;"/>
</hbox>

ドロップダウンボックスを 2 つ、ダイアログに追加し、 それらの間隔をあけるために、要素の間にスペーサーを加えています。 これらのスペーサーには、明示的に 10 ピクセルの幅を設定しています。 この例のウィンドウをリサイズした場合には、テキスト入力欄は大きくなりますが、それ以外の構成要素は大きくならないことが確認できると思います。 また、ラベルが削除されたことにも気づいているかもしれません。

ウィンドウを垂直方向にリサイズしても、要素のサイズは変わりません。 これは、それらの要素が水平ボックス内にあるためです。 欲を言えば、Find ボタンと Cancel ボタンは、常にウィンドウの下辺に置かれるようにした方がいいかもしれません。 これは、2 つの水平ボックスの間にスペーサーを加えれば、簡単に実現できます。

<spacer style="height: 10px"/>
<hbox>
  <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;"/>
</hbox>

<spacer style="height: 10px" flex="1"/>

<hbox>

これで、ダイアログがリサイズされると、2 つのボタンはダイアログの下辺に沿うように移動するようになります。 最初の spacer は、タイトルラベルと検索条件を入力するための要素の間に間隔を置きます。

また、検索条件を入力する部分の周囲に境界線があると、さらに格好よくなるかもしれません。 これを実現するには、 CSS の border プロパティを使うか、groupbox 要素を使うかの 2 つの方法が利用できます。 最初の方法の場合、ボックス自身にスタイルを設定することが必要になります。 とりあえず、今回は 2 番目の方法を使うことにします。 グループボックスには、格好いい溝状スタイルの境界線を描画するという利点があるので、今回のテーマにふさわしいと思います。

ボックスを groupbox に変更しましょう。

<groupbox orient="horizontal">
  <caption label="Search Criteria"/>
  <menulist id="searchtype">
  .
  .
  .
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</groupbox>

これ以外にも、外見上の問題はまだあります。 ウィンドウを垂直方向に広げると、グループボックスが下部の方に広がってしまいます。 また、要素の配置を改善するために、余白の取り方を調整してもいいかもしれません。

このチュートリアルを通して、要素の追加は続いていきますので、 これ以降もさらなるボックスモデルとその特徴を示す例を見ることができるはずです。

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