Search code examples
javajsf-2maven-3tomcat7myfaces

JSF web project <h:xxx> tag invisible

I followed a tutorial to make a JSF web project but it's not working, everything in <h : xxx> tag is invisible inside browser such as firefox or googlechrome.

It's suposed to do that : first you acces index.html, you input your name and press the button. the bean transmit your name to a JSP and the JSP print Welcome "your name"

but as said, the input field and button are insivible (they are inside the page code but their length is 0px, setting manually a new width is not working either)

And everything looks normal in eclipse graphical preview tool. :/

seen from eclipse

in google chrome

my index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <title>JSF 2.0 Hello World</title>
    </h:head>
    <h:body>
        <h3>JSF 2.0 Hello World Example - hello.xhtml</h3>
        <h:outputText value="test"  />
        <h:form>
           <h:inputText value="#{helloBean.name}"></h:inputText>
           <h:commandButton value="Welcome Me" action="welcome"></h:commandButton>
        </h:form>
    </h:body>
</html>

my web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.5"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <display-name>webApp</display-name>
 <!-- JSF mapping -->
 <servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <!-- Map these files with JSF -->
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>/faces/*</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.faces</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.html</url-pattern>
 </servlet-mapping>
 <!-- Welcome page -->
 <welcome-file-list>
  <welcome-file>index.html</welcome-file>
 </welcome-file-list>
</web-app>

my bean :

package net.viralpatel.maven;



import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

resulting HTML:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"    
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <title>JSF 2.0 Hello World</title>
    </h:head>
    <h:body bgcolor="white">
        <h3>JSF 2.0 Hello World Example - welcome.xhtml</h3>
        <h4>Welcome #{helloBean.name}</h4>
    </h:body>
</html>

In my pom.xml you can find

  • myfaces-api 1.2.2
  • tomahawk 1.1.9
  • myfaces-impl 1.2.2
  • jstl 1.1.2
  • taglib standard 1.1.2
  • geronimo_servlet_2.5_spec 1.2
  • jboss-jsf-api_2.0_spec

i'm using a tomcat 7 server

Solution

  • Your mistake is that you used the .html extension instead of .xhtml for the JSF view file. The default JSF suffix is .xhtml.

    There are 2 ways to fix this problem:

    1. Tell JSF to use .html as default suffix instead.

      <context-param>
    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
    <param-value>.html</param-value>
</context-param>

    2. Or, rename the index.html file to index.xhtml and fix your web.xml accordingly:

      <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
    <welcome-file>index.xhtml</welcome-file>
</welcome-file-list>

    Using XHTML has more advantages as to IDE tooling (autocomplete, etc).