首页 文章

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

提问于
浏览 次
207

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

jsf xhtml include jsf-2 facelets

2 回答

  • 396

    <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> ， <h:head> 和 <h:body> ，否则会导致invalid HTML .

    您可以在 <ui:include src> 中使用动态EL表达式 . 另见How to ajax-refresh dynamic include content by navigation menu? (JSF SPA) .

    <ui：define> / <ui：insert>

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

    主模板页面 /WEB-INF/template.xhtml （作为设计提示： Headers ，菜单和页脚甚至可以是 <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: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} 的形式提供 . 如果您需要将"many"参数传递给 <ui:include> ，那么您最好考虑将包含文件注册为标记文件，以便最终可以像 <my:tagname foo="#{bean.foo}"> 一样使用它 . 另见When to use ui:include, tag files, composite components and/or custom components?

    您甚至可以通过 <ui:param> 传递整个bean，方法和参数 . 另见JSF 2: how to pass an action including an argument to be invoked to a Facelets sub view (using ui:include and ui:param)?

    设计提示

    通过输入/猜测其URL而不应公开访问的文件需要放在 /WEB-INF 文件夹中，就像上面示例中的包含文件和模板文件一样 . 另见Which XHTML files do I need to put in /WEB-INF and which not?

    在 <ui:composition> 和 <ui:define> 之外不需要任何标记（HTML代码） . 你可以放任何，但它们将由Facelets ignored . 将标记放在那里只对网页设计师有用 . 另见Is there a way to run a JSF page without building the whole project?

    HTML5 doctype是最近推荐的doctype，"in spite of"它是一个XHTML文件 . 您应该将XHTML视为一种允许您使用基于XML的工具生成HTML输出的语言 . 另见Is it possible to use JSF+Facelets with HTML 4/5?和JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used .

    CSS / JS /图像文件可以作为动态可重定位/本地化/版本化资源包含在内 . 另见How to reference CSS / JS / image resource in Facelets template?

    您可以将Facelets文件放在可重用的JAR文件中 . 另见Structure for multiple JSF projects with shared code .

    有关高级Facelets模板的真实示例，请检查Java EE Kickoff App source code和OmniFaces showcase site source code的 src/main/webapp 文件夹 .

    回复于
  • 22

    包含的页面：

    <!-- 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文件 .

    • 您在包含xhtml文件中包含 ui:include 的文件，如上所示 .

    回复于

相关问题