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

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

包括页面:

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

包括页面:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>

如上面所示，使用ui:composition启动包含的xhtml文件。你用ui:include将该文件包含在包含xhtml文件中，如上所示。

2011-01-25 13:06:30

< ui:包括>

最基本的方法是<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>， <h:head>和<h:body>，否则将导致无效的html。

您可以在<ui:include src>中使用动态EL表达式。另见如何ajax刷新动态包括导航菜单内容?(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:include ...>
    <ui:param name="foo" value="#{bean.foo}" />
</ui:include>

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

在include/template文件中，它可以作为#{foo}使用。如果你需要传递“许多”参数给<ui:include>，那么你最好考虑将包含文件注册为一个标签文件，这样你最终可以像这样使用它<my:tagname foo="#{bean.foo}">。参见何时使用<ui:include>，标记文件，复合组件和/或自定义组件?

你甚至可以通过<ui:param>传递整个bean、方法和参数。另见JSF 2:如何传递一个动作，包括一个参数被调用到Facelets子视图(使用ui:include和ui:param)?

设计提示

那些不能通过输入/猜测URL公开访问的文件，需要放在/WEB-INF文件夹中，就像上面例子中的包含文件和模板文件一样。也见哪些XHTML文件我需要放在/WEB-INF和哪些不是?

在<ui:composition>和<ui:define>之外不需要任何标记(HTML代码)。你可以放任何，但是它们会被Facelets忽略。把标记放在那里只对网页设计师有用。参见是否有一种方法可以在不构建整个项目的情况下运行JSF页面?

HTML5文档类型是目前推荐的文档类型，“尽管”它是一个XHTML文件。您应该将XHTML视为一种允许您使用基于XML的工具生成HTML输出的语言。另见是否有可能使用JSF+Facelets与HTML 4/5?以及JavaServer Faces 2.2和HTML5支持，为什么XHTML仍然被使用。

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

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

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

2011-01-25 13:17:25

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

推荐文章

最新文章

标签