How to show modal window with image in Wicket

Question

I am trying to create modal window in Wicket that contains image (org.apache.wicket.markup.html.image.Image). As is stated in Wicket User Guide (https://wicket.apache.org/guide/guide/ajax.html):

The content of a modal window can be either another component or a page.

Image satisfies this condition:

class Image extends WebComponent -> class WebComponent extends Component

I tried it with Label (org.apache.wicket.markup.html.basic.Label) and it worked. When I did it with Image I got exception. Here is my Java and HTML code (logo.png is in the same package as .java and .html):

Java

// Modal window with Image
final ModalWindow mwImage = new ModalWindow("modalWindowWithImage");
PackageResourceReference imgRef = new PackageResourceReference(this.getClass(), "logo.png");
Image img = new Image(mwImage.getContentId(), imgRef);
mwImage.setContent(img);
add(mwImage);

add(new AjaxLink("imageLink") {
    @Override
    public void onClick(AjaxRequestTarget target) {
        mwImage.show(target);
    }
});

HTML

<a href="#" wicket:id="imageLink">image link</a>
<div wicket:id="modalWindowWithImage"></div>

Unexpected RuntimeException

Last cause: Component [content] (path = [30:modalWindowWithImage:content]) must be applied to a tag of type [img], not:  '<div wicket:id="content">' (line 0, column 0)

Here is generated HTML code:

<a href="javascript:;" wicket:id="imageLink" id="imageLink22">image link</a>
<div wicket:id="modalWindowWithImage" id="modalWindowWithImage25" style="display:none"><wicket:panel xmlns:wicket="http://wicket.apache.org">
    <div id="content26" style="display:none"></div>
</wicket:panel></div>

The exception description is self-explanatory: <img> tag is missing, but I could not find the way how to solve it and show modal window with image. I am using wicket.version 6.17.0. Thank you in advance.

score 3 · Accepted Answer · answered Oct 02 '14 at 14:35

You can only add a Image to a html tag of type <img>. You are trying to add it to a <div>. Just like you can only add a Link to <a> html tags. Best thing you can do here is create a Panel with the image and add that to your modal window

public class ImgPanel extends Panel {

    public ImgPanel(PackageResourceReference imgRef) {
        add(new Image("imgid", imgRef));
    }
}

with html

<html><body>
<wicket:panel>
    <img wicket:id="imgid" ... />
</wicket:panel>
</body></html>

Now add this panel to your modal window.

How to show modal window with image in Wicket

1 Answers1