SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

第21回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 注目の軽量フレームワークをフットワーク軽く取り上げていく本連載。今回は、JavaをベースにしたRIA開発のフレームワーク「ZK」の第2回として、コンポーネントをレイアウトするためのコンテナ類と、コンポーネントにおけるデータの扱いを中心に説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 前回、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>タグを使うと、中に組み込んだコンポーネントを縦に配置することもできます。

次のページ
タブボックス

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Javaで軽快に使える「軽量フレームワーク」特集連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5363 2010/08/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング