Wicket 検証エラー箇所の色を変える

2018-05-262018
39.8% (145.3/365)
May
81.7% (25.3/31)
Week 21
76.1% (5.3/7)
Day 26 Sat
33.3% (7.9/24)

訪問者

total: 11145
today: 1
yesterday: 4
now: 1

↑

更新

MenuBar

ここでは、Wicket 組み込みのValidator(範囲) で作ったアプリケーションを改修して、エラーメッセージを赤く表示するようにする。

エラーメッセージの色を変える
FeedbackPanel に表示される文字の色を変える
各項目の見出しラベルの色を変えたい
- FeedBackLabelの作成
- FeedBackLabelの適用
  - RangeCheckExamPage.html
  - RangeCheckExamPage.java
実行結果

エラーメッセージの色を変える †

こんなふうに、エラーメッセージの色を変えたい

↑

FeedbackPanel? に表示される文字の色を変える †

FeedbackPanel?("msg") から生成されるHTML(スクリーンショットのHTML)は、

</head>
<body>
<strong>Wicket Range Check Examination Page</strong>
<p align="right"><a href="?wicket:interface=:1:back::ILinkListener::" wicket:id="back">back to menu</a></p>
<span wicket:id="msg"><wicket:panel>
  <ul wicket:id="feedbackul">
    <li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">&#039;0&#039; は 3 以上にしてください。</span>
    </li><li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">0 は 2 以上 10 以下にしてください。</span>
    </li><li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">&#039;0&#039; は 4.9E-324 以上にしてください。</span>
    </li><li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">&#039;0&#039; は -4.9E-324 以下にしてください。</span>
    </li>
  </ul>
</wicket:panel></span>

となっている

従って、この HTML に li.feedbackPanelERROR を赤色にする CSS を適用すれば、FeedBackPanel? の文字を赤色にできる

RangeCheckExamPage?.html(com.snail.wicket.exam.validation.RangeCheckExamPage?.html)

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<link rel="stylesheet" href="./style.css" type="text/css">
<title>Wicket Range Check Examination Page</title>
</head>
<body>
<strong>Wicket Range Check Examination Page</strong>
<p align="right"><a wicket:id="back">back to menu</a></p>
<span wicket:id="msg"> error message will be here </span>
  (以下略)

style.css

li.feedbackPanelERROR { color: red }
span.invalidField { color: red }

Maven2 で開発するときには、style.css は、/src/main/webapp/ に格納する

↑

各項目の見出しラベルの色を変えたい †

↑

FeedBackLabel?の作成 †

基本戦略
- org.apache.wicket.Component#onComponentTag?(ComponentTag? tag) を override する
 - このメソッドは、HTMLテンプレートの を、この Component の内容で上書きするときに呼ばれる
- 引数の tag に適当な(スタイルシートの)クラス付け足してやって、そのクラスを赤く表示するような CSS を適用すればいい

FeedBackLabel?.java

package com.snail.wicket.exam;

import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.FormComponent;

public class FeedBackLabel extends Label {
  private static final long serialVersionUID = -2190124059204986011L;

  private FormComponent[] subjects;

  public FeedBackLabel(String id, String label,
    FormComponent... pSubjects) {
    super(id, label);
    this.subjects = pSubjects;
  }

  @Override
  public void onComponentTag(ComponentTag tag) {
    for (FormComponent subject : subjects) {
      if (!subject.isValid()) {
        tag.put("class", "invalidField");

        break;
      }
    }

    super.onComponentTag(tag);
  }
}

ここでは、org.apache.wicket.markup.html.basic.Label (Labelもorg.apache.wicket.Componentの子孫) を拡張して、コンストラクタで関連づけられた Component に入力エラーが有れば、invalidField というクラスを付け足すようにした。

↑

FeedBackLabel?の適用 †

↑

RangeCheckExamPage?.html †

com.snail.wicket.exam.validation.RangeCheckExamPage?.html

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:wicket="http://wicket.apache.org/">
<head>
<link rel="stylesheet" href="./style.css" type="text/css">
<title>Wicket Range Check Examination Page</title>
</head>
<body>
<strong>Wicket Range Check Examination Page</strong>
<p align="right"><a wicket:id="back">back to menu</a></p>
<span wicket:id="msg"> error message will be here </span>

(略)

<form wicket:id="f">
  <fieldset>
    <legend>Numeric Check</legend>
    <table border="0">
      <tr>
        <td><span wicket:id="int1Label">Minimum Value Check</span></td><td>:</td>
        <td><input type="text" wicket:id="int1" size="20" /></td>
        <td>Greater Equal Than <span wicket:id="int1Min">XX</span></td>
      </tr>
      <tr>
        <td><span wicket:id="int2Label">Maximum Value Check</span></td><td>:</td>
        <td><input type="text" wicket:id="int2" size="20" /></td>
        <td>Less Equal Than <span wicket:id="int2Max">XX</span></td>
      </tr>
      <tr>
        <td><span wicket:id="int3Label">Range Value Check</span></td><td>:</td>
        <td><input type="text" wicket:id="int3" size="20" /></td>
        <td>(<span wicket:id="int3Min">XX</span>～<span wicket:id="int3Max">YY</span>)</td>
      </tr>
      <tr>
        <td><span wicket:id="int4Label">Positive Value Check</span></td><td>:</td>
        <td><input type="text" wicket:id="int4" size="20" /></td>
        <td>Positive Value</td>
      </tr>
      <tr>
        <td><span wicket:id="int5Label">Negative Value Check</span></td><td>:</td>
        <td><input type="text" wicket:id="int5" size="20" /></td>
        <td>Negative Value</td>
      </tr>
    </table>
  </fieldset>

