Primefaces TabView с составным компонентом в виде вкладок

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

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

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

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

резюме.xhtml

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

Но до сих пор мне не удалось реализовать составной компонент, который работает. Мой подход заключается в создании отдельного файла 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 будет рисовать отдельный компонент для каждого my:customTab-Tag. Таким образом, tabView не увидит, что внутри my:customTab есть p:tab. Что мне нужно сделать, чтобы TabView распознал p: tab внутри my: customTab ?


tabview jsf primefaces
person Kaschwenk    schedule 03.11.2014    source источник
comment
внедрение компонентов в компоненты Primefaces было бы действительно опасной задачей, вам нужно было бы перекомпилировать Primefaces с вашим кодом внутри пакета. Предложение @ktwo, вероятно, лучше / более эффективно - это то, что мы сделали, на самом деле мы даже использовали те же данные, только новые таблицы на некоторых вкладках. Также использовал TabModel для создания вкладок вместо того, чтобы перечислять их все 1 на 1.   -  person VeenarM    schedule 04.11.2014

Ответы (1)


arrow_upward
1
arrow_downward 

    <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} может быть целым bean-компонентом или просто значением для таблицы данных (или вы также можете добавить дополнительные параметры)

person ktwo    schedule 03.11.2014