使用模板应用 css

Question

我正在尝试在使用由子模板组成的模板的网页上应用一些 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>

template.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 演示文稿。

Answer 1

多亏了另一个教程，我找到了使用 jsf 中的标签组合 include 等的方法。我没用好

首先您需要创建简单的 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只写：

<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 时轻松更改它的方法，但我会及时通知您！

使用模板应用 css

Apply css using Templates

jsf

primefaces