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

时间：2021-10-24 20:09:47

What is the most correct way to include another XHTML page in an XHTML page? I have been trying different ways, none of them are working.

在XHTML页面中包含另一个XHTML页面的最正确方法是什么?我一直在尝试不同的方法，但都没有奏效。

2 个解决方案

#1

381  

<ui:include>

Most basic way is <ui:include>. The included content must be placed inside <ui:composition>.

最基本的方法是 。包含的内容必须放在 中。 包括>

Kickoff example of the master page /page.xhtml:

主页面/页面的Kickoff示例:

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

The include page /WEB-INF/include.xhtml (yes, this is the file in its entirety, any tags outside <ui:composition> are unnecessary as they are ignored by Facelets anyway):

包括页面/ web - inf /包括。xhtml(是的，这是完整的文件，任何 之外的标签都是不必要的，因为Facelets不管怎样都被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>

This needs to be opened by /page.xhtml. Do note that you don't need to repeat <html>, <h:head> and <h:body> inside the include file as that would otherwise result in invalid HTML.

这需要/page.xhtml打开。请注意，您不需要在include文件中重复、 和 ，否则会导致无效的html。

You can use a dynamic EL expression in <ui:include src>. See also How to ajax-refresh dynamic include content by navigation menu? (JSF SPA).

您可以在 中使用动态EL表达式。还看到如何ajax-refresh dynamic include content by navigation菜单吗?(JSF SPA)。

<ui:define>/<ui:insert>

A more advanced way of including is templating. This includes basically the other way round. The master template page should use <ui:insert> to declare places to insert defined template content. The template client page which is using the master template page should use <ui:define> to define the template content which is to be inserted.

更高级的方法包括模板。这基本上包括了相反的情况。主模板页面应该使用 来声明插入已定义模板内容的位置。使用主模板页面的模板客户端页面应该使用 定义要插入的模板内容。 插入>

Master template page /WEB-INF/template.xhtml (as a design hint: the header, menu and footer can in turn even be <ui:include> files):

主模板页面/ web - inf /模板。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><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>

Template client page /page.xhtml (note the template attribute; also here, this is the file in its entirety):

模板客户机页面/页。xhtml(注意模板属性;这里也是完整的文件):

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

This needs to be opened by /page.xhtml. If there is no <ui:define>, then the default content inside <ui:insert> will be displayed instead, if any.

这需要/page.xhtml打开。如果没有 ，则 中的默认内容将被显示出来，如果有的话。 定义>

<ui:param>

You can pass parameters to <ui:include> or <ui:composition template> by <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 >

Inside the include/template file, it'll be available as #{foo}. In case you need to pass "many" parameters to <ui:include>, then you'd better consider registering the include file as a tagfile, so that you can ultimately use it like so <my:tagname foo="#{bean.foo}">. See also When to use <ui:include>, tag files, composite components and/or custom components?

在包含/模板文件中，可以使用#{foo}。如果您需要将“许多”参数传递给 ，那么您最好考虑将include文件注册为tagfile，以便您最终可以像so 那样使用它。还请参见何时使用 、标记文件、复合组件和/或自定义组件? 包括>

You can even pass whole beans, methods and parameters via <ui:param>. See also JSF 2: how to pass an action including an argument to be invoked to a Facelets sub view (using ui:include and ui:param)?

您甚至可以通过

Design hints

The files which aren't supposed to be publicly accessible by just entering/guessing its URL, need to be placed in /WEB-INF folder, like as the include file and the template file in above example. See also Which XHTML files do I need to put in /WEB-INF and which not?

不应该通过输入/猜测其URL来公开访问的文件，需要放置在/WEB-INF文件夹中，如上面示例中的include文件和模板文件。还可以看到哪些XHTML文件需要放在/WEB-INF中，哪些不需要?

There doesn't need to be any markup (HTML code) outside <ui:composition> and <ui:define>. You can put any, but they will be ignored by Facelets. Putting markup in there is only useful for web designers. See also Is there a way to run a JSF page without building the whole project?

在 和 之外不需要任何标记(HTML代码)。您可以放置任何，但它们将被Facelets忽略。只对web设计人员有用。还有，有没有一种方法可以在不构建整个项目的情况下运行JSF页面? 定义> 复合>

The HTML5 doctype is the recommended doctype these days, "in spite of" that it's a XHTML file. You should see XHTML as a language which allows you to produce HTML output using a XML based tool. See also Is it possible to use JSF+Facelets with HTML 4/5? and JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used.

HTML5 doctype是目前推荐的doctype，“尽管”它是XHTML文件。您应该将XHTML视为一种允许您使用基于XML的工具生成HTML输出的语言。请参见是否可以在HTML 4/5中使用JSF+Facelets ?javascript支持2.2和HTML5，为什么XHTML还在使用。

CSS/JS/image files can be included as dynamically relocatable/localized/versioned resources. See also How to reference CSS / JS / image resource in Facelets template?

CSS/JS/图像文件可以作为动态重定位/本地化/版本化的资源包含在其中。请参见如何在Facelets模板中引用CSS / JS /图像资源?

You can put Facelets files in a reusable JAR file. See also Structure for multiple JSF projects with shared code.

您可以将Facelets文件放在可重用的JAR文件中。请参见具有共享代码的多个JSF项目的结构。

For real world examples of advanced Facelets templating, check the src/main/webapp folder of Java EE Kickoff App source code and OmniFaces showcase site source code.

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

#2

21  

Included page:

包括页面:

<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>

Including page:

包括页面:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • You start your included xhtml file with ui:composition as shown above.
  • 您可以使用ui来启动包含的xhtml文件:如上所示的组合。
  • You include that file with ui:include in the including xhtml file as also shown above.
  • 您将该文件与ui一起包含在包含xhtml文件中，如上所示。

#1

381  

<ui:include>

Most basic way is <ui:include>. The included content must be placed inside <ui:composition>.

最基本的方法是 。包含的内容必须放在 中。 包括>

Kickoff example of the master page /page.xhtml:

主页面/页面的Kickoff示例:

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

The include page /WEB-INF/include.xhtml (yes, this is the file in its entirety, any tags outside <ui:composition> are unnecessary as they are ignored by Facelets anyway):

包括页面/ web - inf /包括。xhtml(是的，这是完整的文件，任何 之外的标签都是不必要的，因为Facelets不管怎样都被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>

This needs to be opened by /page.xhtml. Do note that you don't need to repeat <html>, <h:head> and <h:body> inside the include file as that would otherwise result in invalid HTML.

这需要/page.xhtml打开。请注意，您不需要在include文件中重复、 和 ，否则会导致无效的html。

You can use a dynamic EL expression in <ui:include src>. See also How to ajax-refresh dynamic include content by navigation menu? (JSF SPA).

您可以在 中使用动态EL表达式。还看到如何ajax-refresh dynamic include content by navigation菜单吗?(JSF SPA)。

<ui:define>/<ui:insert>

A more advanced way of including is templating. This includes basically the other way round. The master template page should use <ui:insert> to declare places to insert defined template content. The template client page which is using the master template page should use <ui:define> to define the template content which is to be inserted.

更高级的方法包括模板。这基本上包括了相反的情况。主模板页面应该使用 来声明插入已定义模板内容的位置。使用主模板页面的模板客户端页面应该使用 定义要插入的模板内容。 插入>

Master template page /WEB-INF/template.xhtml (as a design hint: the header, menu and footer can in turn even be <ui:include> files):

主模板页面/ web - inf /模板。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><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>

Template client page /page.xhtml (note the template attribute; also here, this is the file in its entirety):

模板客户机页面/页。xhtml(注意模板属性;这里也是完整的文件):

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

This needs to be opened by /page.xhtml. If there is no <ui:define>, then the default content inside <ui:insert> will be displayed instead, if any.

这需要/page.xhtml打开。如果没有 ，则 中的默认内容将被显示出来，如果有的话。 定义>

<ui:param>

You can pass parameters to <ui:include> or <ui:composition template> by <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 >

Inside the include/template file, it'll be available as #{foo}. In case you need to pass "many" parameters to <ui:include>, then you'd better consider registering the include file as a tagfile, so that you can ultimately use it like so <my:tagname foo="#{bean.foo}">. See also When to use <ui:include>, tag files, composite components and/or custom components?

在包含/模板文件中，可以使用#{foo}。如果您需要将“许多”参数传递给 ，那么您最好考虑将include文件注册为tagfile，以便您最终可以像so 那样使用它。还请参见何时使用 、标记文件、复合组件和/或自定义组件? 包括>

You can even pass whole beans, methods and parameters via <ui:param>. See also JSF 2: how to pass an action including an argument to be invoked to a Facelets sub view (using ui:include and ui:param)?

您甚至可以通过

Design hints

The files which aren't supposed to be publicly accessible by just entering/guessing its URL, need to be placed in /WEB-INF folder, like as the include file and the template file in above example. See also Which XHTML files do I need to put in /WEB-INF and which not?

不应该通过输入/猜测其URL来公开访问的文件，需要放置在/WEB-INF文件夹中，如上面示例中的include文件和模板文件。还可以看到哪些XHTML文件需要放在/WEB-INF中，哪些不需要?

There doesn't need to be any markup (HTML code) outside <ui:composition> and <ui:define>. You can put any, but they will be ignored by Facelets. Putting markup in there is only useful for web designers. See also Is there a way to run a JSF page without building the whole project?

在 和 之外不需要任何标记(HTML代码)。您可以放置任何，但它们将被Facelets忽略。只对web设计人员有用。还有，有没有一种方法可以在不构建整个项目的情况下运行JSF页面? 定义> 复合>

The HTML5 doctype is the recommended doctype these days, "in spite of" that it's a XHTML file. You should see XHTML as a language which allows you to produce HTML output using a XML based tool. See also Is it possible to use JSF+Facelets with HTML 4/5? and JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used.

HTML5 doctype是目前推荐的doctype，“尽管”它是XHTML文件。您应该将XHTML视为一种允许您使用基于XML的工具生成HTML输出的语言。请参见是否可以在HTML 4/5中使用JSF+Facelets ?javascript支持2.2和HTML5，为什么XHTML还在使用。

CSS/JS/image files can be included as dynamically relocatable/localized/versioned resources. See also How to reference CSS / JS / image resource in Facelets template?

CSS/JS/图像文件可以作为动态重定位/本地化/版本化的资源包含在其中。请参见如何在Facelets模板中引用CSS / JS /图像资源?

You can put Facelets files in a reusable JAR file. See also Structure for multiple JSF projects with shared code.

您可以将Facelets文件放在可重用的JAR文件中。请参见具有共享代码的多个JSF项目的结构。

For real world examples of advanced Facelets templating, check the src/main/webapp folder of Java EE Kickoff App source code and OmniFaces showcase site source code.

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

#2

21  

Included page:

包括页面:

<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>

Including page:

包括页面:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • You start your included xhtml file with ui:composition as shown above.
  • 您可以使用ui来启动包含的xhtml文件:如上所示的组合。
  • You include that file with ui:include in the including xhtml file as also shown above.
  • 您将该文件与ui一起包含在包含xhtml文件中，如上所示。
标签：

相关文章