Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

第21回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/08/26 14:00

 注目の軽量フレームワークをフットワーク軽く取り上げていく本連載。今回は、JavaをベースにしたRIA開発のフレームワーク「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そのままのレイアウトが作成される
<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 その1</label>
      <label style="background-color:#DDF">hbox その2</label>
      <label style="background-color:#DDF">hbox その3</label>
    </hbox>
    <hbox>
      <label style="background-color:#DDF">hbox その1</label>
      <label style="background-color:#DDF">hbox その2</label>
      <label style="background-color:#DDF">hbox その3</label>
    </hbox>
  </box>
  <separator /><separator />
</window>
<box>によるレイアウト。3×2でラベルが配置される
<box>によるレイアウト

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 掌田 津耶乃(ショウダ ツヤノ)

    三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。 ※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開中。またGoogle+プロフィールはこちら。

バックナンバー

連載:Javaで軽快に使える「軽量フレームワーク」特集

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5