Question

我是Primefaces的新手，我想问任何想法如何在tabview内容中展示新页面？例如，我已经编写了这段代码

<p:tabView orientation="left" dynamic="true" cache="false" prependId="false" 
            style="height: 100%" id="mainTabView"  
            activeIndex="#{navigationController.model.mainTabSelectedIndex}">

            <p:ajax event="tabChange" listener="#{navigationController.onMainTabChange}" onstart="KTI.Globals.onMainTabChangeStart()" oncomplete="KTI.Globals.onMainTabChangeComplete()"/>

            <p:tab title="#{msg['tabs.title.playlist']}" id="tabPlaylists">
                <ui:include src="/sections/playlists/list.xhtml"/>
            </p:tab>
            <p:tab title="#{msg['tabs.title.workstations']}">
                <ui:include src="/sections/workstations/list.xhtml"/>
            </p:tab>
</tabView>

我想通过从标题的下拉列表中选择一个值，在内容中添加包含include的新页面。我是否应该考虑隐藏<p:tab>（我没有找到任何解决方案）或者我可以在选定值上以某种方式将我的页面附加到内容中？

Answer 1

如果要在现有选项卡中动态包含页面或动态添加包含页面的新选项卡，则必须注意ui:include在视图构建时工作，而primefaces组件标记在视图渲染时工作。因此，您还需要在构建时工作。非常重要的是要知道您的数据模型可能已经正确加载了第一次访问页面搞乱构建时操作（稍后如何正确初始化您的bean），除非您了解这些警告

以下示例还介绍了固定标签显示/隐藏用例和动态标签：

<p:tabView id="tabView">
            <p:tab title="Static 1" rendered="#{page.renderTab1}" >
                <ui:include src="tab1.xhtml"></ui:include>
            </p:tab>
            <p:tab title="Static 2" rendered="#{page.renderTab2}" >  
                <ui:include src="tab2.xhtml" />
            </p:tab> 
            <c:forEach var="includedTab" items="#{page.dynamicTabs}" varStatus="loop">
                <p:tab title="#{includedTab.title}">
                    <p:fragment id="tabContentWrapper">
                        <ui:include src="{includedTab.xhtmlPath}"></ui:include>
                    </p:fragment>
                </p:tab>
            </c:forEach>
            <p:ajax event="tabChange" listener="#{page.onTabChanged}"></p:ajax>
        </p:tabView>

其中#{page.dynamicTabs}是像这样的对象列表

public class IncludedTab {

  private String title;     // the title of your tab
  private String xhtmlPath; // somepath/page.xhtml

  public IncludedTab(String title, String xhtmlPath) {
    this.title = title;
    this.xhtmlPath = xhtmlPath;
  }

  public String getTitle() {
    return title;
  }

  public String getXhtmlPath() {
    return xhtmlPath;
  }

}

并且您的支持bean将与此类似

public class Page {

private List<IncludedTab> dynamicTabs;

public Page(){
    //you can prepare your tabs here
}

/*
 * since <ui:include> works at view build time
 * your chances to prepare your data are
 * 1 - your bean construction or
 * 2 - the first time jsf tries to get the data by calling #{page.dynamicTabs}
 */
public List<IncludedTab> getDynamicTabs(){
    //or here
    if(dynamicTabs==null){

        dynamicTabs = new ArrayList<Page.IncludedTab>();

        ...add your stuff here...
        dynamicTabs.add(new IncludedTab("yourTitle", "yourpath/yourpage.xhtml"));
    }
    return dynamicTabs;
}
}

一个非常重要的注意事项是，您还需要ajax更新完整的p:tabView以使新标签可见。如果您需要通过ajax更新单个选项卡的内容（优化以避免刷新整个tabView，取决于您的用例），您无法直接更新p:tab，因为它会破坏Primefaces javascript。在我的示例中，tabContentWrapper包含在内以此方式使用。

Primefaces tabView在内容中插入一个jsf页面下拉选择

1 个答案: