JavaServer Faces (JSF) is a server side component framework for building Java Technology web-based application. JavaServer Faces (JSF) consists of two main parts:
- The JavaServer Faces API for representing components, managing their states, handling events, handling server side validations, and achieving data conversion; defining pages navigation, supporting internationalization and accessibility and providing extensibility for all these features.
- Tag libraries for adding components to the web pages and connecting those components into their corresponding server side objects.
This post should clarify how a JSF framework could be installed and configured by using Eclipse IDE and Maven.
Also Read:
Tools Used
This post will use the following tools for achieving the required installation and configuration:
Create JSF Project With Maven
To create a Web Project using maven, you should use the maven archetype. The Archetype is a template toolkit that used for creating a standard Java projects. Those templates are used to create several types of Java projects starting from a standard simple Java into very complicated Enterprise application.
Creating a maven Web Project should follow these steps mentioned below:
- Download the latest maven-archetypes-templates from an official “Github” site Maven Archetypes Zip File using the “Download Zip” link that’s appended at the right panel of the page.
- Unzip the file inside an empty folder and navigate into quickstart-web-app folder and execute the following maven commands to install the template that will be used to create a simple standard Web Project:
- Execute mvn clean archetype:create-from-project. The result of execution should be a new template that must be installed on your local repository to be used later.
- Navigate to “target/generated-sources/archetype” and execute mvn install to install the created template into your local repository.
- Navigate into an empty folder and execute mvn archetype:generate -DarchetypeCatalog=local -DgroupId=net.javabeat.eclipselink –DartifactId=EclipseLink-Installation -Dversion=1.0
- A list of local archetype will be listed if you have different archetypes that have been created.
- Enter the number beside of the archetype named “quickstart-web-app-archetype”.
- List all folders that created in a step 3 by using dir or ls based on your Os. You should see the artifact JavaBeat-JSF-Installation.
- The JavaBeat-JSF-Installation is a standard Web Project that created by the maven. The created project contains your own named package that passed in the -DgroupId.
See the below screen shot that shows you the created project and its structure.
Import Maven Web Project Into Eclipse IDE
Eclipse IDE provides the developer capability of importing a maven project through an eclipse driven wizard. Follow the following steps to import the project created previously.
- Open EclipseIDE.
- Right-Click at the “Project Explorer”.
- Choose import option and from the right menu click import.
- Expand the maven tree.
- Choose Existing Maven Projects. And click next.
- Navigate into your created project by using the browse and click ok. In our case the path is C:\JavaBeat\archetype.
- The Eclipse IDE should read the pom.xml and tell you with the name of the projects found there.
- In our case the Eclipse IDE will mention /JavaBeat-JSF-Installation/pom.xml.
- Select the project & click finish.
- The Web Project should be imported.
The below snapshot shows you the full structure of the imported directory.
At the end of the previous steps, you are now having a Dynamic Web Project that’s ready for next coming installation and configuration of JavaServer Faces (JSF).
Add JSF Dependencies
If you’ve want to complete adding the JavaServer Faces required library by using a faceted project you can follow the link of installation and configuration of JavaServer Faces using the Facet Dynamic Web Project using Eclipse.
But here’s an adding of the required libraries should be done through the maven dependencies. First of all we have to configure the pom.xml in order to support the JavaServer Faces (JSF). To configure the pom.xml file you’ve to follow the below steps:
- Double click on the pom.xml file.
- Navigate into the pom.xml pane that located at the last Tab.
- Maven dependencies for JavaServer Faces are mentioned at the following link and use the Mojarra Sun’s Reference Implementation.
Add the following dependencies inside the <dependencies> Tag:
[code lang=”xml”]
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>${servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.4</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>mojarra-jsf-api</artifactId>
<version>2.0.0-b04</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.4</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>mojarra-jsf-impl</artifactId>
<version>2.0.0-b04</version>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
[/code]
Installing the Dependencies
For installing the dependencies that you’ve mentioned in the pom.xml file you have two choice:
- By invoking the Eclipse IDE Build Project Shortcut Ctrl + B.
- By invoking the Maven clean install command.
The below snapshots shows you the behavior for each way of installing respectively.
Configure the Deployment Descriptor (web.xml)
The web.xml file should be configured to make the application capable of invoking the JavaServer Faces (JSF) implementation. Such that configuration should consider the following points:
- Configure the JavaServer Faces Front Servlet that would be used by the JavaServer Faces implementation and the mapping URL that would be used for triggering that Servlet.
- Configure the location of the faces-config.xml file that will be used for defining the Managed Beans, Navigation Cases and Custom Components (Validator, Converter and etc ..)
- Configure the location that will be used for saving the state of the view components.
- Configure the JavaServer Faces Listener.
The web.xml file should looks like the below
[code lang=”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_2_5.xsd"
id="WebApp_ID" version="2.5" metadata-complete="true">
<context-param>
<description>State saving method: ‘client’ or ‘server’ (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.application.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<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></pre>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<pre>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>
[/code]
Creating Managed Bean
The Managed bean is the place that you’ve used for managing the data back and forth between the user interface and the server. At the Hello World example we are going to define a new Manged Bean in order to make a Hello World ! message readable from the server side instead of mentioning it directly at the page. Before JavaServer Faces 2, the creation of managed server does need a faces-config.xml to mention it.
To create a managed bean, all you need is to do the following:
- Right Click on the package named net.javabeat.jsf
- Select New -> Class.
- Change the name of the class.
- Define new property helloProperty.
[code lang=”java”]
package net.javabeat.jsf;
public class HelloWorldBackingBean {
private String helloProperty = "Hello World !";
public String getHelloProperty() {
return helloProperty;
}
public void setHelloProperty(String helloProperty) {
this.helloProperty = helloProperty;
}
}
[/code]
Configure faces-config.xml
The faces-config.xml file should also be configured to contains those managed beans that would be used in the JavaServer Faces pages. The below fragment of code shows you the full faces-config.xml for the Hello World application, in case you’ve decided to define your beans in the face-config.xml. Since JavaServer Faces 2 the beans are defined using the annotation of @ManagedBean.
[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
<managed-bean>
<managed-bean-name>helloWorldBackingBean</managed-bean-name>
<managed-bean-class>net.javabeat.jsf.HelloWorldBackingBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
[/code]
By the way, the following fragment of code will show you the JavaServer Faces (JSF) beans defined using @ManagedBean. The managed bean that created is simply a java class file annotated using @ManagedBean and by that the JavaServer Faces implementation will scan your classpath for finding those classes annotated @ManagedBean.
[code lang=”java”]
package net.javabeat.jsf;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class HelloWorldBackingBean {
private String helloProperty = "Hello World !";
public String getHelloProperty() {
return helloProperty;
}
public void setHelloProperty(String helloProperty) {
this.helloProperty = helloProperty;
}
}
[/code]
Configure Apache Tomcat
If you’ve ever been configured the Apache Tomcat for executing a JSF samples, you’ve requested to install and configure it for next coming use. Follow the below steps for making Apache Tomcat for use.
- From the dynamic project and underneath of Target Runtime -> Select New Runtime
- Select Apache Tomcat v7.0 -> Click Next
- Type the name of the server that you’ve been installing.
- Navigate into the destination path of the Apache Tomcat 7.0 (Download the Apache Tomcat 7.0).
- Click on the server pane by Window -> show view -> Servers or Other -> Servers.
- You should find the following message (No Servers are available. Click this link to create a new server …)
- Choose Tomcat 7.0
- Let’s the remaining configuration without touch.
- Click next and finish.
- The server is installed and is ready for use
Create JavaServer Faces Page
After creating, configuring and installing the all libraries that required to start using of JavaServer Faces, it’s time to create the first Hello World sample.
- Right-Click the project’s WebContent.
- Select New -> HTML File.
- Name your file with an index.xhtml -> Click Next
- Select New XHTML File (1.0 strict) -> Click Finish
- Write a JavaServer Faces fragment of code for using the defined bean.
- The HelloWorldBackingBean contains an attribute with a getter and setter (This is a JSF constraint for showing the bean’s properties).
- A new property defined in the HelloWorldBackingBean called (helloProperty) with a default value Hello World !.
The page that you will create it must be as below
[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>
<h:outputText value="#{helloWorldBackingBean.helloProperty}"></h:outputText>
</f:view>
</html>
[/code]
Run index.xhtml
To run the index.xhtml you should follow the below steps:
- Righ-Click on the index.xhtml
- Select Run As
- Select the configured Apache Server that you’ve done before.
- Click finish.
- You should see the message Hello World !
What’s The Next
After finishing the installation and configuration of JSF 2, you have the chance to go through another tutorials that clarify you how a different types of JSF componenets could be used.
