p : tabView 구성 요소에서 탭을 동적으로 추가 및 제거하는 방법

Question

PrimeFaces <p:tab>을 동적으로 추가하려고합니다. 두 번째 탭을 추가하는 동안 나는 다음과 같은 예외가 점점 오전 :

"java.lang.IllegalStateException을 : 구성 요소 ID의 tab0 이미 뷰에서 발견되었습니다."

어떻게 해결할 수 있습니까?

여기

<h:form prependId="false"> 
    <p:tabView id="tabview" dynamic="true" cache="false" 
     binding="#{testBean.tabView}" 
     activeIndex="#{testBean.activeTab}" > 
     <h:commandButton value="Close" action="#{testBean.removeTab}"/> 
    </p:tabView> 
    <h:commandButton value="Add Tab" action="#{testBean.addTab}"/> 
</h:form> 

가 빈 코드 : 여기서

뷰 코드

동일한 ID가 새로운 탭 (UR 추가 할 것)에 대해 생성되고 있기 때문이다

public String addTab() { 
    String tabId="tab"+id; 
    System.out.println("Gen Id: "+tabId); 
    tab = new Tab(); 
    tab.setTitle("Title: "+tabId); 
    tab.setId(tabId); 

    System.out.println("Tab Id: "+tab.getId()); 
    tabView.getChildren().add(id,this.tab); 
    id++; 
    return "tabtest.jsf"; 
} 

public String removeTab() { 
    tabView.getChildren().remove(activeTab); 
    return "tabtest.jsf"; 
} 

Answer 1

. 이를 방지하려면, 모든 것이 바로보기에서 수행 할 수있는 경우 수동으로 구성 요소를 생성하지 마십시오 id

로

<p:tabView id="tabview_#{testBean.i}" dynamic="true" cache="false"binding="#{testBean.tabView}" 
     activeIndex="#{testBean.activeTab}" > 
     <h:commandButton value="Close" action="#{testBean.removeTab}"/> 
</p:tabView> 

Answer 2

에 변수를 추가합니다. 빈이 요청 범위보다 넓은 범위에 있으면이 구문은 실패합니다. 예 :

Binding attribute causes duplicate component ID found in the view 당신이 동적으로 <ui:repeat>/<h:dataTable> 같은 제정신 모델과 <p:tabView value="..." var="...">를 통해 탭을 채울 수있는 쇼케이스 예 "TabView with Model"를 따르십시오.

예. 이 컨트롤러

@ManagedBean 
@ViewScoped 
public class Bean implements Serializable { 

    private List<Tab> tabs; 

    @PostConstruct 
    public void init() { 
     tabs = new ArrayList<>(); 
    } 

    public void add() { 
     tabs.add(new Tab("tab" + tabs.size(), "some content")); 
    } 

    public void remove(Tab tab) { 
     tabs.remove(tab); 
    } 

    public List<Tab> getTabs() { 
     return tabs; 
    } 

} 

이 모델이보기

<h:form> 
    <p:tabView value="#{bean.tabs}" var="tab"> 
     <p:tab title="#{tab.title}"> 
      #{tab.content} 
      <p:commandButton value="Close" action="#{bean.remove(tab)}" update="@form" /> 
     </p:tab> 
    </p:tabView> 
    <p:commandButton value="Add Tab" action="#{bean.add}" update="@form" /> 
</h:form> 

는

public class Tab { 

    private String title; 
    private String content; 

    public Tab(String title, String content) { 
     this.title = title; 
     this.content = content; 
    } 

    public String getTitle() { 
     return title; 
    } 

    public String getContent() { 
     return content; 
    } 

}