Home/ Questions/Q 7994651
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:11:28+00:00

I have just started using JSF 2.0 and faced a warmly welcomed issue. I

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    • 0