Jsf 使用模板应用css_Jsf_Primefaces

Jsf 使用模板应用css

jsf primefaces

Jsf 使用模板应用css,jsf,primefaces,Jsf,Primefaces,我试图在使用由子模板组成的模板的网页上应用一些CSS。我从primefaces获取了一个模板，并尝试将其分解为两个子模板：commonFooter.xhtml和commonHeader.xhtml。然后在template.xhtml中组装它们，我想在我的页面中使用这个template.xhtml 但是，我没有成功（遵循本教程）当我不将template.xhtml分解为两个子模板时，这里是预期的结果但结果是：代码如下： commonHeader.xhtml <!DOCTYPE html

我试图在使用由子模板组成的模板的网页上应用一些CSS。我从primefaces获取了一个模板，并尝试将其分解为两个子模板：commonFooter.xhtml和commonHeader.xhtml。然后在template.xhtml中组装它们，我想在我的页面中使用这个template.xhtml

但是，我没有成功（遵循本教程）

当我不将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>


.ui布局北{
z指数：20！重要；
溢出：可见！重要；；
}
.ui布局北.ui布局单元内容{
溢出：可见！重要；
}
身体{
背景色：#FFFFFF；
}
SyntaxHighlighter.all（）；

我的网页是：

<?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>


.ui布局北{
z指数：20！重要；
溢出：可见！重要；；
}
.ui布局北.ui布局单元内容{
溢出：可见！重要；
}
身体{
背景色：#FFFFFF；
}

编辑：更准确地说，css的路径在这里并不重要，因为当模板在一块中时，它就可以工作。我认为问题在于，将模板分解为两个单独的实体，然后将其组装，破坏了primefaces的表示。

多亏了另一个教程，我找到了使用jsf中的标记组合include etc的方法。我没有很好地使用它们

首先，您需要创建简单的templateFooter.xhtml和templateHeader.xhtml，如下所示，不带html标记，但带有ui:composition标记：

请提供一份详细的信息。你的CSS文件在哪里？可能是@JasperdeVries的副本，好的，我会尽量更具体一些。问题不在于文件的位置，因为你可以看到第一个屏幕，当模板不是多个时，一切都很完美。XHTMLSE还感谢@JasperdeVries我找到了解决方案，因为我没有很好地使用标记ui:composition。我将在回答中准确描述错误所在