Wicket とりあえず画面遷移とフォームデータの受け取りをする

2022-06-252022
48% (175.4/365)
June
81.4% (24.4/30)
Week 25
77.6% (5.4/7)
Day 25 Sat
43.4% (10.4/24)

訪問者

total: 43149
today: 2
yesterday: 3
now: 3

↑

更新

MenuBar

ここでは、Wicket Hello Wicket で作った Quick Start ページをベースに、画面遷移とフォームデータの受け渡しを行う簡単なアプリケーションを作る

form と submit ボタンを作る
入力フィールドを作る
入力チェック
前の画面に戻れるようにするには？

form と submit ボタンを作る †

↑

HomePage.html に、form と submit ボタンを付け足す †

<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<title>Wicket Quickstart Archetype Homepage</title>
</head>
<body>

<form wicket:id="f">                                       <!-- ADD -->
  <strong>Wicket Quickstart Archetype Homepage</strong>
  <br/><br/>
  <span wicket:id="message">message will be here</span>
  <br/><br/>
  <input type="submit" value="POST"/>                      <!-- ADD -->
</form>                                                    <!-- ADD -->

</body>
</html>

form を追加する。form には、属性として、wicket:id="f" を設定する。
submit ボタンは普通のモノ。
<span wicket:id="message">message will be here</span> は、form に含まれる様にした。

↑

HomePage.java に、form と submit ボタンを付け足す †

package com.snail;

import org.apache.wicket.PageParameters;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;

public class HomePage extends WebPage {

  private static final long serialVersionUID = 1L;

  private Form form = new Form("f") {
    private static final long serialVersionUID = -1700095884500348972L;

    @Override
    protected void onSubmit() {
      ResultPage result = new ResultPage();
      setResponsePage(result);
    }
  };

  private Label lbl = new Label("message",
      "If you see this message wicket is properly configured and running");

  public HomePage(final PageParameters parameters) {

    add(form);

    form.add(lbl);
  }
}

form とラベルを private なフィールド変数に外出しする。(コンストラクタの中でインスタンス化しない)
form は、こんな感じに無名クラスを作る。
- onSubmit()に、フォームが submit された時の処理を書く
- 遷移先は、setResponsePage?(result); で指定する。
コンストラクタ( HomePage() )では、HomePage.html のタグ構造にあった形でオブジェクトの構造を作るようにする。
- wicket:id="message" を form 配下に置いたので、lbl は、form に add() する。
- form は、HomePage オブジェクト自身に add() する。
Swingの影響が濃いですなぁ～

↑

遷移先の ResultPage?.html と ResultPage?.java を作る †

今の時点では特に何もしていない。

Result.html

<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<title>Result Page</title>
</head>
<body>

Result Page

</body>
</html>

Result.java

package com.snail;

import org.apache.wicket.markup.html.WebPage;

public class ResultPage extends WebPage {
  private static final long serialVersionUID = -8680953158566804713L;

  public ResultPage() {
  }
}

↑

動かしてみる †

初期画面 (HomePage.java + HomePage.html)
ボタンを押すと (ResultPage?.java + ResultPage?.html) に遷移する

↑

入力フィールドを作る †

ボタンだけの webアプリケーションに、入力フィールドその他諸々を付け足して、一通りの機能を持った webアプリケーションを作ってみる。

↑

完成イメージ †

こんな感じの入力フォーム。テキストフィールド、コンボボックス、テキストエリアとボタンがある
POSTボタンを押すと確認画面に遷移する
今の段階では、Sure を押しても Cancel を押しても前の画面に戻る( 入力されている値は当然元に戻る*1 )

↑

ソースコード †

HomePage.html

<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<title>Wicket Examination Homepage</title>
</head>
<body>
<strong>Wicket Examination Homepage</strong>
<br/><br/>
<span wicket:id="msg"> error message will be here </span>
<form wicket:id="f">
  Subject : <input type="text" wicket:id="subject" size="35"/> 
  <br/><br/>
  Date : <input type="text" wicket:id="date" size="20"/> 
  Type : 
  <select wicket:id="type">
    <option>Example1</option>
    <option>Example2</option>
    <option>Example3</option>
  </select>
  <br/><br/>
  Article : <br/>
  <textarea wicket:id="article" rows="5" cols="40">
    article will be here
  </textarea>
  <br/><br/>
  <input type="submit" value="POST"/>
