如何使用 JSF 2.0 Facelets 在 XHTML 中包含另一个 XHTML？

小编典典

如何使用 JSF 2.0 Facelets 在 XHTML 中包含另一个 XHTML？

all

在 XHTML 页面中包含另一个 XHTML 页面的最正确方法是什么？我一直在尝试不同的方法，它们都不起作用。

阅读 85

2022-06-08

共1个答案

小编典典

`<ui:include>`

最基本的方式是<ui:include>。包含的内容必须放在<ui:composition>.

母版页的启动示例/page.xhtml：

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Include demo</title>
    </h:head>
    <h:body>
        <h1>Master page</h1>
        <p>Master page blah blah lorem ipsum</p>
        <ui:include src="/WEB-INF/include.xhtml" />
    </h:body>
</html>

包含页面/WEB- INF/include.xhtml（是的，这是整个文件，外部的任何标签<ui:composition>都是不必要的，因为它们无论如何都会被
Facelets 忽略）：

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h2>Include page</h2>
    <p>Include page blah blah lorem ipsum</p>
</ui:composition>

这需要打开/page.xhtml。请注意，您不需要在包含文件中重复<html>，否则会导致HTML
无效。<h:head>``<h:body>

您可以在<ui:include src>. 另请参阅如何通过导航菜单进行 ajax-refresh 动态包含内容？（JSF
SPA）。

`<ui:define>`/`<ui:insert>`

一种更高级的包含方法是 模板化
。这基本上包括相反的方式。主模板页面<ui:insert>应用于声明插入已定义模板内容的位置。使用主模板页面的模板客户端页面应该<ui:define>用来定义要插入的模板内容。

主模板页面/WEB-INF/template.xhtml（作为设计提示：页眉、菜单和页脚甚至可以是<ui:include>文件）：

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title><ui:insert name="title">Default title</ui:insert></title>
    </h:head>
    <h:body>
        <div id="header">Header</div>
        <div id="menu">Menu</div>
        <div id="content"><ui:insert name="content">Default content</ui:insert></div>
        <div id="footer">Footer</div>
    </h:body>
</html>

模板客户端页面/page.xhtml（注意template属性；同样在这里，这是整个文件）：

<ui:composition template="/WEB-INF/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <ui:define name="title">
        New page title here
    </ui:define>

    <ui:define name="content">
        <h1>New content here</h1>
        <p>Blah blah</p>
    </ui:define>
</ui:composition>

这需要打开/page.xhtml。如果没有<ui:define>，则将显示里面的默认内容<ui:insert>，如果有的话。

`<ui:param>`

您可以将参数传递给<ui:include>或<ui:composition template>通过<ui:param>。

<ui:include ...>
    <ui:param name="foo" value="#{bean.foo}" />
</ui:include>



<ui:composition template="...">
    <ui:param name="foo" value="#{bean.foo}" />
    ...
</ui:composition >

在包含/模板文件中，它将以#{foo}.
如果您需要将“许多”参数传递给<ui:include>，那么您最好考虑将包含文件注册为标记文件，以便您最终可以像这样使用它<my:tagname foo="#{bean.foo}">。

你甚至可以通过<ui:param>.

设计提示

不应该仅通过输入/猜测其 URL 即可公开访问的文件需要放置在/WEB-INF文件夹中，如上例中的包含文件和模板文件。

<ui:composition>和之外不需要任何标记（HTML 代码）<ui:define>。您可以放置任何内容，但 Facelets 将
忽略它们。把标记放在那里只对网页设计师有用。

HTML5 文档类型是近来推荐的文档类型，“尽管”它是一个 XHTML 文件。您应该将 XHTML 视为一种允许您使用基于 XML 的工具生成 HTML
输出的语言。

CSS/JS/图像文件可以作为动态可重定位/本地化/版本化资源包含在内。

您可以将 Facelets 文件放入可重用的 JAR 文件中。

有关高级 Facelets 模板的真实示例，请查看Java EE Kickoff App
源代码和OmniFaces
展示站点源代码src/main/webapp文件夹。

2022-06-08