3

解決方法がわからない仲間の問題があります。p:tabMenu遅延読み込みでタブを呼び出すために使用されるこのPrimefacesがあります。

<p:tabMenu id="tabs" activeIndex="0" > 
    <p:menuitem value="tab1" url="/tab1.jsf" /> 
    <p:menuitem value="tab2" url="/tab2.jsf" /> 

</p:tabMenu>

ui:insertタブのコードを呼び出すためにJSFタグを使用したいと思います。ui:insertタグを上記のコードに組み合わせるにはどうすればよいですか？

4

2 に答える 2

8

ここに2つのアプローチがあります。

1）タブごとに1ページを使用します。p：tabMenuコンポーネント（primefaces 3.4で使用可能）を使用します。この場合、ユーザーが1つのタブを表示していて、2番目のタブをクリックして表示すると、別のページにリダイレクトされます。
長所：別のページから2番目のタブに移動する場合は、別のページであるため簡単です（2番目のアプローチの短所を参照）。また、各タブページには1つのタブのコードしか含まれていないため、読み込みが高速です。コードをより適切に分離できます。
短所：ユーザーが別のタブに移動すると、現在のタブに入力されたすべてのデータが失われます。また、ナビゲーションが含まれるため、あるタブから別のタブへの変更はそれほど速くありません。

これは1つのタブ（tab1.xhtml）のページです。

<h:body>
    <p:tabMenu activeIndex="0">  
        <p:menuitem value="Tab 1" url="/tab1.jsf" />  
        <p:menuitem value="Tab 2" url="/tab2.jsf" />  
    </p:tabMenu>
    <!-- content of tab1 goes here -->
</h:body>

これは他のタブ（tab2.xhtml）のコードです：

<h:body>
    <p:tabMenu activeIndex="1">  
        <p:menuitem value="Tab 1" url="/tab1.jsf" />  
        <p:menuitem value="Tab 2" url="/tab2.jsf" />  
    </p:tabMenu>
    <!-- content of tab2 goes here -->
</h:body>

2）もう1つのアプローチは、p：tabViewを使用して1つのページを作成することです。この場合、すべてのタブの内容が同じページに表示されます。p：tabViewのdynamic = "true"属性を使用して、タブのコンテンツをオンデマンドでレンダリングし、ページの読み込みを高速化できます。
長所：タブからタブへのスムーズな移行（常に同じページにとどまります）。
短所：たとえば、2番目のタブに直接移動したい場合、それはそれほど簡単ではありません。したがって、最初のタブを処理するマネージドBeanの属性を指すtabViewのactiveIndex属性を使用する必要があります。それでも、実際には必要ない場合は、最初のタブのBeanを作成します。

これは、タブを含むメインページのコードです。

<h:body>
    <p:tabView dynamic="true">
        <p:tab id="tab1" title="Tab 1" >
            <ui:include src="tab2.xhtml" />
        </p:tabView>
        <p:tab id="tab2" title="Tab 2" >
            <ui:include src="tab2.xhtml" />
        </p:tab>
    </p:tabView>
</h:body>

そして、（メインページに挿入されている）各タブのページが必要になります：tab1.xhtml：

tab2.xhtml：

于 2012-10-12T19:54:12.530 に答える
2

タブ間でコードを共有したいと思いますか？

あなたはtabMenuコンポーネントを盲目的に見つめていると思います。ここでテンプレートを適切に使用するための支援は必要ありません。

ただ：

  1. テンプレートを定義する
  2. ページにそのテンプレートを使用させる

これらのページは、タブまたは任意のページにすることができます。

適切な構造はおそらくtabs.xhtmlを定義することかもしれません

<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:o="http://omnifaces.org/ui">


<h:head>
    <h:outputStylesheet name="style.css" library="css" />
    <div id="header">

        <ui:insert name="header">
            <title><ui:insert name="title">title</ui:insert></title>

        </ui:insert>
    </div>

</h:head>

<h:body>
    <div id="content">

        <ui:insert name="content">
        content here
        </ui:insert>
    </div>

</h:body>

</html>

次に、タブごとに次のようにします。

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
    xmlns:of="http://omnifaces.org/functions"
    xmlns:pe="http://primefaces.org/ui/extensions"
    template="/WEB-INF/templates/template.xhtml">

    <ui:define name="header">
    a specific tab header here
    </ui:define>
    <ui:define name="content">
    specific content here
    </ui:define>
    </ui:composition>

これはJSF2での標準的なテンプレートであることに注意してください。頑張ってください

于 2012-10-10T19:52:16.373 に答える