前の投稿、Wicket メッセージ表示するだけのModalWindow - Oboe吹きプログラマの黙示録 に続いて、
Confirm を表示するもの。
Yes-No 、 OK-cancel これらどちらを左ー右にするか、Apple と Microsoft . Android 逆であるので
導入するシステムの納品先しだいになるので、left - right として指定するコードにしてある。
import java.util.Optional;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.core.util.string.JavaScriptUtils;
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.head.JavaScriptHeaderItem;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.request.resource.CssResourceReference;
import org.apache.wicket.request.resource.JavaScriptResourceReference;
import org.yipuran.wicketcustom.function.SerialThrowableConsumer;
確認メッセージモーダルウィンドウ.
public class ConfirmModalPanel extends Panel{
コンストラクタ.
@param id
@param model
@param left
@param right
@param leftConsumer
@param rightConsumer
public ConfirmModalPanel(String id, IModel<String> model, final String left, final String right
, final SerialThrowableConsumer<AjaxRequestTarget> leftConsumer
, final SerialThrowableConsumer<AjaxRequestTarget> rightConsumer){
super(id, model);
queue(new Label("message", Optional.ofNullable(model.getObject()).orElse("")));
queue(new Form<Void>("form"));
queue(new AjaxButton("left"){
@Override
public void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag){
replaceComponentTagBody(markupStream, openTag, left);
}
@Override
protected void onSubmit(AjaxRequestTarget target){
leftConsumer.accept(target);
ModalWindow.closeCurrent(target);
}
});
queue(new AjaxButton("right"){
@Override
public void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag){
replaceComponentTagBody(markupStream, openTag, right);
}
@Override
protected void onSubmit(AjaxRequestTarget target){
rightConsumer.accept(target);
ModalWindow.closeCurrent(target);
}
});
}
@Override
protected void onAfterRender(){
super.onAfterRender();
JavaScriptUtils.writeJavaScript(getResponse(), "setTimeout('sizefitConfirmModal();', 100);" );
}
@Override
public void renderHead(IHeaderResponse response){
super.renderHead(response);
response.render(CssHeaderItem.forReference(
new CssResourceReference(ConfirmModalPanel.class, "confirm-modal.css")));
response.render(JavaScriptHeaderItem.forReference(
new JavaScriptResourceReference(ConfirmModalPanel.class, "confirm-modal.js")));
}
}
ＨＴＭＬ ConfirmModalPanel.html
<html xmlns:wicket="http://wicket.apache.org">
<body>
<wicket:panel>
<form wicket:id="form">
<section class="comfirm-panel">
<div class="comfirm-content">
<ul>
<li><span wicket:id="message">メッセージ</span></li>
<li>
<table>
<tbody>
<tr>
<td>
<button wicket:id="left" type="button">Left</button>
</td>
<td>
<button wicket:id="right" type="button">Right</button>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
</section>
</form>
</wicket:panel>
</body>
</html>
confirm-modal.css
"UTF-8";
.comfirm-panel{
display: flex;
align-items: center;
justify-content: center;
}
.comfirm-content{
width: auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.comfirm-content ul{
margin: 0;
padding: 0;
}
.comfirm-content li{
list-style-type: none;
white-space: nowrap;
margin: 1rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.comfirm-content table{
border-collapse: separate;
border-spacing: 0.4rem;
}
.comfirm-content td{
padding: 0 2rem;
}
.comfirm-content button{
min-width: 3rem;
white-space: nowrap;
}
confirm-modal.js
var sizefitConfirmModal = function(){
$('.w_content_container').css("height", $('.comfirm-content ul').outerHeight(true) + "px" );
$('.wicket-modal').css("width", $('.comfirm-content ul').outerWidth(true) + 22 + "px" );
};
使用する Java コード
ModalWindow confirmWindow = new ModalWindow("confirmWindow").setResizable(false).setAutoSize(true);
confirmWindow.setWindowClosedCallback(new WindowClosedCallback(){
@Override
public void onClose(AjaxRequestTarget target){
}
});
queue(confirmWindow);
queue(new Button("_send").add(AjaxFormSubmitBehavior.onSubmit("click", target->{
Optional.ofNullable(item_Field.getModelObject()).ifPresent(e->{
String msg = e + " を削除してよろしいですか？";
confirmWindow.setContent(new ConfirmModalPanel(confirmWindow.getContentId()
, Model.of(msg), "Yes", "No",
t->{
},
t->{
}
));
confirmWindow.show(target);
});
})));
