ここでは、Wicket 組み込みのValidator(範囲) で作ったアプリケーションを改修して、エラーメッセージを赤く表示するようにする。
こんなふうに、エラーメッセージの色を変えたい
</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">'0' は 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">'0' は 4.9E-324 以上にしてください。</span> </li><li class="feedbackPanelERROR" wicket:id="messages"> <span class="feedbackPanelERROR" wicket:id="message">'0' は -4.9E-324 以下にしてください。</span> </li> </ul> </wicket:panel></span>
<?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> (以下略)
li.feedbackPanelERROR { color: red } span.invalidField { color: red }
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); } }
<?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> (後略)
<span wicket:id="int1Label">最小値チェック</span>となる。
<span class="invalidField" wicket:id="int1Label">最小値チェック</span>と言うように class="invalidField" が追加される
li.feedbackPanelERROR { color: red } span.invalidField { color: red }
(略) 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?));
と言うように、<span wicket:id="int?Label>...</span> に、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">'0' は 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">'0' は 4.9E-324 以上にしてください。</span> </li><li class="feedbackPanelERROR" wicket:id="messages"> <span class="feedbackPanelERROR" wicket:id="message">'0' は -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> (後略)