Question

我刚刚开始使用JSF 2.0并面临一个热烈欢迎的问题。我使用了模板和模板客户端，并将模板文件应用于CSS（应该提到我不是css专家）样式。当我运行应用程序时，一切都很好但是当页面被提交或重新加载或导航到另一个页面时，按下页面上的任何链接或按钮都不会应用样式，只显示纯HTML。我该如何克服这个问题呢？

模板文件：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>
            <ui:insert name="title">Facelets Template</ui:insert>
        </title>
    </h:head>

    <h:body>
        <div id="top" class="top">
            <ui:insert name="top">Top</ui:insert>
        </div>
        <div id="left">
            <ui:insert name="left">left</ui:insert>
        </div>
        <div id="content" class="left_content">
            <ui:insert name="content">Content</ui:insert>

        </div>

    </h:body>

</html>

客户端模板：

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <body>
        <ui:composition template="./../templates/TutorialsStructure.xhtml">
            <ui:define name="title">
                Start
            </ui:define>

            <ui:define name="top">
                <h:graphicImage value="Image/butterfly.gif" style="alignment-adjust: central"/>
            </ui:define>

            <ui:define name="left">
            </ui:define>

            <ui:define name="content">
                <h:form>
                    <div>
                        <p>
                            <div>
                                <h:outputLabel id="outputlabel_userName"     for="inputText_userName" >
                                    <h:outputText id="output_userName" value="UserName:     "/>
                                </h:outputLabel>
                            </div>
                            <div>
                                <h:inputText size="35" id="inputText_userName" value="#    {inputOutputBean.userName}"/>
                            </div>
                        </p>
                        <p>
                            <div>
                                <h:outputLabel id="outputlabel_password"     for="inputsecret_password">
                                    <h:outputText id="output_password" value="Password:     "/>
                                </h:outputLabel>
                            </div>
                            <div>
                                <h:inputSecret id="inputsecret-password" 
                                               value="#{inputOutputBean.password}"
                                               required="true"
                                               requiredMessage="This Field is     obligatory."
                                               size="35">
                                </h:inputSecret>
                            </div>
                        </p>
                        <div id="submitBtn">
                            <h:commandButton value="Submit" id="submitBtn"/>
                        </div>
                    </div>
                    <div id="results_output" styleClass="results">
                        <div>
                            <h:outputLabel id="label_userName"     styleClass="userNameResult" for="userNameResult"
                                           value="User Name: "
                                           style="height: 500px; padding: 2em 2em 2em     2em"/>
                            <h:outputText value="#{inputOutputBean.userName}"     id="userNameResult" >UserName Value:</h:outputText>
                        </div>
                        <div>
                            <h:outputLabel id="outputlabel_password_res"
                                           value="Password Value: "     for="output_password_res"
                                           style="height: 500px; padding: 2em 2em 2em     2em"/>
                            <h:outputText value="#{inputOutputBean.password}"     id="output_password_res"/>
                        </div>
                    </div>
                </h:form>
            </ui:define>
        </ui:composition>

    </body>
</html>

和CSS：

#top {
    position: relative;
    background-color: #036fab;
    color: white;
    padding: 5px;
    margin: 0px 0px 10px 0px;
}

#bottom {
    position: relative;
    background-color: #c2dfef;
    padding: 5px;
    margin: 10px 0px 0px 0px;
}

#left {
    float: left;
    background-color: #ece3a5;
    padding: 5px;
    width: 150px;
    border-bottom-width: 5px;
}

#right {
    float: right;
    background-color: #ece3a5;
    padding: 5px;
    width: 150px;
}

.center_content {
    position: relative;
    background-color: #dddddd;
    padding: 5px;
    float: left;
    position:relative;    
}

.left_content {
    background-color: #dddddd;
    padding: 5px;
    margin-left: 170px;
    float: right;
    position: relative;
    float: left;
    left: 5px;
}
.right_content {
    background-color: #dddddd;
    padding: 5px;
    margin: 0px 170px 0px 170px;
}

#top a:link, #top a:visited {
    color: white;
    font-weight : bold;
    text-decoration: none;
}

#top a:link:hover, #top a:visited:hover  {
    color: black;
    font-weight : bold;
    text-decoration : underline;
}


#content{

}

#testID{
    background-color: #111111;
    float: right;
    padding: 10em 10em 10em 10em;
}

谢谢，

Answer 1

您不应该使用<link>，但您应该使用<h:outputStylesheet>。其name属性采用相对于/resources文件夹的路径，您无需担心上下文路径。

<h:outputStylesheet name="css/default.css" />
<h:outputStylesheet name="css/cssLayout.css" />

Answer 2

尝试更改css/images/templates从relative路径到absolute路径的链接。

例如：
从：

<link href="resources/css/default.css" rel="stylesheet" type="text/css" />

到：

<link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />

#{facesContext.externalContext.requestContextPath}将替换为您的根目录。

在JSF 2.0中重新加载时未应用的模板和样式

2 个答案:

另见：