Skip to main content

Java EE 6 For Beginners – JSF 2.1 Tutorial Basic Hello World

Introduction

Hello everybody! Today I’ll show you how to create a very simple Hello World project using JSF technology. JSF, JavaServer Faces, is a server-side component framework for building Java technology-based web applications. For more information about JSF, please read Oracle Java EE tutorial, JSF chapter.

Again, Thank all of you for pointing out my mistakes! 😀

Prepare

In this tutorial, you need have Java EE development environment set up, if you haven’t done yet, please read the last post Java EE 6 For Beginner – Setting Up Development Environment.

IDE: Eclipse Juno

Web Application Server: Weblogic Server 12c

You can download the source code in my git repository: helloworld_jsf

Create Project

Open your eclipse, do as the picture shows below, right click on the white of Package Explorer, select New, then select Dynamic Web Project.

1

 

In the dialog, make the following configuration, type your project name, helloworld_jsf, in this case, make sure the Target runtime is Oracle Weblogic Server 12c(12.1.1). Under configuration, click Modify…

2

 

Check JavaServer Faces, make sure the version is 2.1, then click OK.

3

 

Click Next twice, you should see the guide shown blow, check Generate web.xml deployment descriptor, this is necessary, every JSF project need have a web.xml file to config JSF servlet. Click Next then.

4

 

 

this will automatically generate a faces-config.xml file and add JSF servlet  to web.xml. You needn’t know much faces-config.xml right now, by using annotations, you could completely omit this file. The JSF servlet is responsible for receiving all the request that correspond to the pattern “faces/*”, if you had ever used struts, they’re quite similar. Click Finish.5

 

You will get the hierarchy like below, and the file that contained in the red rectangle will be added later.

 

 

10

 

 

Write Code

1. Create a managed bean

Managed bean is act as Model in MVC Pattern, they process and store data, call service method. Let’s create a managed bean called Greetings.java, it’s a normal Java Class file, the code is shown below:

package com.zxuqian.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Greeting {

	private String greeting = "Hello World!";

	public Greeting() {

	}

	public String getGreeting() {
		return greeting;
	}

	public void setGreeting(String greeting) {
		this.greeting = greeting;
	}

}

@javax.faces.bean.ManagedBean indicates that this class is a JSF managed bean, and @javax.faces.bean.RequestScoped means the managed bean is reques scoped, it persists during a single HTTP request in a web application. The managed bean simply defined a String, greeting, the value is “Hello World”, and accessors, getGreeting, setGreeting. It’s quite simple.

Let’s see index.xhtml, note, the JSF view file name must be end with .xhtml. You can create the xhtml file using this method, right click WebContent direcotyr, select New, then select HTML file:

6

 

Type index.xhtml in the file name input field, click Next:

 

7

 

Select New XHTML (1.0 traditional), click Finish.

 

8

 

add code below into it:

<?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:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
</h:head>
<body>
	<h2>
		<h:outputText value="#{greeting.greeting}" />
	</h2>
</body>
</html>
Notice,you should add xmlns:h="http://java.sun.com/jsf/html" to use JSF html tags. Use "<h:head>" to advoid JSF warnings. This page is simply use <h:outputText> to diaplay text. Value attribute is using EL to get the value of "greeting" of managed bean "Greeting". The first' greeting' is the class name with first letter lower case, the second 'greeting' is the member varaible of managed bean Greeting.

The web.xml file is like below, you need to change welcome file list:

<?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>helloworld_jsf</display-name>
  <welcome-file-list>
    <welcome-file>faces/index.xhtml</welcome-file>
  </welcome-file-list>
  <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>
</web-app>

Run Project

To run the project in Eclipse, right click the project, select Run -> Run on server, then select weblogic application server. When the server has started, type “http://localhost:7001/helloworld_jsf/” in the web browser.

Conclusion

This is a simply JSF web application, just display a String, “Hello World”, in the next posts, I will add more functionality!