Style Sheets Not Working With JSF

💡

Our Forums Have Moved

For help with installation, bugs reports or feature requests, please head over to our new forums.
Genuitec Community on GitHub

MyEclipse IDE

Java EE Development (EJB, JSP, Struts, XDoclet, etc.)

This topic has 5 replies, 3 voices, and was last updated 19 years, 7 months ago by ess_stegra.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

March 15, 2006 at 1:01 am #248598 Reply

ess_stegra

Participant

I have not been able to get style sheets to work with JavaServer Faces. This example is taken from the JSFLoginDemo tutorial.

<%@ page language="java" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>My JSF 'userLogin.jsp' starting page</title>
</head>
<body>
    <f:view>
        <f:loadBundle basename="com.jsfdemo.MessageBundle" var="bundle"/>
        
        <h:form id="loginForm">
            <table>
                <tbody>
                    <tr>
                        <td><h:outputText value="#{bundle.user_name_label}" /></td>
                        <td>
                            <h:inputText id="userName" value="#{UserBean.userName}" required="true">
                                <f:validateLength minimum="1" />
                            </h:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputText value="#{bundle.user_password_label}" /></td>
                        <td>
                            <h:inputSecret id="password" value="#{UserBean.password}" required="true">
                                <f:validateLength minimum="3" />
                            </h:inputSecret>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <h:messages style="font-weight: bold; color: #FF0000;" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right" colspan="2">
                            <h:commandButton id="submit" action="#{UserBean.loginUser}" value="#{bundle.login_button_label}" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </h:form>
    </f:view>
</body>
</html>

The line

<h:messages style="font-weight: bold; color: #FF0000;" />

Prints any error messages out above the login button in bold red text. If I change the code to use a style sheet:

<%@ page language="java" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>My JSF 'userLogin.jsp' starting page</title>
     <link rel="STYLESHEET" type="text/css" href="style_basic.css">
    <style type="text/css">
        <!--
        @import "style_basic.css";
        -->
    </style>
</head>
<body>
    <f:view>
        <f:loadBundle basename="com.jsfdemo.MessageBundle" var="bundle"/>
        
        <h:form id="loginForm">
            <table>
                <tbody>
                    <tr>
                        <td><h:outputText value="#{bundle.user_name_label}" /></td>
                        <td>
                            <h:inputText id="userName" value="#{UserBean.userName}" required="true">
                                <f:validateLength minimum="1" />
                            </h:inputText>
                        </td>
                    </tr>
                    <tr>
                        <td><h:outputText value="#{bundle.user_password_label}" /></td>
                        <td>
                            <h:inputSecret id="password" value="#{UserBean.password}" required="true">
                                <f:validateLength minimum="3" />
                            </h:inputSecret>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <h:messages errorClass="errors" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right" colspan="2">
                            <h:commandButton id="submit" action="#{UserBean.loginUser}" value="#{bundle.login_button_label}" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </h:form>
    </f:view>
</body>
</html>

style_basic.css has the following style defined:

.errors {
    font-family: Arial, sans-serif;
    font-size: 14pt;
    color: red;
}

This seems to have no affect on the HTML displayed in the browser. Any error messages display in black, normal text. Am I doing something wrong or is this a bug?
Here is my system setup:
*** Date: Tue Mar 14 23:55:53 MST 2006

*** System properties:
OS=WindowsXP
OS version=5.1
Java version=1.5.0_06

*** MyEclipse details:
MyEclipse Enterprise Workbench

Version: 4.1.1 GA
Build id: 20060228-4.1.1-GA

*** Eclipse details:
Eclipse SDK