Jakarta Faces 4 (JSF) with JPA as Backend DataAccess Example

This example demonstrates the usage of the j-framework in creating a project that uses relational database engine as persistence layer, and uses JPA.

Prerequisites:

  1. You should have JDK 17+ Installed. (Click Here).

  2. You should create a Maven Project.

  3. You should enable snapshot versions. (Click Here).

Project Content:

This section contains what you should add to your code structure for this example.

  1. Maven Project with pom.xml that has the following contents:

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>com.jalalkiswani</groupId>
		<artifactId>j-app-webstack</artifactId>
		<version>7.0.1</version>
	</parent>
	<artifactId>j-framework-web-jpa-example</artifactId>
	<packaging>war</packaging>

</project>

  1. Database configurations file located at src/main/resources/config.properties that has the following content:

hibernate.connection.url = jdbc:h2:file:./h2db.data

hibernate.connection.username=sa
hibernate.connection.password=sa

hibernate.hbm2ddl.auto=update
db-entities-packages=com.app

  1. Java Model class is located at src/main/java/com/app/person/Model.java that has the following content:

package com.app.person;

import java.io.Serializable;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;

@Entity
@Table(name="person")
public class Model implements Serializable {

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(name="id")
	private Integer id;

	@Column(name="national_id")
	private String nationalId;

	@Column(name="name")
	private String name;

	@Column(name="email")
	private String email;

	@Column(name="address")
	private String address;


	public void setId(Integer id){
	  this.id=id;
	}

	public Integer getId(){
	 return this.id;
	}

	public void setNationalId(String nationalId){
	  this.nationalId=nationalId;
	}

	public String getNationalId(){
	 return this.nationalId;
	}

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

	public String getName(){
	 return this.name;
	}

	public void setEmail(String email){
	  this.email=email;
	}

	public String getEmail(){
	 return this.email;
	}

	public void setAddress(String address){
	  this.address=address;
	}

	public String getAddress(){
	 return this.address;
	}


	@Override
	public boolean equals(Object obj) {
	  if (obj == null) {
		return false;
	  }
	  return this.getId().equals(((Model) obj).getId());
	}

	@Override
	public int hashCode() {
	  if(this.id==null) {
	    return toString().hashCode();
	   }
	  return this.id.hashCode();
	}

	@Override
	public String toString(){
	  StringBuffer buf=new StringBuffer();
	  buf.append(this.id).append(",");
	  buf.append(this.nationalId).append(",");
	  buf.append(this.name).append(",");
	  buf.append(this.email).append(",");
	  buf.append(this.address).append(",");
	  return buf.toString();
	}
}

  1. Faces Controller located at src/main/java/com/app/person/Controller.java which contains the following:

package com.app.person;

import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

import com.jk.webstack.controllers.JKWebControllerWithOrmSupport;

@Named("controller")
@ViewScoped
public class Controller extends JKWebControllerWithOrmSupport<Model> {
}

  1. Faces View located at src/main/webapp/index.xhtml which contains the following:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:composition template="/WEB-INF/templates/default.xhtml">
	<ui:define name="page-title">Home Page</ui:define>
	<ui:define name="contents">
		<div class="product-banner">
			<div class="product-name">Welcome to J-Framework Demo</div>
			<div class="product-summary">Your product summary</div>
			<div class="product-version">Version 1.0</div>
		</div>
	</ui:define>
</ui:composition>
</html>

  1. Main java class located at src/main/java/com/app/App.java which contains the following:

package com.app;

import com.jk.web.embedded.JKWebApplication;

public class App {
	public static void main(String[] args) {
		JKWebApplication.run();
	}
}

Alternatively, you can clone or download the tutorial repository then import the project into your IDE.

How to run Project:

  1. Set up the project with the content shown above.

  2. Inside your IDE, go to the src/main/java/com/app/App.java class.

Main Class

  1. Next, run it as a Java Application.

Run as Java Application

  1. Your program will start running and will open your browser to show you the result of the run. Alternatively, after running the code, you can open any browser to localhost on port 8080, and it will show you the run output as well.

localhost:8080

Example Explanation

  1. The first page you would see when you run the code is the home page, from it, you can see the link to the Person page.

Example Run 1

  1. After heading to the Person page, you will see a form which will enter the data you input in it into the database. After filling in the form, press the Add button to add it to the database.

Example Run 2

  1. You can see the new entry in the person data table shown below the form.

Example Run 3

  1. You can also press the Fill button to automatically fill the field with random data.

  2. Pressing the Reset button will clear the data inside the form fields.