Javaで軽快に使える「軽量フレームワーク」特集
～クールなGUIをシンプルなスクリプトで作成するZK（2）

第21回

タブボックス

　いくつかの表示をタブで切り替えながら表示する「タブパネル」は、多くのプラットフォームで採用されています。これを実現するのが、<tabbox>というタグです。これは、タブの情報とそれぞれのタブに表示するパネルを設定することで、自動的に切り替えタブを持つパネルを作成できます。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>※TABBOX</label>
  <separator />
  <tabbox width="250px" height="100px">
    <tabs>
      <tab label="最初"/>
      <tab label="真ん中"/>
      <tab label="最後"/>
    </tabs>
    <tabpanels>
      <tabpanel>
        <label>最初のタブです。</label>
      </tabpanel>
      <tabpanel>
        <label>真ん中のタブです。</label>
      </tabpanel>
      <tabpanel>
        <label>最後のタブです。</label>
      </tabpanel>
    </tabpanels>
  </tabbox>
  <separator /><separator />
</window>

<tabbox>によるタブパネル

　ここでは3つのタブを用意してみました。タブをクリックすれば、表示が切り替わります。タグを記述するだけなので、ノンプログラミングで作成できることが分かるでしょう。

　<tabbox>は、内部に<tabs>と<tabpanels>という2つのタグを持っています。<tabs>は、タブの設定をまとめるもので、この中に<tab>タグとして表示するタブの情報を設定します。タブをクリックしたときに表示される内容を用意するのが<tabpanels>で、この中に<tabpanel>というタグを使って各タブ用の表示を作成します。<tabpanel>はコンテナであり、この中に自由にコンポーネントを配置できます。

moldによるアコーディオンボックス

　タブパネルと似たような役割を果たすもので、最近、Webなどで広く使われるようになったインターフェースに「アコーディオンパネル」があります。タイトルをクリックすると、アコーディオンのようにその項目の表示が広がって表示される、というものです。

　ZKには、アコーディオンパネルのための専用コンポーネントは用意されていません。しかし、実はタブボックスを使ってアコーディオンパネルを作ることができます。

<tabbox width="250px" height="200px" mold="accordion">

moldを変更し、アコーディオンにしたタブボックス

　先ほどの<tabbox>のタグを上のように修正してみてください。タブパネルの表示が、そのままアコーディオンパネルに変わります。ここでは「mold」という属性に"accordion"を指定しています。これだけでアコーディオンパネルを作ることができます。

　アコーディオンパネルとタブパネルは、「いくつかのタブがあり、タブをクリックして選択すると、そのタブの内容が表示される」という機能自体はまったく同じです。そのため、これは別のコンポーネントというより、「同じコンポーネントで、表し方が違っているだけ」と考えた方が自然でしょう。moldは、こうした「あるコンポーネントの、異なる見せ方」を示すためのものです。

2種類のリストボックス

　アコーディオンパネル以外にも、moldを利用するコンポーネントはあります。例えば、一覧リストを表示するための<listbox>というコンポーネントがありますが、これはmoldによって、HTMLのリストとして表現させることもできるようになります。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>※TABBOX</label>
  <separator />
  <listbox width="250px" mold="default">
    <listitem label="最初"/>
    <listitem label="真ん中"/>
    <listitem label="最後"/>
  </listbox>
  <separator />
  <listbox width="250px" mold="select">
    <listitem label="最初"/>
    <listitem label="真ん中"/>
    <listitem label="最後"/>
  </listbox>
  <separator />
</window>

moldを使って表示した2種類の<listbox>タグ

　これは、同じ<listbox>を、片方はmold="default"、もう一方はmold="select"に設定したものです。前者は後述する<grid>によるテーブル表示と同じような形でリスト表示され、後者はHTMLの<select>タグによるコンボボックスとして表示されます。moldによって、表現の仕方が変わっていることが分かるでしょう。

　<listbox>は、表示する項目を<listitem>というタグとして内部に用意します。これで、いくつかの選択項目を用意して選ぶインターフェイスが作成できます。多数の項目を選択するためのものとして覚えておきたいコンポーネントです。