</form>

</body>
</html>

HomePage.java

package com.snail;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.apache.wicket.PageParameters;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.DropDownChoice;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextArea;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.Model;

public class HomePage extends WebPage {

  private static final long serialVersionUID = 3598788934381254916L;

  private Form form = new Form("f") {
    private static final long serialVersionUID = -1700095884500348972L;

    @Override
    protected void onSubmit() {
      ResultPage result = new ResultPage((HomePage) this.getParent());
      setResponsePage(result);
    }
  };

  private Model mSubject = new Model();

  private Model mType = new Model();
  
  private Model mDate = new Model(new Date());

  private Model mArticle = new Model();
  
  private FeedbackPanel feedback = new FeedbackPanel("msg");

  public HomePage(final PageParameters parameters) {
    
    add(feedback);

    add(form);
    
    TextField txtSubject = new TextField("subject", mSubject);
    txtSubject.setRequired(true);
    form.add(txtSubject);

    List<String> typeList = new ArrayList<String>();
    typeList.add("Diary");
    typeList.add("Book Review");
    typeList.add("Tech Memo");
    typeList.add("Diet");
    // If you want to set the Default Value of combo box,
    // write like following.
    //mType.setObject("Diary");
    DropDownChoice cmbType =new DropDownChoice("type", mType, typeList);
    cmbType.setRequired(true);
    form.add(cmbType);
    
    TextField txtDate = new TextField("date", mDate,Date.class);
    txtDate.setRequired(true);
    form.add(txtDate);

    TextArea txtArticle = new TextArea("article", mArticle);
    txtArticle.setRequired(true);
    form.add(txtArticle);
  }

  public Model getMSubject() {
    return mSubject;
  }

  public Model getMType() {
    return mType;
  }

  public Model getMDate() {
    return mDate;
  }

  public Model getMArticle() {
    return mArticle;
  }
}

ResultPage?.html

<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<title>Result Page</title>
</head>
<body>

<p>Are you sure you want to submit this post? </p>

Subject: <span wicket:id="subject">Subject will be here</span>
( <span wicket:id="type">Type will be here</span> )<br/>
Date: <span wicket:id="date">Date will be here</span><br/>
Article: <br/>
<textarea wicket:id="article" cols="40" rows="5" disabled="disabled">
  Article will be here
</textarea>
<br/><br/>
<form wicket:id="f">
  <input type="submit" value="sure"/>
  <input type="submit" value="cancel"/>
</form>

</body>
</html>

ResultPage?.java

package com.snail;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextArea;

public class ResultPage extends WebPage {
  private static final long serialVersionUID = -8680953158566804713L;
  private WebPage formerPage;
  private Form form = new Form("f") {

    private static final long serialVersionUID = 5522440160951241211L;

    @Override
    protected void onSubmit() {
      setResponsePage(formerPage);
    }
  };

  public ResultPage(HomePage page) {
    this.formerPage=page;
    add(new Label("subject",page.getMSubject()));
    add(new Label("type",page.getMType()));
    add(new Label("date",page.getMDate()));
    add(new TextArea("article",page.getMArticle()));
    add(form);
  }
}

↑

テキストフィールドを作る †

HTML

<form wicket:id="f">
  Subject : <input type="text" wicket:id="subject" size="35"/> 
  ...
  <input type="submit" value="POST"/>
</form>

テキストフィールドは、普通の input タグ
wicket:id="subject" で、wicket が識別するための名前を付ける

Java
```
public class HomePage extends WebPage {

  private Model mSubject = new Model();

  public HomePage(final PageParameters parameters) {
   
    ...

    add(form);
   
    TextField txtSubject = new TextField("subject", mSubject);
    txtSubject.setRequired(true);
    form.add(txtSubject);
    
    ...
  }
  
  public Model getMSubject() {
    return mSubject;
  }
```
- privateフィールドとして、Model mSubject を定義する
- HomePage のコンストラクタでインスタンス化する
  - HTML の wicket:id で指定した "subject" と、mSubject を引数にして TextField? を作る
  - setRequired(true) にすると必須項目になる