(後略)

見出しラベルを ... とし、後から FeedBackLabel? で値を埋めるように変更した。

int1Label にエラーがないときには

<span wicket:id="int1Label">最小値チェック</span>

となる。

int1Label にエラーがあるときには
```
最小値チェック
```
と言うように class="invalidField" が追加される

style.css

li.feedbackPanelERROR { color: red }
span.invalidField { color: red }

↑

RangeCheckExamPage?.java †

(略)

public class RangeCheckExamPage extends WebPage {

(略)

  public RangeCheckExamPage() {
    add(form);
    add(feedback);
    add(backLink);
    
    int1TextField.setRequired(true);
    int1TextField.add(new NumberValidator.MinimumValidator(
        RangeCheckExamVo.INT1_MIN));
    form.add(int1TextField);
    form.add(new Label(RangeCheckExamVo.INT1 + "Min",
        Integer.toString(RangeCheckExamVo.INT1_MIN)));
    
    form.add(new FeedBackLabel(RangeCheckExamVo.INT1 + "Label",
            "最小値チェック",int1TextField));

    int2TextField.setRequired(true);
    int2TextField.add(new NumberValidator.MaximumValidator(
        RangeCheckExamVo.INT2_MAX));
    form.add(int2TextField);
    form.add(new Label(RangeCheckExamVo.INT2 + "Max",
        Integer.toString(RangeCheckExamVo.INT2_MAX)));
    
    form.add(new FeedBackLabel(RangeCheckExamVo.INT2 + "Label",
            "最大値チェック",int2TextField));
    
    int3TextField.setRequired(true);
    int3TextField.add(new NumberValidator.RangeValidator(
        RangeCheckExamVo.INT3_MIN, RangeCheckExamVo.INT3_MAX));
    form.add(int3TextField);
    form.add(new Label(RangeCheckExamVo.INT3 + "Min",
        Integer.toString(RangeCheckExamVo.INT3_MIN)));
    form.add(new Label(RangeCheckExamVo.INT3 + "Max",
        Integer.toString(RangeCheckExamVo.INT3_MAX)));

    form.add(new FeedBackLabel(RangeCheckExamVo.INT3 + "Label",
            "範囲チェック",int3TextField));

    int4TextField.setRequired(true);
    int4TextField.add(NumberValidator.POSITIVE);
    form.add(int4TextField);

    form.add(new FeedBackLabel(RangeCheckExamVo.INT4 + "Label",
            "正の値チェック",int4TextField));

    int5TextField.setRequired(true);
    int5TextField.add(NumberValidator.NEGATIVE);
    form.add(int5TextField);
    
    form.add(new FeedBackLabel(RangeCheckExamVo.INT5 + "Label",
            "負の値チェック",int5TextField));
(略)

  }
}

form.add(new FeedBackLabel?(RangeCheckExamVo?.INT1 + "Label","最小値チェック",int1TextField?));
と言うように、... に、FeedBackLabel? が展開されるようにした。

↑

実行結果 †

この画面のHTMLソース

（前略）
</head>
<body>
<strong>Wicket Range Check Examination Page</strong>
<p align="right"><a href="?wicket:interface=:1:back::ILinkListener::" wicket:id="back">back to menu</a></p>
<span wicket:id="msg"><wicket:panel>
  <ul wicket:id="feedbackul">
    <li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">&#039;0&#039; は 3 以上にしてください。</span>
    </li><li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">0 は 2 以上 10 以下にしてください。</span>
    </li><li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">&#039;0&#039; は 4.9E-324 以上にしてください。</span>
    </li><li class="feedbackPanelERROR" wicket:id="messages">
      <span class="feedbackPanelERROR" wicket:id="message">&#039;0&#039; は -4.9E-324 以下にしてください。</span>
    </li>
  </ul>
</wicket:panel></span>
<form id="f5" action="?wicket:interface=:1:f::IFormSubmitListener::" method="post" wicket:id="f">
<div style="display:none"><input type="hidden" name="f5_hf_0" id="f5_hf_0" /></div>
	<fieldset>
		<legend>Numeric Check</legend>
		<table border="0">
			<tr>
				<td><span class="invalidField" wicket:id="int1Label">最小値チェック</span></td><td>:</td>
				<td><input name="int1" value="0" type="text" wicket:id="int1" size="20"/></td>
				<td>Greater Equal Than <span wicket:id="int1Min">3</span></td>
			</tr>
			<tr>
				<td><span wicket:id="int2Label">最大値チェック</span></td><td>:</td>
				<td><input name="int2" value="0" type="text" wicket:id="int2" size="20"/></td>
				<td>Less Equal Than <span wicket:id="int2Max">5</span></td>
			</tr>
			<tr>
				<td><span class="invalidField" wicket:id="int3Label">範囲チェック</span></td><td>:</td>
				<td><input name="int3" value="0" type="text" wicket:id="int3" size="20"/></td>
				<td>(<span wicket:id="int3Min">2</span>～<span wicket:id="int3Max">10</span>)</td>
			</tr>
			<tr>
				<td><span class="invalidField" wicket:id="int4Label">正の値チェック</span></td><td>:</td>
				<td><input name="int4" value="0" type="text" wicket:id="int4" size="20"/></td>
				<td>Positive Value</td>
			</tr>
			<tr>
				<td><span class="invalidField" wicket:id="int5Label">負の値チェック</span></td><td>:</td>
				<td><input name="int5" value="0" type="text" wicket:id="int5" size="20"/></td>
				<td>Negative Value</td>
			</tr>
		</table>
	</fieldset>
（後略）

Java#Wicket