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的标签composition 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>

然后，我们需要创建一个页面template.xhtml，它将使用我们的模板XXXXX.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

1 个答案: