Style Sheets Not Working With JSF

MyEclipse IDE

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

This topic has 5 replies, 3 voices, and was last updated 18 years, 9 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