JSF - Java Server Faces

Before start using JSF technology, you need the following:

  • Apache Tomcat server
  • JSF API
  • JSTL libraries

Follow this link to setup JSF environment for Eclipse: click

HelloWorld

Create new Dynamic Web Project in Eclipse



hello.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<body>
<f:view>
<h:outputText value="Hello JSF World" />
</f:view>
</body>
</html>

index.jsp

<jsp:forward page="hello.jsf" ></jsp:forward>

web.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" http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"="WebApp_ID" version="2.5" >
<display-name>JSFHello</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</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-->
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
</web-app>

SayHello

Create Dynamic Web Project



inputname.jsp

<%@ taglib="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>enter your name page</title>
</head>
<body>
<f:view>
<h1>
<h:outputText value="JSF 1.2" />
</h1>
<h:form id="UserEntryForm" >
<h:outputText value="Enter Your Name:" />
<h:inputText value="#{personBean.name}" />
<h:commandButton action="sayhello" value="OK" />
</h:form>
</f:view>
</body>
</html>

sayhello.jsp

<%@ taglib="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<f:view>
<h3>
<h:outputText value="Welcome" />,
<h:outputText value="#{personBean.name}" /> to JSF 1.2 World!
</h3>
</f:view>
</body>
</html>

PersonBean

package test;

public class PersonBean {

String name;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

}

faces-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<faces-config
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>test.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<display-name>pages/inputname</display-name>
<from-view-id>/pages/inputname.jsp</from-view-id>
<navigation-case>
<from-outcome>sayhello</from-outcome>
<to-view-id>/pages/sayhello.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

web.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" http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"="WebApp_ID" version="2.5" >
<display-name>JSFSayHello</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</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>*.jsf</url-pattern>
</servlet-mapping>
</web-app>

index.jsp

<jsp:forward page="/pages/inputname.jsf" ></jsp:forward>

JSF properties file



inputname.jsp

<%@ taglib="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>enter your name page</title>
</head>
<body>
<f:view>
<f:loadBundle basename="test.messages" var="msg" />
<h1>
<h:outputText value="#{msg.header}" />
</h1>
<h:form id="UserEntryForm" >
<h:outputText value="#{msg.your_name}" />
<h:inputText value="#{personBean.name}" />
<h:commandButton action="sayhello" value="#{msg.button_text_ok}" />
</h:form>
</f:view>
</body>
</html>

sayhello.jsp

<%@ taglib="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib="http://java.sun.com/jsf/core" prefix="f" %>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<f:view>
<f:loadBundle basename="test.messages" var="msg" />
<h3>
<h:outputText value="#{msg.welcome}" />,
<h:outputText value="#{personBean.name}" /> 
<h:outputText value="#{msg.jsf_world}" />
</h3>
</f:view>
</body>
</html>

messages.properties

title=Enter your name page
welcome=Welcome
header=JSF 1.2
your_name=Enter Your Name:
button_text_ok=OK
jsf_world= to JSF 1.2!

PersonBean

package test;

public class PersonBean {

String name;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

}

faces-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"="1.2" >
<managed-bean>
<managed-bean-name>personBean</managed-bean-name>
<managed-bean-class>test.PersonBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<display-name>pages/inputname</display-name>
<from-view-id>/pages/inputname.jsp</from-view-id>
<navigation-case>
<from-outcome>sayhello</from-outcome>
<to-view-id>/pages/sayhello.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

web.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" http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"="WebApp_ID" version="2.5" >
<display-name>JSFProps</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</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>*.jsf</url-pattern>
</servlet-mapping>
</web-app>

index.jsp

<jsp:forward page="/pages/inputname.jsf" ></jsp:forward>