Can the Wicket modal window be customized?

M

4

5

I need to add a button to the title bar of a Wicket modal window. I can't find anything useful in the Wicket API that will help me. Is there any way to customize the title bar in this way?

Mcadoo answered 6/9, 2009 at 9:56 Comment(0)

W

3

According /org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js you can't modify modal window decorator by wicket api because modal window markup defined entirely in javascript. So as always you can select simple but bad way and replace modal.js by your own, or you can hardly true way changing modal window after show using js to modify span with class "w_captionText". Or may be (i'm not test it) you may define you customized code in Caption property and tell to wicket to not escape special html char's in this Caption. May be it helps.

Whirlpool answered 8/9, 2009 at 14:10 Comment(1)

If you went the simple way. What exactly would you do to override the modal.js? – Easting 27/6, 2011 at 0:47

H

7

You can achieve such kind of effect with help of CSS. Create your custom modal window (in case you wont to create your custom style) and specify css resource.

package org.ru5.test;

import org.apache.wicket.ResourceReference;
import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.markup.html.CSSPackageResource;
import org.apache.wicket.markup.html.resources.CompressedResourceReference;
import org.apache.wicket.model.IModel;

public class CustomModalWindow extends ModalWindow {
    private static final long serialVersionUID = 1L;

    private static ResourceReference CSS = new CompressedResourceReference(
            CustomModalWindow.class, "res/custom-modal.css");

    /**
     * Creates a new modal window component.
     * 
     * @param id
     *            Id of component
     */
    public CustomModalWindow(final String id) {
        super(id);
        init();
    }

    /**
     * Creates a new modal window component.
     * 
     * @param id
     *            Id of component
     * @param model
     *            Model
     */
    public CustomModalWindow(final String id, final IModel<?> model) {
        super(id, model);
        init();
    }

    private void init() {
        add(CSSPackageResource.getHeaderContribution(CSS));
    }

}

/org/ru5/test/CustomModalWindow.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
<body><wicket:panel><div wicket:id="content"></div></wicket:panel></body>
</html>

Everything you need:

/org/ru5/test/res/custom-modal.css

.headBtn{position: absolute; z-index: 20001; top: 2px; left: 200px;}

/org/ru5/test/TestPanelForTestWindow.html

....
<div class="headBtn">
<input type="button" value="ok">
</div>
....

You can try to override modal.js function or just make a trick with help of JS DOM. Hope this would help.

Holbrook answered 27/9, 2010 at 12:57 Comment(0)

W

3

According /org/apache/wicket/extension/ajax/markup/html/modal/res/modal.js you can't modify modal window decorator by wicket api because modal window markup defined entirely in javascript. So as always you can select simple but bad way and replace modal.js by your own, or you can hardly true way changing modal window after show using js to modify span with class "w_captionText". Or may be (i'm not test it) you may define you customized code in Caption property and tell to wicket to not escape special html char's in this Caption. May be it helps.

Whirlpool answered 8/9, 2009 at 14:10 Comment(1)

If you went the simple way. What exactly would you do to override the modal.js? – Easting 27/6, 2011 at 0:47

C

2

Bit of a hack, but works:

import org.apache.wicket.extensions.ajax.markup.html.modal.ModalWindow;
import org.apache.wicket.model.IModel;

public class FixedModalWindow extends ModalWindow {
  private static final long serialVersionUID = 1L;

  public FixedModalWindow(String id) {
    super(id);
    setResizable(false);
  }

  public FixedModalWindow(String id, IModel<?> model) {
    super(id, model);
    setResizable(false);
  }

  @Override
  public FixedModalWindow setResizable(boolean resizable) {
    // Cannot set resizable on the FixedModalWindow
    return this;
  }

  @Override
  public boolean isResizable() {
    return false;
  }

  @Override
  protected Object getShowJavascript()
  {
    // Hack in some JS to remove the onMove handlers
    StringBuffer showJS = new StringBuffer();
    showJS.append(" ");
    showJS.append((String) super.getShowJavascript());
    showJS.append("var popupWindow = Wicket.Window.get();\n");
    showJS.append("var nullHandler = function() {};\n");
    showJS.append("if(popupWindow != null) {\n");
    showJS.append("popupWindow.bind(popupWindow.caption, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.bottomRight, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.bottomLeft, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.bottom, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.left, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.right, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.topLeft, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.topRight, nullHandler);\n");
    showJS.append("popupWindow.bind(popupWindow.top, nullHandler);\n");
    showJS.append("}\n");
    return showJS.toString();
  }

}

Cameroncameroon answered 16/10, 2010 at 21:48 Comment(0)

S

1

How to hide close button in your modal window in wicket? We have found such a solution:

ModalWindow yourModal = new ModalWindow("yourModalID") {
        @Override
        public void show(AjaxRequestTarget pTarget) {
            super.show(pTarget);

            pTarget.appendJavascript(""//
                    + "var thisWindow = Wicket.Window.get();\n"//
                    + "if (thisWindow) {\n"//
                    + "$('.w_close').attr('style', 'display:none;');\n"//
                    + "}"//
            );
        }
}

Actually, you can insert whatever class from modal window, and change it in some way. Hope it helps someone :)

Stenography answered 18/4, 2014 at 6:55 Comment(0)

Recommended topics

Hot tags