MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating your First JSF Application

In this article we will understand what is the Java Server Faces Framework and will learn how to develop our first application with JSF.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Java Server Faces (JSF) is java web application development framework that works on component – based pattern using facelets. Facelets are being used as templates for application development. It uses Java Server Pages (JSP) as its default templating system. This is a java web application framework that provides Component – driven UI design model.

JSF with an example in detail:

Java Server Faces is a web application development framework that provides a component – driven UI design model. In this article, we will go with an example that will display a given name into the web browser. We will use set of tools and application to run this example written using JSF Framework. These tools and applications are listed as:

  • Maven
  • Eclipse (Eclipse Juno)
  • JDK Environment (JDK 1.7)
  • Tomcat (Tomcat 7)
  • JSF (JSF 2.1.7)
 Directory Structure Created for JSF Web application

Figure 1: Directory Structure Created for JSF Web application

Figure 1 shows the directory structure for the JSF dynamic web application into Eclipse IDE that lists the archetype created using Maven 3 project building tools and holds the list of required jar files into libraries.

Maven reads pom.xml file that creates a directory structure for our jsf web application as listed into the listing 1:

Listing 1: pom.xml

<projectxmlns="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>com.mkyong.common</groupId>
<artifactId>JavaServerFaces</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>JavaServerFacesMavenWebapp</name>
<url>http://maven.apache.org</url>

<dependencies>
	
	<!-- http://download.java.net/maven/2 -->
	<dependency>
	<groupId>com.sun.faces</groupId>
	<artifactId>jsf-api</artifactId>
	<version>2.1.0-b03</version>
	</dependency>
	<dependency>
	<groupId>com.sun.faces</groupId>
	<artifactId>jsf-impl</artifactId>
	<version>2.1.0-b03</version>
	</dependency>

<!-- http://repo1.maven.org/maven -->
<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
	<version>1.2</version>
	</dependency>

	<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>servlet-api</artifactId>
	<version>2.5</version>
	</dependency>

	<dependency>
	<groupId>javax.servlet.jsp</groupId>
	<artifactId>jsp-api</artifactId>
	<version>2.1</version>
	</dependency>
	
	<dependency>
	<groupId>com.sun.el</groupId>
	<artifactId>el-ri</artifactId>
	<version>1.0</version>
	</dependency>

</dependencies>

<repositories>
<repository>
<id>java.net.m2</id>
<name>java.net m2 repo</name>
<url>http://download.java.net/maven/2</url>
</repository>
</repositories>

<build>
<finalName>JavaServerFaces</finalName>

<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
</configuration>
</plugin>
</plugins>
</build>
</project>

Listing 1 defines a set of xml tags that pull the archetype from maven repository and resolves dependencies for this pulling archetype. Maven reads pom.xml file and pull “JavaServerFaces” archetype from repository for package name “com.jsftest.common”. This archetype resolves dependencies for JSF 2.1.0 version with Server and JSP API.

Listing 2: web.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<web-appxmlns: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"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID"version="2.5">
<display-name>JSF_First_Program</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>
<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>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>

Once a directory structure has been created, let us define a deployment descriptor for our web application that will configure the application deployment on the web or application server. It will define the flow of requests and the xhtml files that will be loaded and for each request. It also defines a default xhtml file to be loaded on application deployment.web.xml file defines a context-param variable “javax.faces.PROJECT_STAGE” for value “Development” and also defines set of mappings as:

  • Faces Servlet : for all faces into directory “faces” as /faces/*
  • Faces Servlet : for all jsf file as *.jsf
  • Faces Servlet : for all faces as *.faces
  • Faces Servlet : for all xhtml files as *.xhtml

These all mappings will be access by a single jsf class “javax.faces.webapp.FacesServlet” for class mapping name “Faces Servlet”.

So, In this example, we gonna define aindex.xhml file that will accept a name by the user that will be displayed to another xhtml file named welcome.xhtml file. This task is achieved using a java class file that will help to map the username using a getter () and setter () method defined into the java class file.

Let’s define index.xhtml into Listng 3 as:

Listing 3: index.xhtml

<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="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 First Example Home Page</h3>
	<h:form>
		<h:inputTextvalue="#{firstClass.name}"></h:inputText>
		<h:commandButtonvalue="Let’s Go"action="welcome"></h:commandButton>
	</h:form>
	</h:body>
</html>

Listing 3 defines aindex.xhtml file that uses jsf tags library that is used using <h:>seperator. We use <h:form> to create a html form and <h:inputText> tag creates a input attribute for the user to enter a username and a submit button is created using <h:commandButton>. <h:commandButton> defines the action url, where the request will land and response will be rendered. The input parameters are assigned to java class using a special configuration as:

#{firstClass.name}

“firstClass” is the class name. The class name is written by lowercase at its first character and “name” is the class member variable for this class. This value will be accessed using the getter () method and will be rendered using the setter () method as listed into Listing 4:

Listing 4: FirstClass.java

packagecom.jsftest.common;

importjavax.faces.bean.ManagedBean;
importjavax.faces.bean.SessionScoped;
importjava.io.Serializable;

@ManagedBean
@SessionScoped
publicclassFirstClassimplementsSerializable {

	privatestaticfinallongserialVersionUID = 1L;
	
	private String name;

	public String getName() {
		returnname;
	}

	publicvoidsetName(String name) {
		this.name = name;
	}
	
}

Listing 4 defines a FirstClass.java that implements “Serializable” interface and is followed by two annotation classes “@ManagedBean” and “@SessionScoped”. The annotation “@ManagedBean” is to indicate that this class is a managed bean and “@SessionScoped” annotation is to indicate that this class handles a session into itself. It defines a class member variable “name” with its getter () and setter () methods. It also defines a serialbeVersionUID for the application.

Listing 5: welcome.xhtml

<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="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 First Example</title>
</h:head>
<h:bodybgcolor="white">
	<h3>JSF 2.0 First Demo Example</h3>
	<h4>Welcome #{firstClass.name}</h4>
	</h:body>
</html>

Listing 5 defines a welcome.xhtml file that receives the username entered using the setter () method of the class “FristClass.java” and displays into the web browser. To access the name from the java class we are required to specify the class name with its class member variable name that is needed to be access as:

#{firstClass.name}

To deploy this application from the Eclipse IDE, just right on the project and choose “Run As -> Run on Server” and choose the server “tomcat 7” to deploy the application and hit “Finish” button. This will deploy the web application into the web browser as displayed into Figure 2:

index.xhtml page loaded by-default, once application deployed

Figure 2: index.xhtml page loaded by-default, once application deployed

Once we hit button “Welcome Me”, it will display the username into the welcome.xhtml page with a welcome message as listed into Figure 3:

 welcome.xhtml displays the username entered by the user

Figure 3: welcome.xhtml displays the username entered by the user

Figure 3 displayes the username “umesh” entered by the user from “index.xhtml” file.

Conclusion:

In this article we learn about Java Server Faces web application development framework that is a component based design modeling framework. We also went through an example that displays the name of the user entered.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login