Wicket メッセージ表示するだけのModalWindow

Wicket

Wicket の ModalWindow 単純なものを普遍的にしようとするとあらゆる場面を思い浮かべてしまい逆に難しい。
メッセージ表示だけあるいは、confirm の ModalWindow 、使い回せるものを考えた。
以前、confirm は考えて、yipuran-wicketcustom にも入れたがあれはダメだ、Java8 になる前に考えたもので使いにくい。
今回は、単純なメッセージ表示だけの ModalWindow

ModalWindow として生成するための Wicket-Panel の Javaコード

import java.util.Optional;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormSubmitBehavior;
import org.apache.wicket.core.util.string.JavaScriptUtils;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
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.Button;
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.danekja.java.util.function.serializable.SerializableConsumer;
import org.yipuran.wicketcustom.function.SerialThrowableConsumer;
/**
 * MessageModalPanel
 */
public class MessageModalPanel extends Panel{

   /**
    * コンストラクタ.
    * @param id content Wicket-ID
    * @param model メッセージ格納 Model
    * @param SerializableConsumer モーダルコンテンツの CLOSEボタン実行時に実行する Consumer
    */
   public MessageModalPanel(String id, IModel<String> model, SerializableConsumer<AjaxRequestTarget> consumer){
      super(id, model);
      queue(new Form<Void>("form"));
      queue(new Label("message", Optional.ofNullable(model.getObject()).orElse("")));
      queue(new Button("close").add(AjaxFormSubmitBehavior.onSubmit("click", SerialThrowableConsumer.of(t->{
         consumer.accept(t);
         ModalWindow.closeCurrent(t);
      }))));
   }
   @Override
   protected void onAfterRender(){
      super.onAfterRender();
      JavaScriptUtils.writeJavaScript(getResponse(), "setTimeout('sizefitMessageModal();', 100);" );
   }
   @Override
   public void renderHead(IHeaderResponse response){
      super.renderHead(response);
      response.render(CssHeaderItem.forReference(
         new CssResourceReference(MessageModalPanel.class, "message-modal.css")));
      response.render(JavaScriptHeaderItem.forReference(
         new JavaScriptResourceReference(MessageModalPanel.class, "message-modal.js")));
   }
}

これのＨＴＭＬ　MessageModalPanel.html

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<body>
   <wicket:panel>
      <form wicket:id="form" action="post">
         <section class="modal-panel">
            <div class="modal-panel-content">
               <ul>
                  <li><span wicket:id="message">メッセージ</span></li>
                  <li><button wicket:id="close" type="button">CLOSE</button></li>
               </ul>
            </div>
         </section>
      </form>
   </wicket:panel>
</body>
</html>

ＣＳＳソース：message-modal.css 

@charset "UTF-8";
/**
 * message-modal.css
 */
.modal-panel{
   display: flex;
   align-items: center;
   justify-content: center;
}
.modal-panel-content{
   width: auto;
   display: flex;
   align-items: center;
   justify-content: space-around;
}
.modal-panel-content li{
   list-style-type: none;
   white-space: nowrap;
   margin: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

サイズ調整している message-modal.js

var sizefitMessageModal = function(){
   $('.w_content_container').css("height", $('.modal-panel-content ul').outerHeight(true) + "px" );
   $('.wicket-modal').css("width", $('.modal-panel-content ul').outerWidth(true) + 22 + "px" );
};

CSS も JS も、Panel の renderHead で読み込ませる。

使用側 Javaコード

final ModalWindow window = new ModalWindow("message_window").setResizable(true).setAutoSize(true);
queue(window);
queue(new Button("view").add(AjaxEventBehavior.onEvent("click", target->{
    window.setContent(new MessageModalPanel(window.getContentId(), Model.of("Message"), t->{
         // close action
    }));
    window.show(target);
})));