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：

Answer 2

我假设你想在标签之间共享代码？

我认为你正盯着tabMenu组件。在这里正确使用模板不需要帮助。

只需：

定义模板
让网页使用该模板

那些页面可以是标签或任何你想要的。

一个合适的结构也许可以定义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>

请注意，这只是JSF 2的标准模板。祝你好运

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

2 个答案: