Part 4: How to create your first JSF 2.0 dynamic web application with in Java EE 6

In eclipse menubar click on File -> New -> Dynamic Web Project. Give a suitable name to your project and leave all fields default as in the figure below and click next.

In the next window do nothing click next. In the last window check Generate web.xml deployment descriptor and click finish. This will create the dynamic web project structure and a default index.jsp page.

Java Server Pages are not recommended to use With JSF 2.0. We'll soon create facelets for our application, but in order to check if everything is working fine, right click on project name in the project explorer and from the context menu click on Run As -> Run on Server. Select GlassFish 3.1.1 at localhost, Check Always use this server when running this project and click finish. This will publish your web project to GlassFish server and show the message in the integrated browser window in eclipse like following:

Everything is working fine. Now we are ready to create our facelets for the project. Facelats or Java Server Faces are nothing but just xhtml pages with .xhtml extension. You create pages with xhtml extension and a access them on the web by writing .jsf extension.
Before creating facelets, we have to add Java Server Faces support to our project facets. To do that right click on your project and in the context menu click on properties. This will open you project properties window as shown in the figure.
Click on Project Facetes on the left hand side and you'll see a list of project facets available for your project. Check Java Server Faces and you'll notice a link in the lower corner of the window saying thatfurther configuration required as shown in the figure below:

Click on further configuration required and you'll see the following window. Click on Download library as shown in the picture.

This will download and show the libraries. Select JSF 2.0 (Mojarra 2.0.3-FCS) and click Next. Accept the license and click finish.

check the downloaded mojarra library as in the figure below and click OK. In the properties windows click Ok again and you are done.

Now, we'll test if Java Server Faces are working properly. To do that we'll now create a test page. So, lets create our first facelet, i.e. xhtml page. All the web pages in a dynamic web application are created in WebContent folder or its sub folders. Pages outside this folder will not be published to the server and you won't be able to access these pages from web.
So, right click on WebContent folder in your project explorer and click on new -> XHTML Page. Writetest in the name field and click finish as shown in the figure:

Open the test.xhtml page you have just created by double clicking it in your project explorer and write a message in body tag as show in the figure and save the file.

Right click on your test.xhtml and click on Run As -> Run on Server and you will see the success message in the browser window, but you'll notice that it is still showing /faces/test.xhtml in the browser. We need to make it show test.jsf. This will be done by doing small amendments to our web.xml file.
Open your web.xml file and make it look like following. You'll find your web.xml file under /WebContent/WEB-INF/web.xml

web.xml

 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
id="WebApp_ID" version="3.0">

  <display-name>Tes Web Page</display-name>
  <welcome-file-list>
    <welcome-file>index.jsf</welcome-file>
  </welcome-file-list>
  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Production</param-value>
  </context-param>  
  <listener>
    <listener-class>
    com.sun.faces.config.ConfigureListener
    </listener-class>
  </listener>  
  <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>
    <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>
</web-app>
   

In Servlet mapping, we have specified url pattern to be *.jsf. We have also set our welcome page to index.jsf Right click test.xhtml page again and click on Run As -> Run on Server and you would see that the url now showing test.jsf as in the figure below:

The best way of working with facelats is by creating a template, and then creating header, footer, and composition pages. Don't worry I'll explain these in the next step. So, click next to see how we can create facelets using templates.