如何使用ui:插入Primefaces p:tabMenu

Question

我有一个兄弟问题,我不知道如何解决.我有这个Primefaces p:tabMenu用于调用延迟加载选项卡.

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

</p:tabMenu>

我想使用JSF标记ui:insert来调用选项卡的代码.我如何将ui:insert标签组合到上面的代码中？

Answer 1

我在这里看到两种方法:

1)每个选项卡使用一页.使用p:tabMenu组件(在primefaces 3.4中可用).在这种情况下,如果用户正在查看一个选项卡并单击第二个选项卡以显示它,则他将被重定向到另一个页面.
专业人士:如果你想从另一个页面导航到第二个标签页面,那很简单,因为它是一个不同的页面(参见第二种方法中的缺点).此外,每个标签页都加载速度很快,因为它只包含一个标签的代码.你会有更好的代码分离.
缺点:如果用户转到另一个选项卡,则当前选项卡中输入的所有数据都将丢失.此外,从一个标签更改为另一个标签并不是那么快,因为涉及导航.

这是一个标签页(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)另一种方法是使用p:tabView创建一个页面.在这种情况下,所有选项卡内容都在同一页面中.您可以在p:tabView上使用dynamic ="true"属性来按需呈现选项卡内容并加速页面加载.
优点:从选项卡到选项卡的平滑过渡(始终保持在同一页面上).
缺点:例如,如果您想直接导航到第二个选项卡,那就不那么容易了.因此必须使用tabView的activeIndex属性指向托管bean中处理第一个选项卡的属性,并且当您实际不需要它时,您仍将构建第一个选项卡的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: