CODEWITHSUNDEEP
javacsstemplatesjsfjsf-2
ali honarmand
ali honarmand

Reputation: 57

Templates and styles not applied on reload in JSF 2.0

I have just started using JSF 2.0 and faced a warmly welcomed issue. I have used Templates and template client and applied CSS(should mention that I'm not a css expert) styles to the template file. when I run the app everything is fine but when the page is submitted or reloaded or navigated to another page pressing any link or button on the page no style is applied, and just plain HTML is presented. how can I overcome this problem?

Template File:

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

Client Template:

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

and 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;
}

Thanks,

Upvotes: 1

Views: 2846

Answers (2)

BalusC
BalusC

Reputation: 1108732

You should not be using <link>, but you should be using <h:outputStylesheet>. Its name attribute takes a path relative to the /resources folder and you never need to worry about the context path.

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

Upvotes: 5

choop
choop

Reputation: 921

Try to change the links of your css/images/templates from relative path to absolute path.

For example:
from:

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

to: 

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

#{facesContext.externalContext.requestContextPath} will be replaced to your root directory.

See also:

Upvotes: 1

Related Questions