Apache Wicket Panelをマスターせよ | キャスレーコンサルティング株式会社

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

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

Apache Wicket – Panelをマスターせよ –