Question

我是JSF和Web编程的新手，我正在使用primefaces 6.0并尝试使用TOP MENU打开TabView。每次在TOP MENU上选择一个选项时，在TabView上打开一个带有所选选项内容的新标签。

我在搜索，但没有找到怎么做。

谢谢你们！

Answer 1

对于初学者，我建议您使用<p:layout>组件来划分页面，并在标签中显示内容，我建议您使用<ui:include>来阅读here。
所以你的主页应该是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>

<body>
    <p:layout>
        <p:layoutUnit position="north">
            <!-- !!!!!!!!!! Menu goes here !!!!!!!!!!! -->
        </p:layoutUnit>
        <p:layoutUnit position="center" resizable="false">
            <p:tabView>
                <p:tab title="Title goes here">
                    <ui:include src="content" />
                </p:tab>
            </p:tabView>
        </p:layoutUnit>
    </p:layout>
</body>

</html>

注意：如果您想动态生成标签，则需要创建自定义标签类，并使用JSTL的<c:forEach>循环选项卡以填充标签视图。

xhtml：

<p:tabView>
    <c:forEach items="#{homeView.openTabs}" var="tab">
        <p:tab title="#{tab.title}" closable="true" rendered="#{tab.open}">
            <ui:include src="#{tab.content}"/>
        </p:tab>
    </c:forEach>
</p:tabView>

请注意openTabs是Tabs的ArrayList
自定义标签类：

public class Tab {

    private String title;
    private String content;
    private boolean open;

//Custom constructor, getters and setters...

提示：
使用<p:tab>呈现的属性来处理关闭和重新打开选项卡。请务必使用tabView的自定义事件<p:ajax event="tabClose" listener="#{homeView.onTabClose}"/>进行高级事件处理。

通过选择菜单上的选项动态选项卡

1 个答案: