Dynamisches Laden von Wicket Panels in einem <div>

Question

In meiner aktuellen Wicket-Anwendung lade ich derzeit die gesamte Seite neu, nachdem der Benutzer auf einen Menüpunkt geklickt hat.Ich möchte dies ändern, um nur das erforderliche Panel neu zu laden.

Was ich derzeit mache:

Ich habe ein BasePage.html welches die Menüpunkte und einige statische Inhalte enthält:

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

und meine (Zusammenfassung) BasePage.java:

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

Mein HomePage.html:

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

Mein HomePage.java (und alle anderen Seiten) fügt dann das Panel hinzu:

add(new HomePanel("homePanel"));

Anstatt setResponsePage() Ich möchte das Panel im öffnen <div class="panelarea"> ohne die gesamte Seite neu zu rendern.

Kann mir jemand einen Hinweis geben?

Answer 1

Sie haben zwei Möglichkeiten:

1. Machen Sie Ihr Panel ausgeblendet und zeigen Sie es nach einer Ajax-Anfrage an
2. Platzieren Sie ein EmptyPanel und ersetzen Sie es nach einer Ajax-Anfrage

In beiden Fällen müssen Sie ein Platzhalter-Tag in Ihr Markup einschließlich des Ausgabe-Markups einfügen

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

LÖSUNG 1:Machen Sie Ihr Panel ausgeblendet und zeigen Sie es nach einer Ajax-Anfrage an

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

LÖSUNG 2:Platzieren Sie ein EmptyPanel und ersetzen Sie es nach einer Ajax-Anfrage

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

Erstellen Sie ein Content-Panel-Objekt für das Div, das Sie ersetzen möchten:

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

Sie können das Feld „Inhalt“ wie folgt ersetzen:

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

Rufen Sie dies in Ihrem Ajaxlink onSubmit mit dem richtigen Panel auf, um das alte zu ersetzen.