2014-10-02 2 views
3

Я пытаюсь создать модальное окно в Wicket, которое содержит изображение (org.apache.wicket.markup.html.image.Image). Как указано в руководстве пользователя калиткой (https://wicket.apache.org/guide/guide/ajax.html):Как показать модальное окно с изображением в Wicket

Содержание модального окна может быть либо другой компонент или страницы.

изображение удовлетворяет это условие:

class Image extends WebComponent -> class WebComponent extends Component 

Я попробовал его с этикеткой (org.apache.wicket.markup.html.basic.Label), и она работала. Когда я сделал это с помощью Image, я получил исключение. Вот мой Java и HTML-код (logo.png находится в том же пакете, .java и .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> 

Неожиданное 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) 

Сгенерировано 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> 

Исключение описание самоочевидно: <img> тег отсутствует, но я не мог найти способ его решения и показать модальное окно с изображением. Я использую wicket.version 6.17.0. Заранее спасибо.

ответ

3

Вы можете добавить изображение в html-тег типа <img>. Вы пытаетесь добавить его в <div>. Так же, как вы можете только добавить ссылку на <a> html-теги. Лучшее, что вы можете сделать здесь создать панель с изображением и добавить, что к вашему модальное окно

public class ImgPanel extends Panel { 

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

с HTML

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

Теперь добавьте эту панель к вашему модальное окно.

+0

Спасибо, это помогло. – vitfo

Смежные вопросы