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

[ トップ ] [ 編集 | 凍結 | 差分 | バックアップ | 添付 | リロード ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ] [ Trackback(345) ]

2021-08-032021
58.7% (214.4/365)
August
7.7% (2.4/31)
Week 31
20% (1.4/7)
Day 03 Tue
40.3% (9.6/24)

目次

FrontPage
・Chromebook
・Random
・機械学習
・さくらVPS
・Fedora13
・SuSe10
・Docker
・Ansible
・Java
・Scala
・Python
・Ruby
・Lisp
・Computer
・GIS
・HTML
・Culture
・Link

訪問者

total: 42316
today: 1
yesterday: 3
now: 12

更新

最新の10件

2021-08-03

Random Memorandum 2021Q2

2021-07-02

Random

2021-06-28

Random Memorandum 2021Q1

2021-06-24

2021-05-27

Win64 Windows 10 で、本体 JP106 Keyboard、USB US101/AX Keyboard

2021-05-18

k8s bcache

2021-05-17

k8s GitOps

2021-05-10

Sakura ドメイン名取得、Let's Encrypt ワイルドカード証明書

2021-05-07

Chromebook Crostini (Linux VM)

人気の10件

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 )

ソースコード †

<?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>

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 標準添付のモノが使われ、ブラウザの設定によって表示されるメッセージが変わる。

Java

public class HomePage extends WebPage {
  ...
  private FeedbackPanel feedback = new FeedbackPanel("msg");
  
  public HomePage(final PageParameters parameters) {
    
    add(feedback);
    
    add(form);
    ...

コンストラクタで、FeedbackPanel? を HomePage に add() する

日付入力チェックをする †

HTML

...
<span wicket:id="msg"> error message will be here </span>
<form wicket:id="f">
  ...
  Date : <input type="text" wicket:id="date" size="20"/>
  ...
  <input type="submit" value="POST"/>
</form>
...

HTMLの方は、普通の<input>

Java
```
public class HomePage extends WebPage {
  ...
  private Model mDate = new Model(new Date());
  ...
  public HomePage(final PageParameters parameters) {
    ...
    TextField txtDate = new TextField("date", mDate ,Date.class);
    txtDate.setRequired(true);
    form.add(txtDate);
    ...
```
- TextFiled? の引数に、Date.class を入れると、入力フィールドの内容は内部的に Date型になる。
- 指定できる型は、Converter が用意されているモノ
  http://people.apache.org/~tobrien/wicket/apidocs/org/apache/wicket/util/convert/IConverter.html
  - Boolean, Byte, Character, Date, Double, Float, Integer, Long, Short, SqlDate?, SqlTime?, SqlTimestamp? あたりが使えるっぽい
  - MaskConverter?, PatternDateConverter?, StyleDateConverter?, ZeroPaddingIntegerConverter? はどう使うんだろう？

必須チェックをする †

コンポーネントの必須チェックを使う
```
TextField txtSubject = new TextField("subject", mSubject);
txtSubject.setRequired(true);
form.add(txtSubject);
```
- コンポーネントに setRequired(true) を入れると、必須チェックが行われる

前の画面に戻れるようにするには？ †

訂正: setResponsePage?() に WebPage? の class を渡してやると、初回はインスタンスが作られ、二回目以降は初回にインスタンスされた WebPage? が使われるようだ。
- Wicket WebPageのインスタンス(画面遷移時の情報の受け渡し)?
~~HomePage から Result に遷移するときに、HomePage 自身を引数として引き渡す~~

~~HomePage.java~~

public class HomePage extends WebPage {
  ...
  private Form form = new Form("f") {
    @Override
    protected void onSubmit() {
      ResultPage result = new ResultPage((HomePage) this.getParent());
      setResponsePage(result);
    }
  };
  ...

~~ResultPage? では、引き渡された HomePage を保持しておき、前の画面に戻るときには、setResponsePage?() に設定する。~~

~~Result.java~~

public class ResultPage extends WebPage {
  private WebPage formerPage;
  private Form form = new Form("f") {
    @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);
  }
}

*1 Webアプリとしては当然の affordance だが、内部的には結構大変なことである

添付ファイル:

WicketInputExam2.png 1732件 [詳細]

WicketSelectMe.png 1858件 [詳細]

WicketButtonExam2.png 1656件 [詳細]

WicketFeedBackMsg.png 1661件 [詳細]

WicketInputExam1.png 1735件 [詳細]

WicketButtonExam1.png 1760件 [詳細]

Last-modified: 2008-01-21 (月) 02:40:04 (4943d)

Short-URL: https://at-sushi.com:443/pukiwiki/index.php?cmd=s&k=8d7782f973

ISBN10		ISBN13
		9784061426061