Tutorial on Java Server Faces (JSF)

2 years ago

9 minutes

JSF Tutorial for Beginners is here to welcome you. JSF, or Java Server Faces, is a front end framework that simplifies the creation of user interface components by allowing the reuse of these components. It is built on the Model View Controller (MVC) pattern, which separates the presentation, controller, and business logic.

Tutorial on JSF for those new to it.

The Model View Controller pattern is composed of three parts. The model consists of the necessary business logic to achieve the desired business scenario. The view represents the presentation layer, such as JSP or JSF pages. The controller manages the transfer of control between the model and view based on the requested operation. JSF offers various components for building a user interface.

Standard basic input elements like fields, buttons etc. that forms the set of base UI components.
Rendering ability of JSF depending on the the client specifications
Core library
Extending available ui components to add more components and use them for accomplishing client requirements.

Setting up the environment for beginners in JSF tutorial.

In this guide, we will cover all the essential procedures to configure your computer for creating your initial JSF application.

Installing JDK

You can obtain the jdk by downloading it from the Oracle website at https://www.oracle.com/technetwork/java/javase/downloads/index.html. Upon installation, set the environmental variable JAVA_HOME to the bin path of the installed jdk (for instance, “C:\Program Files\Java\jdk1.7.0_60”). Additionally, include JAVA_HOME\bin in the PATH variable to ensure the java binaries can be located. To verify successful installation of java on your machine, enter “javac” in the command window to view available options, or enter “java -version” to observe the installed java version. For further information, refer to the post on How to install Java on Windows.

installing an integrated development environment

You can choose from various popular IDEs like Eclipse, NetBeans, and IntelliJ IDEA. To get Eclipse, visit https://www.eclipse.org/downloads/ and execute the downloaded binary file to install it on your computer. For NetBeans, get the NetBeans IDE from https://netbeans.org/downloads/ and follow the installation process.

How to install Apache Tomcat.

To begin, obtain tomcat through this link: https://tomcat.apache.org/. Execute the downloaded binary file and assign the CATALINA_HOME variable to indicate the installation directory. Subsequently, launch the server and navigate to https://localhost:8080 in your preferred browser to verify a successful tomcat installation through the appearance of the default tomcat page. Our initial setup is now complete, enabling us to proceed with developing our first JSF application.

A tutorial on JSF for beginners, showing how to create a Hello World application.

Now, let’s proceed with the creation of a basic JSF web application that displays a “hello world” message. First, download the necessary jars required to run JSF code from the Maven Central Repository at https://search.maven.org/. To simplify the management of dependencies, it is recommended to use a build system like Maven. In our examples, we will be utilizing Maven, so kindly refer to the pom.xml file for the required dependencies: jsf-api-1.2.jar, jsf-impl-2.2.8-04.jar, and pom.xml.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.scdev.jsf</groupId>
    <artifactId>JSF_HelloWorld</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>JSF_HelloWorld</name>

    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.13</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.13</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

Beginners can follow this JSF tutorial to learn how to create a managed bean.

A managed bean is a Java class that is registered to JSF in order to facilitate communication between the user interface and the business logic. To create a managed bean named HelloWorld.java, utilize the @ManagedBean annotation.

package com.scdev.jsf.helloworld;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
    
    private static final long serialVersionUID = -6913972022251814607L;
	
    private String s1 = "Hello World!!";

    public String getS1() {
        System.out.println(s1);
        return s1;
    }

    public void setS1(String s1) {
        this.s1 = s1;
    }
  
}

The @ManagedBean annotation signifies that the HelloWorld class is a managed bean. The @SessionScoped bean indicates that the bean will remain active until the HttpSession is valid. In this case, a string s1 is declared and initialized with the value “Hello World”, and getter and setter methods are defined to retrieve the value of s1. It is also possible to specify the bean name using @ManagedBean(name=”helloWorld”). If no name is provided, the name is derived based on Java naming standards. However, it is recommended to always provide the bean name for best practice.

Beginners’ Guide to JSF – Displaying Web Pages

Create a JSF page called helloWorld.xhtml which communicates with the HelloWorld bean and retrieves the value using the getter method, then displays it on the response page.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
       #{helloWorld.s1}
<br /><br />

</h:body>
</html>

In this case, we refer to the bean as “helloWorld.s1” which stores the value “Hello World”.

Configuration of the Deployment Descriptor

The last step involves setting up the JSF Controller class to manage the customer requests. The FacesServlet acts as the JSF controller servlet, and the configuration for the web.xml file is provided below.

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
            30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>

The project structure of the final JSF Hello world project in Eclipse will now appear as shown below. In the web.xml file, we specify the entry for the faces config file, as well as the servlet mapping for faces, the session timeout, and the welcome file that will be loaded when the application starts. Once we have made these changes, we can run the application, which will display the following output in the browser. This concludes the JSF tutorial for beginners. In future posts, we will explore different JSF page components. In the meantime, you can download the project from the link below and experiment with it to enhance your understanding.

Get the JSF Hello World Project by downloading it.