×
☰ See All Chapters

JSF example using maven

In this tutorial you will learn to create JSF example application using maven. Follow the below steps to create the example. Steps are easy and simple that you no need to have any prior knowledge on JSF.  

Create java Project using Maven

In the command prompt execute the following maven command to generate Maven supported Java project named as “JSFExampleUsingMaven”.

mvn archetype:generate -DgroupId=com.java4coding -DartifactId=JSFExampleUsingMaven -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

jsf-example-using-maven-0
 

This command creates a new maven Java project with the name “JSFExampleUsingMaven”, with complete directory structure.

jsf-example-using-maven-1
 

Convert to eclipse project

To import Maven project into Eclipse IDE, in terminal, navigate inside “JSFExampleUsingMaven” project (folder should has pom.xml file), and issue mvn eclipse:eclipse command.

jsf-example-using-maven-2
 

 

Import converted project into Eclipse IDE

 

In Eclipse IDE, Choose File –> Import –> General -> Existing Projects into Workspace –>Choose your project folder location. Done

jsf-example-using-maven-3
 

Covert the project to Maven Project in eclipse - Right Click on Project > Configure > Convert to Maven Project

jsf-example-using-maven-4
 

Create src/main/java source folder. Sometimes this folder will be filtered out from eclipse package explorer. If already this src/main/java source folder is available you will not be allowed to create it, but if already present and hidden you right click on project > New > Folder, it will make this src/main/java source folder visible.  If this src/main/java source does not exists you should right click on project > New > Source Folder,  it will create the folder as source folder.

jsf-example-using-maven-5
 
jsf-example-using-maven-6
 
jsf-example-using-maven-7
 

Add dependencies in pom.xml

Add the below JSF API and Implementation dependencies in pom.xml file. After updating pom.xml, Press Alt+F12 to update the maven project in eclipse.

pom.xml

<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/maven-v4_0_0.xsd">

        <modelVersion>4.0.0</modelVersion>

        <groupId>com.java4coding</groupId>

        <artifactId>JSFExampleUsingMaven</artifactId>

        <packaging>war</packaging>

        <version>1.0-SNAPSHOT</version>

        <name>JSFExampleUsingMaven Maven Webapp</name>

        <url>https://maven.apache.org</url>

        <dependencies>

                <dependency>

                        <groupId>com.sun.faces</groupId>

                        <artifactId>jsf-api</artifactId>

                        <version>2.2.6</version>

                </dependency>

                <dependency>

                        <groupId>com.sun.faces</groupId>

                        <artifactId>jsf-impl</artifactId>

                        <version>2.2.6</version>

                </dependency>

        </dependencies>

        <build>

                <finalName>JSFExampleUsingMaven</finalName>

        </build>

</project>

Create facelets

In this example we create 3 facelets login.xhtml, success.xhtml and failure.xhtml. In login.xhtml user is asked to input name and password. If name is “Manu_M” and password is “mm” then success.xhtml is given as response, otherwise failure.xhtml is given as response.

jsf-example-using-maven-8
 

login.xhtml

<!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://xmlns.jcp.org/jsf/html"

        xmlns:f="https://xmlns.jcp.org/jsf/core">

 

<h:head></h:head>

<h:body style="background-color:yellow">

        <h:form>

                <h1>Please enter your details</h1>

                <h:panelGrid columns="2">

                <h:outputText value="Enter your name"/>

                <h:inputText id="nme" value="#{helloBean.name}"/>

               

                <h:outputText value="Enter your password"/>

                <h:inputSecret id ="pwd" value="#{helloBean.password}"/>

               

                <h:commandButton value="LOGIN" action ="#{helloBean.checkUser}"/>

                </h:panelGrid>

        </h:form>

</h:body>

</html>

success.xhtml

<!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://xmlns.jcp.org/jsf/html"

        xmlns:f="https://xmlns.jcp.org/jsf/core">

 

<h:head></h:head>

<h:body style="background-color:green">

        <h1>

                Hello Mr.

                <h:outputText value="#{helloBean.name}" />

                you are welcome <br /> Thank You for logging in....

        </h1>

</h:body>

</html>

 

failure.xhtml

<!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://xmlns.jcp.org/jsf/html"

        xmlns:f="https://xmlns.jcp.org/jsf/core">

 

<h:head></h:head>

<h:body style="background-color:red">

        <h1>

                Hello Mr.

                <h:outputText value="#{helloBean.name}" />

                you are not welcome <br /> You are invalid user

        </h1>

</h:body>

 

</html>

 

Create ManagedBean

Managed bean example for facelets logixhtml. success.xtml and failure.xhtml

HelloBean.java

package com.java4coding;

 

public class HelloBean {

 

        private String name;

        private String password;

 

        public String getName() {

                return name;

        }

 

        public void setName(String name) {

                this.name = name;

        }

 

        public String getPassword() {

                return password;

        }

 

        public void setPassword(String password) {

                this.password = password;

        }

 

        public String checkUser() {

                String str = null;

                if (name.equalsIgnoreCase("Manu_M") && password.equalsIgnoreCase("mm")) {

                        str = "success";

                        return str;

                } else {

                        str = "failure";

                        return str;

                }

        }

}

Add FacesServlet entry in web.xml file

<!DOCTYPE web-app PUBLIC

 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

 "https://java.sun.com/dtd/web-app_2_3.dtd" >

 

<web-app>

        <display-name>Archetype Created Web Application</display-name>

        <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>*.xhtml</url-pattern>

        </servlet-mapping>

</web-app>

When web.xml is generated automatically by eclipse, url pattern will be as below

<url-pattern>/faces/*</url-pattern>

This also works fine, but change the url pattern to as below

<url-pattern> *.xhtml</url-pattern>

Create faces-config.xml

faces-config.xml is used to

    • locate ManagedBean and to set its scope 

    • define navigation 

    • to register custom components, custom converters, listeners etc… 

faces-config.xml is used for many purposes, but mandatory works to be done in faces-config.xml are

  • locate ManagedBean and set its scope 

  • define navigation 

Take the advantage of eclipse UI support to write faces-config.xml(hence we need not to learn coding for faces-config.xml)

Below is the faces-config.xml example for ManagedBean: HelloBean and for facelets: logixhtml. success.xtml and failure.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<faces-config version="2.2"

        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-facesconfig_2_2.xsd">

        <managed-bean>

                <managed-bean-name>helloBean</managed-bean-name>

                <managed-bean-class>com.java4coding.HelloBean</managed-bean-class>

                <managed-bean-scope>request</managed-bean-scope>

        </managed-bean>

        <navigation-rule>

                <from-view-id>/facelets/login.xhtml</from-view-id>

                <navigation-case>

                        <from-outcome>success</from-outcome>

                        <to-view-id>/facelets/success.xhtml</to-view-id>

                </navigation-case>

                <navigation-case>

                        <from-outcome>failure</from-outcome>

                        <to-view-id>/facelets/failure.xhtml</to-view-id>

                </navigation-case>

        </navigation-rule>

        <application />

</faces-config>

Eclipse final project directory structure

jsf-example-using-maven-9
 

Output

jsf-example-using-maven-10
 
All Chapters
Author