在<div>中动态加载Wicket面板

Question

在我目前的Wicket应用程序中,我目前在用户点击一个菜单项后进行全页重新加载.我想将此更改为仅重新加载必要的Panel.

我目前在做什么:

我有一个BasePage.html包含菜单项和一些静态内容:

<li><a wicket:id="home" href="#">Home</a></li>
<li><a wicket:id="user" href="#">User</a></li>

<!-- and so on ->

<div class="panelarea">
    <wicket:child />
</div>

和我的(摘要)BasePage.java:

add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        setResponsePage(new HomePage());
    }
});
//etc

我的HomePage.html:

<wicket:extend>
    <span wicket:id="homePanel"></span>
</wicket:extend>

我HomePage.java(以及所有其他页面)然后添加Panel:

add(new HomePanel("homePanel"));

而不是setResponsePage()我想在<div class="panelarea">没有重新渲染整个页面的情况下打开Panel .

任何人都可以给我一个提示吗？

Answer 1

你有两种可能性:

1. 隐藏面板并在ajax请求后显示它
2. 放置一个EmptyPanel并在ajax请求后替换它

在这两种情况下,您都必须在标记中放置一个占位符标记,包括输出标记

<span wicket:id="homePanel"></span>

解决方案1:隐藏面板并在ajax请求后显示它

final Panel homePanel = new HomePanel("homePanel");
homePanel.setOuputMarkupPlaceholderTag(true);
homePanel.setOuputMarkupId(true);
homePanel.setVisible(false);
add(homePanel);
add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        homePanel.setVisible(true);
        // in Wicket 1.4 instead of target.add(Component)
        // target.addComponent(homePanel);
        target.add(homePanel);
    }
});

解决方案2:放置一个EmptyPanel并在ajax请求后替换它

final Panel emptyPanel = new EmptyPanel("homePanel");
emptyPanel.setOuputMarkupPlaceholderTag(true);
emptyPanel.setOuputMarkupId(true);
add(emptyPanel);
add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        Panel homePanel = new HomePanel("homePanel");
        homePanel.setOuputMarkupPlaceholderTag(true);
        homePanel.setOuputMarkupId(true);
        // if your Page class is MyPage.class
        MyPage.this.addOrReplace(homePanel);
        // in Wicket 1.4 instead of target.add(Component)
        // target.addComponent(homePanel);
        target.add(homePanel);
    }
});