はじめに
前回、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>
アクセスすると、ウインドウ内が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>
ここでは、ラベルを横に3つ並べた<hbox>を2行配置してみました。<box>タグの中に<hbox>タグがあり、その中にさらに<label>タグが並べられているのが分かります。ここで使っている<hbox>は、中に組み込んだコンポーネントを横に並べて配置します。同様に、<vbox>タグを使うと、中に組み込んだコンポーネントを縦に配置することもできます。
