如何在Primefaces p：tabMenu中使用ui：insert

Question

I have a bro problem which I don't know how to solve. 我有一个兄弟问题，我不知道该如何解决。 I have this Primefaces p:tabMenu which is used to call tabs with lazy loading. 我有这个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>

I want to use the JSF tag ui:insert in order to call the tab's code. 我想使用JSF标签ui:insert来调用选项卡的代码。 How I can combine the ui:insert tag into the above code? 如何将ui:insert标记合并到上面的代码中？

Answer 1

I see 2 approaches here: 我在这里看到2种方法：

1) Use one page for each tab. 1）每个标签使用一页。 use the p:tabMenu component (available in primefaces 3.4). 使用p：tabMenu组件（在primefaces 3.4中可用）。 In this case, if user is viewing one tab and clicks on the second tab to display it, he will be redirected to another page. 在这种情况下，如果用户正在查看一个选项卡并单击第二个选项卡以显示它，则他将被重定向到另一页。
pros : if you want to navigate from another page to the second tab, it's easy since it's a different page (see cons in 2nd approach). 优点：如果要从另一个页面导航到第二个选项卡，这很容易，因为它是另一个页面（请参见第二种方法的缺点）。 also, each tab page is load fast because it only contains code for one tab. 同样，每个选项卡页面加载速度很快，因为它仅包含一个选项卡的代码。 you'll have a better separation of code. 您将更好地分离代码。
cons : if users goes to another tab, all data entered in current tab will be lost. 缺点：如果用户转到另一个选项卡，则在当前选项卡中输入的所有数据都将丢失。 also, changing from one tab to another is not so fast because there is navigation involved. 同样，从一个选项卡切换到另一个选项卡的速度不是很快，因为涉及导航。

this is the page for one tab (tab1.xhtml): 这是一个选项卡的页面（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>

this is the code for the other tab (tab2.xhtml): 这是另一个选项卡（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) The other approach is to have one page with p:tabView. 2）另一种方法是使用p：tabView一页。 in this case, all the tab contents go in the same page. 在这种情况下，所有选项卡内容都位于同一页面中。 you can use dynamic="true" attribute on p:tabView to render the tab contents on demand and accelerate page load. 您可以在p：tabView上使用dynamic =“ true”属性来按需呈现标签内容并加速页面加载。
pros : smoother transition from tab to tab (always stays on same page). 优点：从选项卡到选项卡的过渡更加流畅（始终位于同一页面上）。
cons : if you want to navigate directly to the 2nd tab for example, it's not so easy. 缺点：例如，如果您想直接导航到第二个选项卡，则不是那么容易。 so will have to use activeIndex attribute of tabView pointing to an attribute in the managed bean that handles the first tab, and still you'll be constructing the bean of the first tab when you actually don't need it. 因此，必须使用tabView的activeIndex属性指向处理第一个选项卡的托管Bean中的属性，并且当您实际上不需要它时，仍将构造第一个选项卡的Bean。

this is the code for the main page that contains the tab: 这是包含选项卡的主页代码：

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

and you'll need the pages for each tab (that is inserted into main page): tab1.xhtml: 并且您将需要每个选项卡的页面（已插入主页）：tab1.xhtml：

tab2.xhtml: tab2.xhtml：

Answer 2

I assume you want to share code between tabs? 我假设您想在标签之间共享代码？

I think you are staring yourself blind on the tabMenu component. 我认为您对tabMenu组件视而不见。 You do not need it's assistance to properly use templates here. 您不需要帮助来在此处正确使用模板。

Just: 只是：

Define a template 定义模板
Have pages use that template 让页面使用该模板

Those pages could then be tabs or whatever you want. 这些页面可以是选项卡，也可以是您想要的任何页面。

a proper structure could perhaps be to define tabs.xhtml 适当的结构可能是定义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>

Then for each tab you have: 然后，对于每个选项卡，您都有：

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

Note that this is just standard templating with JSF 2. Good luck 请注意，这只是使用JSF 2的标准模板。

如何在Primefaces p：tabMenu中使用ui：insert

问题描述

2 个解决方案

解决方案1
8 已采纳 2012-10-12 19:54:12

解决方案2
2 2012-10-10 19:52:16

如何在Primefaces p：tabMenu中使用ui：insert

问题描述

2 个解决方案

解决方案1 8 已采纳 2012-10-12 19:54:12

解决方案2 2 2012-10-10 19:52:16

解决方案1
8 已采纳 2012-10-12 19:54:12

解决方案2
2 2012-10-10 19:52:16