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