primefaces tabView different tab content with dynamic tabs

Question

I have a problem with tabView. The 1st tab should always display the same content (called search template which is identified with #{not curSearch.isClosable()}. All other tabs are search instances (identified with #{curSearch.isClosable()}

Here is the code:

<p:tabView id="searchTabViewId" var="curSearch" value="#{searchBL.searchInstances}"
  activeIndex="#{searchBL.activeTabIndex}" styleClass="searchTabView">

  <!-- search template tab -->
  <ui:include src="/icarchive/sections/search/firstSearchTab.xhtml">
     <ui:param name="curSearch" value="#{curSearch}" />
  </ui:include>

  <!-- search instances tabs -->
  <ui:include src="/icarchive/sections/search/searchInstanceTab.xhtml">
     <ui:param name="curSearch" value="#{curSearch}" />
  </ui:include>

</p:tabView>

Unfortunately there are methods on the 1st tabs curSearch object called which are used on 2nd and following tabs only. If I do not use the ui:insert it does not change anything. Anybody knows where is my fault?

Regards Oliver

Answer 1

This works:

<p:tabView id="searchTabViewId" styleClass="searchTabView" activeIndex="#{searchBL.activeTabIndex}">

  <!-- do the iteration over the search instances NOT in the tabView because this will not work with ui:include -->
  <c:forEach items="#{searchBL.searchInstances}" var="curSearch">

     <p:tab closable="#{curSearch.isCloseable()}">

        <f:facet name="title">
           <p:graphicImage library="images" name="search_tab.png" height="16" styleClass="tabImage"
              rendered="#{not curSearch.isCloseable()}" />
           <h:outputText value="#{curSearch.title}" />
        </f:facet>

        <!-- do not use 2 ui:includes here, the dynamic must be in the src attribute to get it work -->
        <ui:include
           src="#{curSearch.closeable ? '/sections/search/searchInstanceTab.xhtml' : '/sections/search/firstSearchTab.xhtml'}">
           <ui:param name="curSearch" value="#{curSearch}" />
        </ui:include>

     </p:tab>

  </c:forEach>

Answer 2

I had the same problem, only solution i found is wrap include in other component and clamp with render which one is displayed. For initial load if you have ids depending on content you will need to set id prefix so that it does not allow empty id fields:

<p:tabView id="tabsView" dynamic="true" cache="true"
           value="#{TabViewController.tabView.openedTabs}" var="tabDefinition" activeIndex="#{TabViewController.tabView.activeIndex}">
    <p:ajax event="tabClose" listener="#{TabViewController.onCloseTab}" update="tabsView"/>
    <p:ajax event="tabChange" update="tabsView"/>
    <p:tab id="tab#{tabDefinition.id}" title="#{tabDefinition.title}" closable="true" action="">
        <f:facet name="title">
            <h:outputText value="#{tabDefinition.title}"/>
        </f:facet>
        <p:outputPanel style="display:block" rendered="#{'dataTable'.equals(tabDefinition.type)}">
            <ui:include src="dataTable.xhtml">
                <ui:param name="dataTableName" value="#{tabDefinition.contentName}"/>
            </ui:include>
        </p:outputPanel>
        <p:outputPanel style="display:block" rendered="#{'form'.equals(tabDefinition.type)}">
            <ui:include src="form.xhtml">
                <ui:param name="formId" value="#{tabDefinition.id}"/>
                <ui:param name="formName" value="#{tabDefinition.contentName}"/>
            </ui:include>
        </p:outputPanel>
    </p:tab>
</p:tabView>