Интерфейс TabView с составным компонентом как вкладки

Question

Я хочу использовать компонент PrimeView TabView для отображения данных с нашего сервера в виде вкладок. Мне нужно три вкладки для отображения трех таблиц с разными данными.

Это работает, если я пишу:

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

Моя проблема заключается в том, что DataTable логика более или менее то же самое для каждой вкладки. Я не люблю такого рода дублирования кода, поэтому я хотел бы создать пользовательскую вкладку, которая работает следующим образом:

summary.xhtml

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

Но до сих пор я не suceeded в реализации составной компонент, который работает. Мой подход заключается в создании отдельного файла customTab.xhtml с этим кодом

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> 

Но с этим компонентом TabView не показывает никаких вкладок. Вероятно, это так, потому что JSF будет рисовать отдельный компонент для каждого моего: customTab-Tag. Таким образом tabView не увидит, что есть вкладка p: внутри my: customTab. Что мне нужно сделать, чтобы TabView распознал вкладку p: tab внутри моего: customTab?

Answer 1

<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> 

Я думаю, что это было бы быстрым и легким решением проблемы. Без пользовательских компонентов # {data1} может быть целым компонентом или просто значением для datatable (или вы также можете добавить дополнительные параметры)