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

 

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

WicketValidationRed.png

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

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

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

FeedBackLabel?の作成

FeedBackLabel?の適用

RangeCheckExamPage?.html

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?));
と言うように、<span wicket:id="int?Label>...</span> に、FeedBackLabel? が展開されるようにした。

実行結果

WicketValidationRed.png
 

この画面の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


添付ファイル: fileWicketValidationRed.png 2574件 [詳細] filestylecss.png 2511件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2008-02-26 (火) 01:39:22 (6129d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=19650ac94b
ISBN10
ISBN13
9784061426061