<div>에서 Wicket 패널을 동적으로 로드하기

Question

현재 Wicket 애플리케이션에서는 사용자가 하나의 메뉴 항목을 클릭한 후 전체 페이지를 다시 로드합니다.필요한 패널만 다시 로드하도록 이를 변경하고 싶습니다.

내가 현재 하는 일:

나는 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. 패널을 숨기고 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);
    }
});

Answer 2

교체하려는 div에 대한 콘텐츠 패널 개체를 만듭니다.

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

다음과 같이 'content' 패널을 교체할 수 있습니다.

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 내에서 이를 호출하세요.