2017-04-10 24 views
0

私はJSFとWebプログラミングの新機能ですが、私はprimefaces 6.0を使用していて、TopViewを持ってTabViewを開きます。 TOP MENUでオプションを選択するたびに、その選択されたオプションの内容でTabView上に新しいタブが開きます。メニューのオプションを選択して動的タブを選択します

1. Click on the menu button || 2. the selected tab opens || 3. The content is shown.

私が探していたが、それを行う方法を見つけませんでした。

ありがとう!

答えて

0

まず、<p:layout>コンポーネントを使用してページを分割し、タブでコンテンツを表示することをお勧めします。<ui:include>を使用することをお勧めします。hereを読むことができます。場合は、あなたがカスタムタブのクラスを作成したいと思い動的にタブを生成したいとのタブをループにJSTLの<c:forEach>を使用します。

<!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> 

注:
だからあなたのメインページは次のようになります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> rendered属性を使用してください。高度なイベント処理には、tabViewのカスタムイベント<p:ajax event="tabClose" listener="#{homeView.onTabClose}"/>を必ず使用してください。

関連する問題