JSF 2 Hello World

Prerequisites

Step 1 Create New Maven-based Dynamic Web Project

Step 1.1 Create New Project

Go to File->New->Others… Select Dynamic Web Project under Web category then click Next. Type JSF2Demo or whatever name you want in the Project name field.

Step 1.2 Configure Target Runtime

  • Click New Runtime… button under Target Runtime.
  • Select Apache Tomcat v7.0. Click Next.
  • Click Browse button to specify Tomcat Server installation directory. The select the folder then click Ok.
  • Click Installed JREs… button to add/remove or edit JRE definition. Remove existing one; then click Add button to configure new one. Select Standard VM; then click Next. Click Directory button to select the root folder of JDK installation. Select the folder then click Ok. Click Finish.
  • Check the JDK then click Ok.
  • Change JRE to the JDK then click Finish.
  • Click Finish the finish the project creation.

Step 1.3 Convert The Project To Maven Project

Right click to the project; select Configure->Convert to Maven Project. Eclipse will generate Project Object Model (pom.xml) file. Open the file by Eclipse text editor then paste the content below.

Note: you can create normal java project and add jar files to your project build path. But it’s easier & faster using maven as maven is integrated with Eclipse IDE; so you don’t need to manually install it. 

Step 2 Create Web Deployment Descriptor (web.xml)

You can create web.xml when creating project or do it later. Right click to the project; select Java EE Tools -> Generate Deployment Descriptor Stub to generate web.xml.

Step 3 Create JSF Managed Bean Class

Right click to the project or src folder; select New->Class.

Note: simply copy the code above to clipboard, select src folder of your project in Eclipse IDE then press CTRL + V.

Step 4 Create XHTML Pages

In this example we need 2 XHTML files. To create XHTML , simply follow the following steps:

  • Right click to the project or WebContent folder, select New -> HTML File from the menu.
  • Choose your file name then click Finish.
  • Eclipse IDE will generate some boilerplate code. We just clear all its content and replace with the following code:

Step 4.1 hello.xhtml

Step 4.2 welcome.xhtml

Step 5 Clean & Build

Clean & build the project to clean old classes file (if any) & force the IDE to recompile java code.

  • Go to Project on menu bar; select Clean…
  • Select Clean all projects (default)
  • Click Ok to proceed clean & build.

Step 6 Configure Tomcat

Select Servers window; in case it’s not there, go to Windows -> Show View-> Others… Select Server -> Servers; then click Ok.

If this is the first time you are creating a server, in the Servers area you will see a link as No servers are available click this link to create a new server. Click the link.

Define a New Server window will be opened, In Select the server type. Select Apache -> Tomcat v7.0 Server. Then click Finish.

Step 7 Deploy The Application

  • Right click to the Tomcat Server select Add and Remove.
  • Move the application (JSF2Demo) from Available column to Configured. Then click on Finish to deploy it to tomcat server.

Step 8 Start Tomcat Server

Right click on the tomcat server and choose Start or simply click on the green start icon to start the server.

Step 9 Run The JSP

We assume that you install tomcat on default port (8080) and project name is JSF2Demo. Open web browser and type:

http://localhost:8080/JSF2Demo/faces/hello.xhtml

Output

A form with a text box & submit button will be displayed. Enter something in the text such as Hello World! and click Say Hello button: