How to show a modal with an image in Wicket
I am trying to create a modal window in Wicket that contains an image (org.apache.wicket.markup.html.image.Image). As stated in the Wicket user guide ( https://wicket.apache.org/guide/guide/ajax.html ):
Modal content can be either another component or page.
The 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 an exception. Here is my Java code and HTML (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 the generated HTML:
<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 description of the exception is self-explanatory: the <img> tag is missing, but I couldn't find a way to resolve it and show a modal with an image. I am using wicket.version 6.17.0. Thank you in advance.
source to share
You can only add image to html type tag <img>
. You are trying to add it to <div>
. Just like you can add link to <a>
html tags . The best thing you can do here is create a panel with an image and add it to your modal
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.
source to share