Page Templates in JSF Framework

Home » Java » JSF » Page Templates in JSF Framework
06 Jul, 2018 Categories: JSF


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/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 "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?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?faces-redirect=true";
	}

}

Create Template Page

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

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>My Template</title>
</h:head>
<h:body>

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

</h:body>
</html>




Create Views

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

Index View

Create new xhtml file named index.xhtml as below: 

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<title>Home Page</title>
</h:head>
<h:body>

	<ui:composition template="/templates/mytemplate.xhtml">
		<ui:define name="content">
			<h3>Home Page</h3>
		</ui:define>
	</ui:composition>

</h:body>
</html>

AboutUs View

Create new xhtml file named aboutus.xhtml as below: 

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>About Us Page</title>
</h:head>
<h:body>

	<ui:composition template="/templates/mytemplate.xhtml">
		<ui:define name="content">
			<h3>About Us Page</h3>
		</ui:define>
	</ui:composition>

</h:body>
</html>

News View

Create new xhtml file named news.xhtml as below: 

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>News Page</title>
</h:head>
<h:body>

	<ui:composition template="/templates/mytemplate.xhtml">
		<ui:define name="content">
			<h3>News Page</h3>
		</ui:define>
	</ui:composition>

</h: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

News View


Tags

Related Posts

Top