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

はじめに

　前回、ZKの基本的なコンポーネントについて説明しました。今回は、もう少し複雑なコンポーネントについて説明を行います。

　コンポーネントといっても、単純に「ある部品をそこに配置するだけ」といったものばかりではありません。例えば、JavaのSwingなどでは「コンテナ」がけっこう重要な役割を果たしています。コンテナは、「コンポーネントをまとめるためのコンポーネント」です。このコンテナに相当するものは、ZKにもいろいろと揃っています。

　また、コンポーネントの中には、データ表示に関するものもいろいろとあります。ZKにもそうしたコンポーネントがいくつかあります。この種のものは、いかにしてコンポーネントの記述とデータを切り離すか、ダイナミックなデータの更新をどう行うかが重要になります。今回は、「コンテナ」と「データを扱うコンポーネント」について説明します。

対象読者

• Javaで手ごろなフレームワークを探している技術者
• 最近のフレームワークをごくざっと理解しておきたい方
• Web開発の手法がどうも気に入らない、と常々考えているJavaプログラマ

レイアウトコンポーネント

　今回は、まずコンポーネントの配置（レイアウト）から説明していきます。前回、いくつかのコンポーネントを使ってみましたが、それらはすべて「ずらっと順番に並べる」というだけの配置でした。<separator/>で改行はできましたが、これではあまり複雑なレイアウトはできません。

　ZKには、レイアウトのためのコンポーネントというのも用意されています。これを利用することで、コンポーネントをレイアウトし、配置することが可能になります。では、もっとも基本的なレイアウト・コンポーネントである<borderlayout>から使ってみましょう。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <borderlayout width="100%" height="200px">
    <north>
      <label>North</label>
    </north>
    <east>
      <label>East</label>
    </east>
    <center>
      <label>Center</label>
    </center>
    <west>
      <label>West</label>
    </west>
    <south>
      <label>South</label>
    </south>
  </borderlayout>
</window>

<borderlayout>によるレイアウト、JavaのBorderLayoutそのままのレイアウトが作成される

　アクセスすると、ウインドウ内が5つのエリアに分けられ、それぞれにテキストが表示されます。このレイアウトは、AWTのBorderLayoutとまったく同じ分け方です。このように5つのエリアに整理することで、すっきりとコンポーネントを配置できます。

　それぞれのエリアは、<borderlayout>内に、<north>、<south>、<east>、<west>、<center>といったタグで配置します。これらは、常にすべて用意する必要はありません。例えば<west>、<east>を省略すれば、3列のエリアだけが表示されます。

BOXレイアウト

　いくつかのコンポーネントを一列に並べる場合には、「BOXレイアウト」と呼ばれるものを利用するのが良いでしょう。これは<box>というタグとして用意されています。この中に、縦横にコンポーネントを並べていく<hbox>、<vbox>といったタグを使ってコンポーネントを組み込んでいきます。

<?page title="Index Page"?>
<window title="Welcome to ZK!" border="normal" width="300px">
  <label>※BOXレイアウト</label>
  <separator />
  <box width="90%">
    <hbox>
      <label style="background-color:#DDF">hbox その１</label>
      <label style="background-color:#DDF">hbox その２</label>
      <label style="background-color:#DDF">hbox その３</label>
    </hbox>
    <hbox>
      <label style="background-color:#DDF">hbox その１</label>
      <label style="background-color:#DDF">hbox その２</label>
      <label style="background-color:#DDF">hbox その３</label>
    </hbox>
  </box>
  <separator /><separator />
</window>

<box>によるレイアウト。3×2でラベルが配置される

　ここでは、ラベルを横に3つ並べた<hbox>を2行配置してみました。<box>タグの中に<hbox>タグがあり、その中にさらに<label>タグが並べられているのが分かります。ここで使っている<hbox>は、中に組み込んだコンポーネントを横に並べて配置します。同様に、<vbox>タグを使うと、中に組み込んだコンポーネントを縦に配置することもできます。