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

第21回

リストボックスによる複数列表示

　このリストボックスは、HTMLの<select>タグによる一覧リストの表示とは明らかに違います。動作は同じようなもので、一覧からクリックして1行だけ（あるいは複数行）選択でき、クリックしたイベント処理をonSelectで行わせることもできます。

　しかし、少なくとも表示においては、<listbox>の表示は<table>タグによるテーブル表示と同じものといえます（mold="default"の場合）。先の例では1列のリストだけを表示しましたが、実は複数列の表示も簡単に作成できます。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>※TABBOX</label>
  <separator />
  <listbox width="250px" mold="default">
    <listitem label="支社名">
      <listcell label="東京" />
      <listcell label="大阪" />
      <listcell label="名古屋" />
    </listitem>
    <listitem label="前期売上">
      <listcell label="12345" />
      <listcell label="6789" />
      <listcell label="1010" />
    </listitem>
    <listitem label="後期売上">
      <listcell label="9876" />
      <listcell label="5432" />
      <listcell label="1010" />
    </listitem>
  </listbox>
  <separator /><separator />
</window>

<listcell>を用い、複数列のテーブルを表示したリストボックス

　ここでは、複数の列のデータを表のようにして表示しています。見れば分かるように、<listbox>と<listitem>の構造は同じですが、ここでは<listitem>の中にさらに<listcell>というタグが組み込まれています。

　これは、各列のデータを記述するためのもので、これを利用することで、1行を複数の列に分割し表示できるようになります。実際にやってみると、ヘッダーの部分などもまったく同じ表示になっており、表としてはのっぺりした感じになりますが、「クリックして選択できる表」を作りたい場合にはとても重宝できるでしょう。

グリッドによるテーブル作成

　多数のコンポーネントを配置するケースとして、もっとも多いのは「フォームのレイアウト」でしょう。いくつもの入力用コンポーネントをきれいに整列させるのに、<table>タグを使うことはよくあります。

　こうした「縦横にコンポーネントを整列させる」という場合に役立つのが<grid>です。これは、HTMLの<table>タグなどによるテーブル作成とほぼ同じようなレイアウトを提供しますが、<table>などよりずっときれいに表示されます。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>※入力フォームのレイアウト</label>
  <separator />
  <grid width="90%">
    <columns>
      <column label="タイトル" width="35%" />
      <column label="入力フィールド" />
    </columns>
    <rows>
      <row>
        <label>名前</label>
        <textbox width="98%" />
      </row>
      <row>
        <label>Eメール</label>
        <textbox width="98%" />
      </row>
      <row>
        <label>電話番号</label>
        <textbox width="98%" />
      </row>
    </rows>
  </grid>
  <separator /><separator />
</window>

<grid>によるレイアウト。表の形式でレイアウトするのに用いる

　簡単な入力フォームを<grid>でレイアウトしたサンプルです。<grid>では、ヘッダーと内容部分を設定できます。また内容の表示では、1行ごとに背景色が自動的に変更され非常に見やすくなります。<listbox>でも表は作成できましたが、こちらはヘッダーなども立体的になり、非常に表として見やすくなっています。

　この<grid>は、その中に<columns>と<rows>の2つのタグを持っています。<columns>は列情報のタグで、<column>タグで各列の設定を記述します。ここで用意したものがそのままヘッダーとして表示されるようになっています。

　<rows>は、<row>タグを使って各行の表示内容を記述します。この<row>内に配置したコンポーネントは、<columns>内に用意した<column>の列に1つずつはめこまれ、表示されます。

　ここでは、フォームのレイアウトサンプルとして作成したのでただ各項目を表示しているだけですが、<grid>は本格的な作表にも利用できます。<grid>には、サイズの自動調整やソート順を変更するための機能が用意されており、動的に表示順などを変更できる表を作ることができます。