Primefaces TabView with composite component as tabs

Question

I want to use a PrimeFaces TabView component to display data from our server in tabs. I need three tabs to display three tables with different data.

It works if I write:

<p:tabView>
  <p:tab>
    // <p:dataTable> logic comes here
  </p:tab>
  <p:tab>
    // and here
  </p:tab>
</p:tabView>

My problem is that the dataTable logic is more or less the same for every tab. I don't like this kind of code duplication, so I would like to create a custom Tab that works like this:

summary.xhtml

<p:tabView>
  <my:customTab dataToDisplay="#{myBean.dataSet1}">
  <my:customTab dataToDisplay="#{myBean.dataSet2}">
</p:tabView>

But up to now I have not suceeded in implementing a composite component that is working. My approach is to create a separate customTab.xhtml file with this code

customTab.xhtml

<ui:composition // namespace definitions
    ... >
  <composite:interface>
    <composite:attribute name="dataToDisplay" />
  </composite:interface>
  <composite:implementation>
    <p:tabView>
      // dataTable logic comes here
    </p:tabView>
  </composite:implementation>
</ui:composition>

But with this the tabView component does not show any tabs. This is probably the case because JSF will draw a separate component for every my:customTab-Tag. This way the tabView will not see that there is a p:tab inside the my:customTab. What would I have to do to make the TabView recognize the p:tab inside of my:customTab ?

injecting components into primefaces components would be a hazardous task indeed, you would need to recompile primefaces with your code inside there package. @ktwo suggestion is likely a better /more efficient one - It's what we did, in fact we even used the same data just new tables in some tabs. Also used a TabModel to do the tabs, instead of listing them all 1by1 — VeenarM
I also have the same problem. Data between pages can be passed using @RequestScoped unless there are no ajax requests. I wanted to comment but I couldn't. I got it from here. Please correct me if I am wrong. — K Akhil

ktwo ktwo · Accepted Answer · 2014-11-03T16:47:14

    <p:tabView>
      <p:tab>
          <ui:include src="datatabletemplate.xhtml">
             <ui:param name="data" value="#{data1}"/>
          </ui:include>
      </p:tab>
      <p:tab>
        <ui:include src="datatabletemplate.xhtml">
             <ui:param name="data" value="#{data2}"/>
          </ui:include>
      </p:tab>
      <p:tab>
         <ui:include src="datatabletemplate.xhtml">
             <ui:param name="data" value="#{data3}"/>
          </ui:include>
      </p:tab>
    </p:tabView>

I think this would be a quick and easy solution to the problem. Without custom components, #{data1} can be the whole bean or just the value for the datatable (or you can also add more parameters)

Primefaces TabView with composite component as tabs

1 Answers