こんにちは。キャスレーコンサルティングLS(リーディング・サービス)部の後藤です。
Webを「Javaで書きたい」「軽量なフレームワークに興味がある」といった皆様へ。
Apache Wicketをマスターしていただきたく、
今回は、Apache Wicketの機能のひとつである、Panel機能を紹介させて頂きます。
はじめに
Apache Wicketとは
Java Webアプリケーションのフレームワークです。
画面側のHTMLと、ロジック側のJavaの2つで、動的なWebアプリケーションを作成することができます。
「Apache Wicketって誰!?もっと仲良くなりたい!」という方は、
以下のリンク先もご参照頂けると、より深く知り合うことができます。
Apache WicketでHelloWorld!
Apache Wicketの継承
Panelはこうやって使う
複数の画面で、共通の表示項目がある場合に活躍します。
例として、以下のイメージ図のように、部署検索画面と組織図画面を作成しました。
共通で表示したい部署一覧を、Panelとして作成し、2つの画面に部署一覧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をマスターして頂き、より楽に、よりシンプルにコーディングしていきましょう!
最後までご覧頂き、ありがとうございました。