こんにちは。キャスレーコンサルティングLS(リーディング・サービス)部の後藤です。
Webを「Javaで書きたい」「軽量なフレームワークに興味がある」といった皆様へ。
Apache Wicketをマスターしていただきたく、
今回は、Apache Wicketの機能のひとつである、Panel機能を紹介させて頂きます。
はじめに
Apache Wicketとは
Java Webアプリケーションのフレームワークです。
画面側のHTMLと、ロジック側のJavaの２つで、動的なWebアプリケーションを作成することができます。
「Apache Wicketって誰!?もっと仲良くなりたい!」という方は、
以下のリンク先もご参照頂けると、より深く知り合うことができます。
Apache WicketでHelloWorld!
Apache Wicketの継承
Panelはこうやって使う
複数の画面で、共通の表示項目がある場合に活躍します。
例として、以下のイメージ図のように、部署検索画面と組織図画面を作成しました。
共通で表示したい部署一覧を、Panelとして作成し、２つの画面に部署一覧Panelを追加します。
Let’s Panel
コーディングしましょう！
Wicketの画面は、枠組みを作るHTMLとロジックを書くJavaで構成されます。
まずは、部門Panelの作成(DepartmentPanel)から始めます。
HTML側では、Panel化して共通化したい部分に
<wicket:panel>〜</wicket:panel>タグを使います。
ソース
DepartmentPanel.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 以下、Panelの内容を記述する -->
<wicket:panel>
<table>
<tr>
<th>No</th>
<th>部署名</th>
</tr>
<tr>
<td>1</td>
<td>営業</td>
</tr>
<tr>
<td>2</td>
<td>販売部</td>
</tr>
<tr>
<td>3</td>
<td>開発部</td>
</tr>
</table>
</wicket:panel>
<!-- Panel終了 -->
</body>
</html>
DepartmentPanel.java
Java側では、Panelをextendsし継承します。
package com.casley;
// Panelをimport
import org.apache.wicket.markup.html.panel.Panel;
// Panel継承
public class DepartmentPanel extends Panel {
public DepartmentPanel(String id){
super(id);
}
}
OrganizationPage.html
続いて、組織図画面(OrganizationPage)です。
HTMLでは、Panelを挿入したい箇所のタグの中に、wicket:id=”PanelのWicket ID名を記述します。
また、今回はトップページに、戻るボタンも作成しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組織図画面</title>
</head>
<body>
<table>
<tr>
<td align="center">
<h2>本店</h2>
</td>
<td align="center">
<h2>支店</h2>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<th>No</th>
<th align="left">部署名</th>
</tr>
<tr>
<td>1</td>
<td>管理</td>
</tr>
<tr>
<td>2</td>
<td>企画部</td>
</tr>
<tr>
<td>3</td>
<td>情報システム部</td>
</tr>
</table>
</td>
<td>
<!-- 組織図画面で部署一覧を表示するPanelを挿入 -->
<span wicket:id="depPanel"></span>
<!-- Panel終了 -->
</td>
</tr>
</table>
<div>
<!-- トップページに遷移するボタンの作成 -->
<form wicket:id="returnHome">
<input type="submit" value="Return HomePage" />
</form>
</div>
</body>
</html>
OrganizationPage.java
Java側では、挿入するPanelのWicket ID(“depPanel”)を、addすることで
コンポーネントを、HTMLに追加することができます。
DepartmentPanelと、戻るボタンのWicket IDを設定し、addしました。
package com.casley;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
// Webページクラスは全てWebPageを継承
public class OrganizationPage extends WebPage {
private static final long serialVersionUID = 1L;
public OrganizationPage() {
// Wicket用のコンポーネントを組織図画面に追加
add(new DepartmentPanel("depPanel"));
add(returnHome);
}
// トップページへ遷移する処理
private Form returnHome = new Form("returnHome"){
@Override
public void onSubmit(){
setResponsePage(HomePage.class);
}
};
}
OrganizationSearchPage.html
部署検索画面(OrganizationSearchPage)も、組織図画面と同様に作成します。
Panelは、検索ボタンの下に挿入します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<span>キーワード <input type="text" name="keyWord"></span>
<span><input type="button" name="search" value="検索"></span>
</div>
<div>
<h2>支店の部署</h2>
</div>
<div>
<!-- 部署検索画面で部署一覧を表示するPanelを挿入 -->
<span wicket:id="depPanel"></span>
<!-- Panel終了 -->
</div>
<div>
<!-- トップページに遷移するボタンの作成 -->
<form wicket:id="returnHome">
<input type="submit" value="Return HomePage" />
</form>
</div>
</body>
</html>
OrganizationSearchPage.java
こちらも、組織図画面と同様に作成します。
package com.casley;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
// Webページクラスは全てWebPageを継承する
public class OrganizationSearchPage extends WebPage {
private static final long serialVersionUID = 1L;
// Wicket用のコンポーネントを部署検索画面に追加
public OrganizationSearchPage() {
add(new DepartmentPanel("depPanel"));
add(returnHome);
}
// トップページへ戻る処理
private Form returnHome = new Form("returnHome"){
@Override
public void onSubmit(){
setResponsePage(HomePage.class);
}
};
}
HomePage.html
HomePageには、組織図画面と組織図検索画面へ遷移するボタンを、作成しました。
Wicketの仕様として、タグの外側の部分は、Wicket IDで上書きされます。
従って、message will be hereの部分は、それぞれのWicket IDのメッセージ内容が表示されます。
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="utf-8" />
<title>Let's Panel</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Stylesheet" />
</head>
<body>
<!-- 部署検索画面への遷移ボタンを作成 -->
<div id="bd">
<h2>OrganizationSearchPage</h2>
<form wicket:id="organizationSearch">
<!-- それぞれのWicketIdの内容で上書きされる -->
<span wicket:id="OrganizationSearchMsg">message will be here</span>
<input type="submit" value="Go OrganizationSearch" />
</form>
<!-- 組織図画面への遷移ボタンを作成 -->
<h2>OrganizationPage</h2>
<form wicket:id="organization">
<!-- それぞれのWicketIdの内容で上書きされる -->
<span wicket:id="OrganizationMessage">message will be here</span>
<input type="submit" value="Go Organization" />
</form>
</div>
</body>
</html>
HomePage.Java
組織図画面、部署検索画面と同様に作成した、Wicket用のコンポーネントをトップページに追加していきます。
import org.apache.wicket.request.mapper.parameter.PageParameters;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.WebPage;
public class HomePage extends WebPage {
private static final long serialVersionUID = 1L;
public HomePage(final PageParameters parameters) {
super(parameters);
// Wicket用のコンポーネントを部署検索画面に追加
add(formOZser);
formOZser.add(ogzSerchMessage);
// Wicket用のコンポーネントを組織図画面に追加
add(formOZ);
formOZ.add(ogzMessage);
}
// 第一引数に「Wicket:id」第二引数に「表示したいテキスト」を指定し、メッセージを作成
// Wicket id : OrganizationSearchMsgのテキストを部署検索画面へ進みますへ上書き
private Label ogzSerchMessage = new Label("OrganizationSearchMsg","部署検索画面へ進みます");
// Wicket id : OrganizationMessageのテキストを組織図画面へ進みますへ上書き
private Label ogzMessage = new Label("OrganizationMessage", "組織図画面へ進みます");
// 部署検索画面へ戻る処理
private Form formOZser = new Form("organizationSearch"){
@Override
public void onSubmit(){
OrganizationSearchPage organizationSearchPage = new OrganizationSearchPage();
setResponsePage(organizationSearchPage);
}
};
// 組織画面へ戻る処理
private Form formOZ = new Form("organization"){
@Override
public void onSubmit(){
OrganizationPage organizationPage = new OrganizationPage();
setResponsePage(organizationPage);
}
};
}
ローカル環境で動かしてみよう
作成したWebページを、ローカル環境で動かしてみました。
環境は、下記の通りです。
OS : OS X El Capitan 10.11.6
IDE : Eclipse Neon.3 4.6.3
ビルドツール：Apache-Maven-3.5.3
FW : Apache Wicket 7.10
サーブレットコンテナ : Tomcat 8.5
HomePageから、部署検索画面と組織図画面へボタンを押下して、遷移します。
私の環境では、下記のURLでアクセスします。
URL : http://localhost:8080/myCasleyProject
部署検索ページ
URL : http://localhost:8080/myCasleyProject/wicket/page?1
支店の部署の下に、部門一覧Panelが挿入されています。
Panelに入力した部署名が、部署検索画面に表示されています。
組織図画面
URL : http://localhost:8080/myCasleyProject/wicket/page?3
ここでは、直接HTMLに入力した本店の部署と
部門一覧Panelを挿入した、支店の部署が表示されています。
共通の表示項目は、Panelを呼び出すだけで利用することができます。
終わりに
Apache WicketのPanelについて、少し詳しくなって頂けたでしょうか。
Panel機能は、共通の表示項目がある画面に、Panelをaddし、
HTMLのタグにWicket:IDを入れるだけで、簡単に使い回すことができます。
以前、弊社技術ブログで紹介した、Apache Wicketの継承(リンク)との違いは、
Panelを挿入するために継承を使わなくて良いので、配置場所を自由に決められる所にあります。
Apache Wicketマスターになるまでの道のりは、まだまだ長いですが
Panelをマスターして頂き、より楽に、よりシンプルにコーディングしていきましょう！
最後までご覧頂き、ありがとうございました。
