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

问题描述：

我对JSF和Web编程有点新，我使用的是primefaces 6.0，并尝试打开TabView的TOP MENU。每次您在TOP MENU中选择一个选项时，都会在TabView上打开一个新选项卡，其中包含所选选项的内容。通过选择菜单上的选项动态选项卡

我正在寻找，但没有找到如何做到这一点。

谢谢你们！

答

对于初学者，我建议您使用<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>循环填充tabView。

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是选项卡的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}"/>进行高级事件处理。

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

相关推荐