jsf - 使用模板应用 css
问题描述
我正在尝试在使用由子模板组成的模板的网页上应用一些 CSS。我从 primefaces 中获取了一个模板，并尝试尽可能多地分解为 2 个子模板：commonFooter.xhtml 和 commonHeader.xhtml。然后我将它们组装在 template.xhtml 中，我想在我的页面中使用这个 template.xhtml。
但是，我没有成功（按照本教程https://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/）。
这是我不将 template.xhtml 分解为两个子模板时的预期结果
但结果是这样的：
这是代码：
commonHeader.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:body>
<ui:composition>
<p:layoutUnit id="top" position="north" size="50">
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:menuitem value="Quit" url="#" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</p:layoutUnit>
</ui:composition>
</h:body>
</f:view>
</html>
commonFooter.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:body>
<ui:composition>
<p:layoutUnit id="bottom" position="south" size="60">
Bottom Content
</p:layoutUnit>
<p:layoutUnit id="left" position="west" size="300" resizable="true" closable="false" collapsible="true" header="Options" minSize="200">
<p:accordionPanel>
<p:tab title="Menu 1">
<br />
<p:calendar mode="inline" navigator="none"/>
<br />
</p:tab>
<p:tab title="Menu 2">
<h:outputText value="Menu 2 Content" />
</p:tab>
<p:tab title="Menu 3">
<h:outputText value="Menu 3 Content" />
</p:tab>
<p:tab title="Menu 4">
<h:outputText value="Menu 3 Content" />
</p:tab>
</p:accordionPanel>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
</p:layoutUnit>
</ui:composition>
</h:body>
</f:view>
</html>
模板.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<h:outputStylesheet library="css" name="/showcase.css" />
<h:outputStylesheet library="css" name="/sh.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
body {
background-color: #FFFFFF;
}
</style>
</h:head>
<h:body>
<ui:composition>
<p:layout fullPage="true" >
<!-- <div id="header">
<ui:insert name="header" >
<ui:include src="/WEB-INF/templates/commonHeader.xhtml" />
</ui:insert>
</div> -->
<ui:insert name="header" >
<ui:include src="/WEB-INF/templates/commonHeader.xhtml"/>
</ui:insert>
<!--
<div id="content">
<ui:insert name="content" >
<ui:include src="/WEB-INF/templates/commonContent.xhtml" />
</ui:insert>
</div> -->
<ui:insert name="footer" >
<ui:include src="/WEB-INF/templates/commonFooter.xhtml"/>
</ui:insert>
</p:layout>
<script language="javascript" src="resources/js/sh.js"></script>
<script language="javascript">
SyntaxHighlighter.all();
</script>
</ui:composition>
</h:body>
</html>
我的页面是：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet library="css" name="/showcase.css" />
<h:outputStylesheet library="css" name="/sh.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
body {
background-color: #FFFFFF;
}
</style>
</h:head>
<h:body>
<ui:composition template="WEB-INF/templates/template.xhtml"/>
</h:body>
</html>
编辑：更准确地说，css的路径在这里并不重要，因为它在模板是一体的时候起作用。我认为的问题是将模板分离成两个单独的实体然后组装它破坏了primefaces的呈现。
解决方案
感谢另一个教程，我找到了使用来自 jsf 的标签组合的方法包括等。我没有很好地使用它们
首先，您需要创建简单的 templateFooter.xhtml 和 templateHeader.xhtml，如下所示，没有 html 标签，但有一个 ui:composition 标签：
<ui:composition
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<p:layoutUnit id="top" position="north" size="50">
<p:menubar>
<p:submenu label="Satisfact'IT" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:menuitem value="Quit" url="#" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</p:layoutUnit>
</ui:composition>然后我们需要创建一个将使用我们的 templateXXXXX.xhtml 的页面 template.xhtml。这个页面需要有一个 html 标签，因为它会被你的页面使用，用户可以直接看到。因此，您需要使用标签 ui:include（它将导入您的 templateXXX.xhtml）到标签 ui:insert 中。你会有类似的东西：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<h:outputStylesheet library="css" name="/showcase.css" />
<h:outputStylesheet library="css" name="/sh.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
body {
background-color: #FFFFFF;
}
</style>
</h:head>
<h:body>
<p:layout fullPage="true" >
<ui:insert name="header" >
<ui:include src="commonHeader.xhtml" />
</ui:insert>
<ui:insert name="footer" >
<ui:include src="commonFooter.xhtml" />
</ui:insert>
</p:layout>
<script language="javascript" src="resources/js/sh.js"></script>
<script language="javascript">
SyntaxHighlighter.all();
</script>
</h:body>
</html>然后调用你的页面例如 index.xhtml juste 写：
<ui:composition template="WEB-INF/templates/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
/>当我在 index.xhtml 中时，我还没有找到轻松更改它的方法，但我会及时更新！
推荐阅读
- machine-learning - 有没有办法在两次运行 mmlspark lightgbm 时获得相同的结果？
- mongodb - ArrayFilters 更新多个子文档的 Pymongo 错误
- swift - Mac OS Cocoa 应用程序对 CPU 施加压力
- python - 如何使用 Cartopy 在 Matplotlib 中使用 Axes.update()？
- r - 无法在 rstudio 中安装软件包
- multidimensional-array - 从 Python 中的 3-D DataArray 中删除时间维度之一？
- wpf - 在 WPF 中打开 Power Bi 报告
- python - norm.fit 在 scipy 中有什么意义？
- javascript - 列搜索后如何将所有DataTable的数据存储在javascript数组中？
- javascript - 对于滚动同步元素，每个轴仅显示一个滚动条