こんにちは。キャスレーコンサルティングID(インテグレーション&デザイン)部の柳です。

Webを、「Javaで書きたい」「軽量なフレームワークに興味がある」といった皆様へ。
是非、Apache Wicketをマスターしていただきたいです。

それでは、Apache Wicketの機能のひとつである、Repeater機能を紹介させて頂きます。

「Apache Wicketって何!?どんなことができるの?」という方は、
以下のリンク先をご参照頂くと、より理解することができるかと思います。

Apache WicketでHelloWorld!
Apache Wicketの継承
Apache Wicket – Panelをマスターせよ –

Repeaterの使い方

Repeaterを使う場面としては、同じレイアウトに複数データを表示したい場合に活躍します。
例としては、以下のイメージ図のような、社員一覧画面などです。
社員番号、部署、職位、性別という同じレイアウトが並んでいます。

コーディングしてみましょう!~ Let’s Repeater ~

Wicketの画面は、枠組みを作るHTMLとロジックを書くJavaで構成されます。
それでは、複数データを表示するレイアウトを、作ってみましょう。

ソース
ListPage.html

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<style>
div {
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

table {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #444444;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #444444;
    padding: 10px;
}

.yellow {
    background-color: yellow;
}
</style>
<meta charset="utf-8" />
<title> ListPage</title>
</head>
<body>
    <div>
        <table>
            <tr class="yellow">
                <td>ID</td>
                <td>部署</td>
                <td>職位</td>
                <td>性別</td>
            </tr>
<!-- 繰り返し箇所 start -->							
            <tr wicket:id="repeat">
                <td><span wicket:id="id"></span></td>
                <td><span wicket:id="dep"></span></td>
                <td><span wicket:id="rank"></span></td>
                <td><span wicket:id="sex"></span></td>
            </tr>
<!-- 繰り返し箇所 end -->
        </table>
        <br />
        <div wicket:id="navigator"></div>
    </div>
</body>
</html>

ListPage.java
public class ListPage extends WebPage {

    private static final long serialVersionUID = 1L;

    public ListPage() {
        List<PersonBean> dataList = new ArrayList<PersonBean>();
        dataList = createDataList();

//Repeater系のwicketのAPIであるDataViewを使いました。他にはListViewもあります。
//配列であるdataList変数はListDataProviderクラスを使ってWicketで制御できるように変換しました。
        DataView<PersonBean> repeat = new DataView<PersonBean>("repeat", new ListDataProvider<PersonBean>(dataList)) {
            private static final long serialVersionUID = 1L;

//繰り返し実行するメソッドです。
            @Override
            protected void populateItem(Item<PersonBean> item) {
//配列から順番に取得したPersonBean情報はitem変数に格納されているのでgetModelObject()取得しました。
                PersonBean person = item.getModelObject();
                item.add(new Label("id", person.getId()));
                item.add(new Label("dep", person.getDep()));
                item.add(new Label("rank", person.getRank()));
                item.add(new Label("sex", person.getSex()));
            }
        };
//ページング処理、1ページに10個のデータを表示する。
        repeat.setItemsPerPage(10);
        add(repeat);
//wicketが提供するページングを使います。第2引数はDataViewであるrepeatです。
        add(new AjaxPagingNavigator("navigator", repeat));
    }

// 実際はDBからデータを取得することですが、今回はハードコーディングでデータを設定しました。
    private ArrayList<PersonBean> createDataList() {
        ArrayList<PersonBean> list = new ArrayList<PersonBean>();
        list.add(new PersonBean("10003248", "営業", "課長", "男"));
        list.add(new PersonBean("10003278", "開発", "社員", "女"));
        list.add(new PersonBean("10003348", "総務", "社員", "男"));
        list.add(new PersonBean("10004341", "人事", "課長", "女"));
        list.add(new PersonBean("10004987", "企画", "社員", "男"));
        list.add(new PersonBean("10005782", "企画", "社員", "男"));
        list.add(new PersonBean("10008711", "総務", "社員", "女"));
        list.add(new PersonBean("10008712", "営業", "社員", "男"));
        list.add(new PersonBean("10008730", "開発", "社員", "女"));
        list.add(new PersonBean("10008882", "企画", "社員", "男"));
        list.add(new PersonBean("10008942", "人事", "社員", "女"));
        list.add(new PersonBean("10009292", "営業", "社員", "女"));
        list.add(new PersonBean("10009498", "営業", "社員", "女"));
        list.add(new PersonBean("10009571", "開発", "社員", "女"));
        return list;
    }
}

ローカル環境で動かしてみましょう。

《実行結果》

終わりに

Apache WicketのRepeaterについて、少しでも伝わりましたでしょうか。

Repeater機能は、配列のデータを繰り返して同じレイアウトで表示することができます。
今回は、Labelしか使っておりませんが、Linkやbuttonといった他のタグでも対応することが可能です。

また、以前に技術ブログで紹介した、Apache WicketのPanelとの連携を行うと
一覧系画面を共通化することができ、レイアウトの一貫性が維持できるようになります。

なお、本ブログのソースで使用したページング処理については、
次回技術ブログでご紹介させて頂こうと思います。

Apache Wicketマスターになるまでの道のりは、まだまだ長いですが
Repeaterをマスターして頂き、より楽に、よりシンプルにコーディングしていきましょう!

最後までご覧頂き、ありがとうございました。

柳 曾根
CSVIT事業部 ID(インテグレーション&デザイン)部 柳 曾根
IT業界の4年目エンジニア。 Javaの開発をメインとして金融系システムに従事しています。 休日は映画館に行きます。