- formに、add()する
- 外部( 遷移先の WebPage? )から、値の取得・設定が出来るように getMSubject() を作る

↑

コンボボックスを作る †

HTML
```
<form wicket:id="f">
  ...
  Type : 
  <select wicket:id="type">
    <option>Example1</option>
    <option>Example2</option>
    <option>Example3</option>
  </select>
  ...
  <input type="submit" value="POST"/>
</form>
```
- これも普通の select タグ
- wicket:id="type" で wicket が識別するための名前を付ける
- 中身の <option> は、この HTML を表示したときに表示されるサンプル。(Wicket上で動くときには、プログラムによって置き換えられる)
  - デザイナーが、POHP(Pure Old HTML Page) を作って
  - プログラマが、wicket:id を付け足すことを前提としている。
  - HTML上の <option> は、いわゆる「紙芝居」で表示されるモノ。
Java
```
public class HomePage extends WebPage {
  ...
  private Model mType = new Model();
  ...
  public HomePage(final PageParameters parameters) {
    ...
    add(form);
    ...
    List<String> typeList = new ArrayList<String>();
    typeList.add("Diary");
    typeList.add("Book Review");
    typeList.add("Tech Memo");
    typeList.add("Diet");
    // If you want to set the Default Value of combo box,
    // write like following.
    //mType.setObject("Diary");
    DropDownChoice cmbType =new DropDownChoice("type", mType, typeList);
    cmbType.setRequired(true);
    form.add(cmbType);
    ...
  }
  
  ...
 
  public Model getMType() {
    return mType;
  }
  ...
}
```
- privateフィールドとして、Model mType を定義する
- HomePage のコンストラクタでインスタンス化する
  - HTML の wicket:id で指定した "type" と、mType、選択肢のリスト typeList を引数にして DropDownChoice? を作る
  - コンボボックスのデフォルト値を設定したい場合には、mType に setObject() する
  - デフォルト値を設定しないときには、「選択してください」という選択肢が出来る。この文言は、ブラウザの言語によって勝手に変わる。
  - setRequired(true) にすると必須項目になる。（「選択してください」のままだと入力エラーになる）
- formに、add()する
- 外部( 遷移先の WebPage? )から、値の取得・設定が出来るように getMType() を作る

↑

テキストエリアを作る †

HTML
```
<form wicket:id="f">
  ...
  Article : <br/>
  <textarea wicket:id="article" rows="5" cols="40">
    article will be here
  </textarea>
  <br/><br/>
  <input type="submit" value="POST"/>
</form>
```
- テキストエリアは、普通の <textarea> タグ
- wicket:id="article" で、wicket が識別するための名前を付ける
- タグ要素は、この HTML を表示したときに表示されるサンプル。(Wicket上で動くときには、プログラムによって置き換えられる)

Java

public class HomePage extends WebPage {
  ...
  private Model mArticle = new Model();
  ...
  public HomePage(final PageParameters parameters) {
    ...
    add(form);
    ...
    TextArea txtArticle = new TextArea("article", mArticle);
    txtArticle.setRequired(true);
    form.add(txtArticle);
  }
  ...
  public Model getMArticle() {
    return mArticle;
  }
}

基本的に、TextField と同じ

↑

入力チェック †

ここでは、簡単な入力チェックとメッセージの表示を行う。
複雑な入力検証を行ったり、エラー箇所を赤くしたり、エラーメッセージの設定は、あと( Wicket Validation?)で、

↑

エラーメッセージの表示領域 †

HTML
```
<span wicket:id="msg"> error message will be here </span>
```
- wicket:id="msg" を付けた <span>タグを付ける
- 型エラーや必須エラーのメッセージは、特に指定しなければ Wicket 標準添付のモノが使われ、ブラウザの設定によって表示されるメッセージが変わる。