JSF Framework

Nested Page Templates in JSF Framework


Create Maven Project

On the Eclipse, create a Maven project

Click Next button and select maven-archetype-webapp

Click Next button and enter Project Information:

  • GroupId: LearnJSFFrameworkWithRealApps
  • Artifact Id: LearnJSFFrameworkWithRealApps
  • Package: com.demo

Click Finish button to finish create Maven project. Add Libraries and Dynamic Web Module as below:

  1. Select project and right click, select Properties menu
  2. Select Project Facets on left side
  3. Select Dynamic Web Module
  4. Select JavaServer Faces




Configure web.xml

Open web.xml file in src\main\webapp\WEB-INF folder and add configurations for JSF Framework as below:

<?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">
	<display-name>LearnJSFFrameworkWithRealApps</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/home/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>

Configure pom.xml

Open pom.xml file and add configurations for JSF Framework as below:

<project xmlns="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.demo</groupId>
	<artifactId>LearnJSFFrameworkWithRealApps</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>LearnJSFFrameworkWithRealApps Maven Webapp</name>
	<url>http://maven.apache.org</url>

	<dependencies>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.8</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.17</version>
		</dependency>
		<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>

	<build>
		<finalName>LearnJSFFrameworkWithRealApps</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>




Create Managed Beans

Create new package named com.demo in src/main/java folder. In this package, create new managed beans as below:

Home Managed Bean

In com.demo package, create new java class named HomeManagedBean.java as below:

package com.demo;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@SessionScoped
@ManagedBean(name = "homeManagedBean")
public class HomeManagedBean {

	public String index() {
		return "/home/index?faces-redirect=true";
	}

}

AboutUs Managed Bean

In com.demo package, create new java class named AboutUsManagedBean.java as below:

package com.demo;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@SessionScoped
@ManagedBean(name = "aboutUsManagedBean")
public class AboutUsManagedBean {

	public String index() {
		return "/aboutus/aboutus?faces-redirect=true";
	}

	public String about1() {
		return "/aboutus/about1?faces-redirect=true";
	}

	public String about2() {
		return "/aboutus/about2?faces-redirect=true";
	}

}

News Managed Bean

In com.demo package, create new java class named NewsManagedBean.java as below:

package com.demo;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@SessionScoped
@ManagedBean(name = "newsManagedBean")
public class NewsManagedBean {

	public String index() {
		return "/news/news?faces-redirect=true";
	}

	public String news1() {
		return "/news/news1?faces-redirect=true";
	}

	public String news2() {
		return "/news/news2?faces-redirect=true";
	}

	public String news3() {
		return "/news/news3?faces-redirect=true";
	}

}

Create Template Pages

Create new folder named templates in src\main\webapp folder. In this folder, create new xhtml files as below:

Master Template Page

In templates folder, create new xhtml file named masterTemplate.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<h:form>
		<h:commandLink action="#{homeManagedBean.index()}" value="Home" /> |
		<h:commandLink action="#{aboutUsManagedBean.index()}" value="About Us" /> |
		<h:commandLink action="#{newsManagedBean.index()}" value="News" />
		<br></br><br></br>
		<ui:insert name="content"></ui:insert>
		<br></br><br></br>
		Copyright PMK Lab
	</h:form>

</body>
</html>

AboutUs Template Page

In templates folder, create new xhtml file named aboutUsTemplate.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		template="/templates/masterTemplate.xhtml">

		<ui:define name="content">
			<h:commandLink value="About 1" action="#{aboutUsManagedBean.about1()}" /> |
			<h:commandLink value="About 2" action="#{aboutUsManagedBean.about2()}" />
			<br></br><br></br>
			<ui:insert name="aboutUsContent"></ui:insert>
		</ui:define>

	</ui:composition>

</body>
</html>

News Template Page

In templates folder, create new xhtml file named newsTemplate.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		template="/templates/masterTemplate.xhtml">

		<ui:define name="content">
			<h:commandLink value="News 1" action="#{newsManagedBean.news1()}" /> |
			<h:commandLink value="News 2" action="#{newsManagedBean.news2()}" /> |
			<h:commandLink value="News 3" action="#{newsManagedBean.news3()}" />
			<br></br><br></br>
			<ui:insert name="newsContent"></ui:insert>
		</ui:define>

	</ui:composition>

</body>
</html>




Create Views

Create new xhtml files in src\main\webapp as below:

Index View

Create new folder named home folder. In this folder, create new xhtml file named index.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/masterTemplate.xhtml">

		<ui:define name="content">
			<h3>Home Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

AboutUs View

Create new folder named aboutus folder. In this folder, create new xhtml file named aboutus.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/aboutUsTemplate.xhtml">

		<ui:define name="aboutUsContent">
			<h3>About Us Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

About1 View

In aboutus folder, create new xhtml file named about1.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/aboutUsTemplate.xhtml">

		<ui:define name="aboutUsContent">
			<h3>About 1 Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

About2 View

In aboutus folder, create new xhtml file named about2.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/aboutUsTemplate.xhtml">

		<ui:define name="aboutUsContent">
			<h3>About 2 Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

News View

Create new folder named news folder. In this folder, create new xhtml file named news.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/newsTemplate.xhtml">

		<ui:define name="newsContent">
			<h3>News Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

News1 View

In news folder, create new xhtml file named news1.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/newsTemplate.xhtml">

		<ui:define name="newsContent">
			<h3>News 1 Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

News2 View

In news folder, create new xhtml file named news2.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/newsTemplate.xhtml">

		<ui:define name="newsContent">
			<h3>News 2 Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

News3 View

In news folder, create new xhtml file named news3.xhtml as below: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:head></h:head>
<body>

	<ui:composition template="/templates/newsTemplate.xhtml">

		<ui:define name="newsContent">
			<h3>News 3 Page</h3>
		</ui:define>

	</ui:composition>

</body>
</html>

Structure of Project




Run Application

Select project, right click and select Run on Server menu

Access index.xhtml page with following url:

http://localhost:8080/LearnJSFFrameworkWithRealApps/faces/index.xhtml

Index View

AboutUs View

About1 View

About2 View

News View

News1 View

News2 View

News3 View


Related Posts

Pass Objects List from Managed Beans to View in JSF Framework

Pass Object from Managed Beans to View in JSF Framework

Pass Data from Managed Beans to View in JSF Framework