3

我有一个兄弟问题，我不知道如何解决。我有这个 Primefacesp: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标签组合到上面的代码中？

4

2 回答 2

8

我在这里看到两种方法：

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:

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

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

于 2012-10-10T19:52:16.373 回答