تحميل لوحات الويكيت ديناميكيا في <div>

Question

في تطبيق الويكيت الحالي ، أقوم حاليا بإعادة تحميل صفحة كاملة بعد أن ينقر المستخدم على عنصر قائمة واحد.أريد تغيير هذا لإعادة تحميل اللوحة الضرورية فقط.

ما أقوم به حاليا:

لدي 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 (وجميع الصفحات الأخرى) ثم يضيف لوحة:

add(new HomePanel("homePanel"));

بدلا من setResponsePage() أريد فتح اللوحة في <div class="panelarea"> دون إعادة عرض الصفحة بأكملها.

يمكن لأي شخص أن تعطيني تلميحا?

Answer 1

لديك احتمالان:

1. جعل لوحة مخفية وتبين أنها بعد طلب اياكس
2. ضع لوحة فارغة واستبدلها بعد طلب أجاكس

في كلتا الحالتين ، يجب عليك وضع علامة عنصر نائب في الترميز الخاص بك بما في ذلك ترميز الإخراج

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

الحل 1:جعل لوحة مخفية وتبين أنها بعد طلب اياكس

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:ضع لوحة فارغة واستبدلها بعد طلب أجاكس

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

قم بإنشاء كائن لوحة محتوى للشعبة التي تريد استبدالها:

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

استدعاء هذا داخل أجاكسلينك الخاص بك أونسوبميت مع اللوحة الصحيحة لاستبدال القديم مع.