如何将通用内容包含到多级模板页面中答案

【问题标题】：How to include common content into multiple level template page如何将通用内容包含到多级模板页面中
【发布时间】：2013-04-15 22:16:15
【问题描述】：

我正在尝试在模板中包含一个通用页面，但我得到的只是一个没有错误的空白页面。

common.xhtml 实际上有 template.xhtml 中指示的内容。似乎 template.xhtml 无法识别两级包含。

模板.xhtml

<html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:c="http://java.sun.com/jstl/core"
 xmlns:ub="http://jboss.com/products/seam/ub-taglib"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich">

<head>
  <ui:insert name="css" />  
  <ui:insert name="header" />
</head>

<body>
 <ui:insert name="body" />  
</body>
</html>

custom.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.ajax4jsf.org/rich"
    xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
    xmlns:c="http://java.sun.com/jstl/core"
    template="template.xhtml">

    <ui:define name="css">
        <link rel="stylesheet" type="text/css" href="/custom.css/>
    </ui:define>

    <ui:include src="common.xhtml" />

</ui:composition>

common.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.ajax4jsf.org/rich"
    xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
    xmlns:c="http://java.sun.com/jstl/core"
    template="template.xhtml">


    <ui:define name="header">
        <h1>header</h1>
    </ui:define>
    <ui:define name="body">
        <table><tr><td>Table</td></tr></table>
    </ui:define>    
</ui:composition>

【问题讨论】：

标签： jsf facelets

【解决方案1】：

这确实行不通。 <ui:define> 应该用于模板客户端（即带有<ui:composition template="..."> 的页面），而不是在包含文件中（即带有<ui:composition> 而没有template 的页面）。但是，您可以从现有的主模板“扩展”。

从custom.xhtml删除：

<ui:include src="common.xhtml" />

更改common.xhtml

template="custom.xhtml"

并在浏览器中打开 common.xhtml 而不是 custom.xhtml。

另见：

How to include another XHTML in XHTML using JSF 2.0 Facelets?

与具体问题无关，为防止最终用户表单无法在浏览器中直接打开custom.xhtml 或template.xhtml，建议将它们移至/WEB-INF 文件夹中。此外，您知道<h:head> 和<h:outputStylesheet> 组件吗？我建议利用它们。此外，让<h1> 最终以<head> 结束是没有意义的。也许您的意思是<ui:insert name="header"> 位于<body> 内部？此外，您可以轻松地将 <h1> 放入模板中，这样您就无需在每个模板客户端中重复它们。

/WEB-INF/templates/template.xhtml

<html ...>
    <h:head>
    </h:head>
    <h:body>
        <ui:insert name="header" />
        <ui:insert name="body" />
    </body>
</html>

/WEB-INF/templates/custom.xhtml（CSS文件放在/resources文件夹中）

<ui:composition ... template="/WEB-INF/templates/template.xhtml">
    <ui:define name="header">
        <h1><ui:insert name="custom-header" /></h1>
    </ui:define>
    <ui:define name="body">
        <h:outputStylesheet name="custom.css" target="head" />
        <ui:insert name="custom-body" />
    </ui:define>
</ui:composition>

/page.xhtml

<ui:composition ... template="/WEB-INF/templates/custom.xhtml">
    <ui:define name="custom-header">
        header
    </ui:define>
    <ui:define name="custom-body">
         <table><tr><td>Table</td></tr></table>
    </ui:define>
</ui:composition>

另见：

【讨论】：

谢谢。之前我也在考虑扩展模板，但我的情况并不是那么简单。我有两个用于不同模块的模板，并且 common.xhtml 在这两个模块之间共享。