Nested Page Templates in JSF Framework


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




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>

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 new package named com.demo in src/main/java folder. In this package, create new managed beans as below:

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";
	}

}

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";
	}

}

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 new folder named templates in src\main\webapp folder. In this folder, create new xhtml files as below:

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>

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>

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 new xhtml files in src\main\webapp as below:

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>

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>

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>

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>

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>

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>

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>

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>




Select project, right click and select Run on Server menu

Access index.xhtml page with following url:

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