3

画像 (org.apache.wicket.markup.html.image.Image) を含む Wicket でモーダル ウィンドウを作成しようとしています。Wicket ユーザー ガイド ( https://wicket.apache.org/guide/guide/ajax.html ) に記載されているとおり:

モーダル ウィンドウのコンテンツは、別のコンポーネントまたはページのいずれかです。

画像は次の条件を満たす:

class Image extends WebComponent -> class WebComponent extends Component

Label (org.apache.wicket.markup.html.basic.Label) で試してみたところ、うまくいきました。Image でそれを行ったとき、例外が発生しました。これが私のJavaおよびHTMLコードです（logo.pngは.javaおよび.htmlと同じパッケージにあります）：

ジャワ

// 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>

予期しないランタイム例外

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 を使用しています。前もって感謝します。

4

1 に答える 1

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>

このパネルをモーダル ウィンドウに追加します。

于 2014-10-02T14:35:15.170 に答える