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">中打开面板而不重新整理整个页面。

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

Answer 1

您有两种可能性：

隐藏面板并在ajax请求后显示
放置一个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：在ajax请求后放置一个EmptyPanel并替换它

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);
    }
});

Answer 2

为要替换的div创建内容Panel对象：

 private Panel currentpanel = getHomePagePanel(); // fill it with any Panel you want.

您可以像这样替换“内容”面板：

private void changePanel() {
    Panel newpanel = getNewPanel(); // Or pass as arg to this function
    newpanel.setOutputMarkupId(true);
    currentpanel.replaceWith(newpanel);
    currentpanel = newpanel;
    target.add(currentpanel);
}

使用正确的面板在你的ajaxlink onSubmit中调用它来替换旧的面板。

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

2 个答案: