こんにちは。キャスレーコンサルティング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をマスターして頂き、より楽に、よりシンプルにコーディングしていきましょう！
最後までご覧頂き、ありがとうございました。
