Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Javaで軽快に使える「軽量フレームワーク」特集
~Apache Wicketで簡単Webアプリ作成(2)

第2回

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

 時代がライトウェイト言語へとシフトしつつある中、軽快に使えるフレームワークが次々登場してきました。本連載では、Javaで注目されている軽量フレームワークの中から注目株をピックアップし、概略を紹介します。第2回目の今回は、前回に引き続き「Apache Wicket」でシンプルな掲示板を作成しながら、さまざまな機能の使い方を説明します。

目次

はじめに

 本連載では「軽量フレームワーク(Lightweight Framework)」の中から注目株をピックアップし、その概略を紹介していこうと思います。第2回目となる今回は、前回に引き続きJavaの軽量フレームワーク「Apache Wicket」について説明していきます。

これまでの連載

 前回、Wicketを利用した基本的なプログラムの作成を行いましたが、フォームからテキストを送信して表示するといった程度のサンプルではWicketの醍醐味がなかなか実感できなかったのではないでしょうか。そこで今回は、もう少しさまざまな機能を組み合わせたサンプルを作ってみることにしましょう。今回利用するのは、次のような機能です。

  • アプリケーションで共通して保持されるデータと、ページで共通して保持されるデータの利用
  • 多数のデータを繰り返し表示する
  • データのページ処理
  • 入力した値のバリデーションチェック
  • 複数ページを用意した際のページ遷移
  • Ajaxを利用した非同期通信による表示の更新

 このぐらいのものを使ってみれば、Wicketの使い方もだいぶ分かってくることでしょう。では、今回はこれらの機能を使ったサンプルとして、簡単な「コメント掲示板」を作ってみます。名前とコメントを投稿すると、それを掲示板のように並べて表示するというものです。また、別ページからAjaxを利用して最新のコメントを表示する機能も作成してみましょう。

対象読者

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

アプリケーションクラスの定義

 作成するプロジェクトは、前回作成したWicSampleプロジェクトをそのまま再利用します。まずは、アプリケーションクラスから作成していきましょう。前回作成したWicSample.javaを次のように書き換えます。

package jp.tuyano;

import java.util.Calendar;

import org.apache.wicket.Page;
import org.apache.wicket.protocol.http.WebApplication;

public class WicSample extends WebApplication {
    private static String app_msg;

    public String getApp_msg() {
        return app_msg;
    }

    public void setApp_msg(String appMsg) {
        Calendar d = Calendar.getInstance();
        app_msg = "[" + d.getTime() + "] " + appMsg;
    }

    @Override
    protected void init() {
        super.init();
        this.getRequestCycleSettings().setResponseRequestEncoding("UTF-8");
        this.getMarkupSettings().setDefaultMarkupEncoding("UTF-8");
        this.setApp_msg("開始しました。");
    }

    @Override
    public Class<? extends Page> getHomePage() {
        return IndexPage.class;
    }

    @Override
    public String getConfigurationType() {
        return WebApplication.DEPLOYMENT;
    }
}

 ここでは、いくつか追加された機能があります。app_msgというprivateフィールドは、最後に投稿されたメッセージを保管しておくものです。また、これへのアクセサとしてgetApp_msgsetApp_msgというメソッドも用意しました。いくつか修正はありますが、基本的には難しいことはないので説明は無用でしょう。

IndexPageのテンプレート

 では、メインページとなるIndexPageを作成しましょう。まずはテンプレートとなるHTMLファイルからです。IndexPage.htmlを次のように作成しましょう。

<?xml version="1.0" encoding="UTF-8"?>
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:wicket="http://wicket.apache.org/">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Index Page</title>
        <style type="text/css">
        h1 {
            background-color: #CCAAFF;
            border-style: none none solid solid;
            border-width: 0px 0px 2px 5px;
            padding: 1px 5px 1px 5px;
            font-size: 14pt;
        }
        #feedback { text-color: #FF0000; }
        #navigate{ font-size: 10pt; font-weight: 700px; }
        </style>
    </head>
    <body>
        <h1 wicket:id="title">Wicket Sample</h1>
        <div wicket:id="error"></div>
        <form wicket:id="form1">
            <table>
            <tr><td>name:</td>
            <td><input type="text" wicket:id="Name" /></td></tr>
            <tr><td>comment:</td>
            <td><textarea wicket:id="Comment" rows="3" cols="30"></textarea></td></tr>
            <tr><td></td>
            <td><input type="submit" wicket:id="submit" value="送信" /></td></tr>
        </table>
        </form>
        <div id="navigate" wicket:id="navigate"></div>
        <a wicket:id="link">LINK</a>
        <div wicket:id="list">
            <hr />
            <span wicket:id="comment"></span>
        </div>
    </body>
</html>

 ここでは、入力フィールドとテキストエリアのあるフォームを用意してあります。その他に、各種の表示用のタグがいくつも用意されています。いずれもwicket:id属性を設定し、Wicketのコンポーネントを設定するよう設計されていることが分かります。


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

著者プロフィール

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

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

バックナンバー

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

もっと読む

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