使用复合组件选项TabView作为选项卡

时间:2014-11-03 12:43:35

标签: jsf primefaces tabview

我想使用PrimeFaces TabView组件在标签中显示来自我们服务器的数据。我需要三个选项卡来显示三个具有不同数据的表。

如果我写的话,它会起作用:

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

我的问题是每个标签的dataTable逻辑或多或少相同。我不喜欢这种代码重复,所以我想创建一个像这样工作的自定义Tab:

summary.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将为每个我的:customTab-Tag绘制一个单独的组件。这样tabView就不会看到my:customTab中有一个p:tab。我需要做些什么才能使TabView识别我的:customTab中的p:选项卡?

2 个答案:

答案 0 :(得分: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}可以是整个bean,也可以只是数据表的值(或者您也可以添加更多参数)

答案 1 :(得分:0)

我也有同样的问题。页面之间的数据可以使用 @RequestScoped 传递,除非没有 ajax 请求。我想发表评论,但我不能。 I got it from here。 如果我错了,请纠正我。