Wicket のバリデーターの機能は豊富で迷うくらいだが、バリデーション結果エラー通知については、
見た目上、feedback のメッセージを入力ページに出す機能だけが提供されている。
これを好まない人たちもいるはずだ。
feedback メッセージを モーダルダイアログで出す方法はないか？
→ ある！
feedbackPanel クラスの ul の下、li を引っ張り出して、モーダルWindow の Panel に
貼り付けてしまえば良いことに気がついた。
モーダルWindow のHTMLソース
<wicket:panel>
<div>
<ul id="_feedback_ul"></ul>
</div>
<div align="center">
<form wicket:id="form">
<button wicket:id="close">CLOSE</button>
</form>
</div>
</wicket:panel>
これに対して、
$('#_feedback_ul').html($('ul.feedbackPanel').html());
を実行して、発生した feedback メッセージを持ってきて貼り付ける。Wicket が必ず
ul タグに、feedbackPanel クラスを付与しているのである。
そのままだと残ってしまうので。
$('ul.feedbackPanel').parent().html('');
を実行する。
（注意： jQuery 前提である）
つまり、以下のような モーダルWindow の Panel クラスを用意する。
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.MarkupStream;
import org.apache.wicket.markup.head.CssHeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.request.resource.CssResourceReference;
/**
* FeedbackModal
*/
public class FeedbackModal extends Panel{
public FeedbackModal(String id, AjaxRequestTarget target){
this(id, target, "close");
}
public FeedbackModal(String id, AjaxRequestTarget target, final String closebtnLabel){
super(id);
// 閉じるボタン
Form<Void> form = new Form<Void>("form");
form.add(new AjaxButton("close"){
@Override
protected void onSubmit(AjaxRequestTarget target,Form<?> f){
ModalWindow.closeCurrent(target);
}
@Override
protected void onError(AjaxRequestTarget target,Form<?> f){
}
@Override
public void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag){
replaceComponentTagBody(markupStream, openTag, closebtnLabel);
}
});
add(form);
target.appendJavaScript("$('#_feedback_ul').html($('ul.feedbackPanel').html());$('ul.feedbackPanel').parent().html('');");
}
@Override
public void renderHead(IHeaderResponse response){
super.renderHead(response);
response.render(CssHeaderItem.forReference(new CssResourceReference(FeedbackModal.class, "feedbackmodal.css")));
}
}
---------------------------------------------------------
feedbackmodal.css の内容は、以下のとおり。。
@CHARSET "UTF-8";
#_feedback_ul{
color: #ff0000;
}
---------------------------------------------------------
使用する Page クラス側は、
<div wicket:id="feedback"></div>
<div wicket:id="errorModal"></div>
が存在すること。
Page クラスでは、、
FeedbackPanel feedback = new FeedbackPanel("feedback");
feedback.setOutputMarkupId(true);
add(feedback);
// バリデーションエラー ModalWindow
final ModalWindow errorWindow = new ModalWindow("errorModal");
errorWindow.setTitle("入力エラー"); // ← タイトル
errorWindow.setAutoSize(false);
errorWindow.setCssClassName(ModalWindow.CSS_CLASS_GRAY);
/** ModalWindow が CLOSE する時に実行されるコールバックを定義。*/
errorWindow.setWindowClosedCallback(new ModalWindow.WindowClosedCallback(){
@Override
public void onClose(AjaxRequestTarget target){
}
});
add(errorWindow);
form.add(new AjaxButton("ajaxsubmit",form){
@Override
protected void onSubmit(AjaxRequestTarget target,Form<?> f){
// 正常時
}
@Override
protected void onError(AjaxRequestTarget target,Form<?> f){
// モーダル表示
target.add(f.getPage().get("feedback"));
errorWindow.setContent(new FeedbackModal(errorWindow.getContentId(), target, "閉じる"));
errorWindow.show(target);
}
});
あとは、Wicket バリデーション用の properties ファイルがあれば良い。
