JSF Hello World - Setup

Let us setup a JSF project using Maven.

Note that there are several open source projects which make JSF component libraries - like Trinidad, Tobago, Tomahawk, Openfaces, IceFaces.

In this project we will use JBoss Richfaces, which is one of the most popular ones and has a pretty big set of components.

In Eclipse, go to File --> New Project --> Maven Project

Use the maven-archetype-webapp

Specify:
Group Id: org.confucius
Artfact Id: HelloWorldJSF
Package: org.confucius

Once the project is created, we will update the pom.xml to include all the necessary JSF and Richfaces libraries.

So your pom.xml will now look like this:

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  
       <modelVersion>4.0.0</modelVersion>  
       <groupId>org.confucius</groupId>  
       <artifactId>HelloWorldJSF</artifactId>  
       <packaging>war</packaging>  
       <version>0.0.1-SNAPSHOT</version>  
          
   <build>  
     <finalName>HelloWorldJSF</finalName>  
   </build>  
   
        <dependencyManagement>  
     <dependencies>  
       <dependency>  
         <groupId>org.richfaces</groupId>  
         <artifactId>richfaces-bom</artifactId>  
         <version>4.2.2.Final</version>  
         <scope>import</scope>  
         <type>pom</type>  
       </dependency>  
     </dependencies>  
   </dependencyManagement>  
   
   <dependencies>  
     <dependency>  
       <groupId>org.richfaces.ui</groupId>  
       <artifactId>richfaces-components-ui</artifactId>  
     </dependency>  
     <dependency>  
       <groupId>org.richfaces.core</groupId>  
       <artifactId>richfaces-core-impl</artifactId>  
     </dependency>  
     <dependency>  
       <groupId>javax.faces</groupId>  
       <artifactId>javax.faces-api</artifactId>  
       <scope>provided</scope>  
     </dependency>  
     <dependency>  
       <groupId>org.glassfish</groupId>  
       <artifactId>javax.faces</artifactId>  
       <scope>compile</scope>  
     </dependency>  
     <dependency>  
       <groupId>javax.servlet</groupId>  
       <artifactId>javax.servlet-api</artifactId>  
       <scope>provided</scope>  
     </dependency>  
     <dependency>  
       <groupId>javax.servlet.jsp</groupId>  
       <artifactId>jsp-api</artifactId>  
       <scope>provided</scope>  
     </dependency>  
     <dependency>  
       <groupId>javax.el</groupId>  
       <artifactId>el-api</artifactId>  
       <scope>provided</scope>  
     </dependency>  
     <dependency>  
       <groupId>javax.servlet.jsp.jstl</groupId>  
       <artifactId>jstl-api</artifactId>  
     </dependency>     
     <dependency>  
       <groupId>net.sf.ehcache</groupId>  
       <artifactId>ehcache</artifactId>  
     </dependency>  
   </dependencies>  
    
 </project> 

Notice that we are using a BOM (Bill of Materials), which is a Maven construct for projects that are version sensitive. BOMs specify the versions of its dependencies.

Explanation:
A specific version of RichFaces requires certain specific version of its dependencies. Mismatch in dependency versions can cause issues. For this reason, Richfaces defines a BOM which defines the versions of its dependencies. Therefore, in our POM, we do not need to specify the dependency versions.

Next, we need to update our web.xml to use JSF.

Your web.xml will now look like this:

 <?xml version="1.0" encoding="UTF-8"?>  
 <web-app 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">  
   
   <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>*.faces</url-pattern>  
   </servlet-mapping>  
   
   <welcome-file-list>  
     <welcome-file>greet.faces</welcome-file>  
   </welcome-file-list>  
   
 </web-app>  
   

We direct all URLs which end in *.faces to be handled by JSF servlet.

Also, note that we have defined greet.faces as our welcome file.

However, we will never create a file called greet.faces - we will create one called greet.xhtml.

Whenever JSF sees a request for a file called foo.faces, it actually picks up foo.xhtml, sends it to the Facelets view handler which renders foo.html, which is sent back to the browser.

In your /src/main/webapp folder, create a file greet.xhtml, like this:

 <!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:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core">  
   
   <h:body>  
           <h1>Hello World!</h1>  
      </h:body>  
 </html>  

Note that an XHTML file looks just like a HTML file.

Note also that we have included two JSF tag libraries - HTML and Core. These tag libraries gives enhanced functionality over regular HTML tags.

Our JSF project is now setup.

If you build and deploy the project, and browse to
http://localhost:8080/HelloWorldJSF/

You will see "Hello World!" displayed.