Liferay Tutorial – Liferay Portal Portlet Tutorial With Examples [Latest]

Liferay Tutorial

There are different types of Portlet containers such as Apache Pluto, Oracle Web center and Liferay. This tutorial is intended to provide you a full detailed explanation for getting Liferay Portal up and running and deploy the same employee registration sample that we had developed in earlier tutorial.

Generally, you may find some difference between Apache Pluto and Liferay but actually, a lot of work has already done on behalf of you when it comes to develop a Portlet using Liferay.

Liferay has also supported different types of Portlets as well as added others, Standard Portlet, JSF, Liferay MVC are mainly used with Liferay.

Liferay Tutorial Project Structure

Find below the full structure for the sample developed below:

Liferay Eclipse Plugin

To make Liferay Portlet development much easier, an Eclipse Plugin should be installed. This plugin will help you creating Liferay Portlet with its proprieties to be deployed smoothly later on. Following below steps will help you install it:

• From Help menu inside your Eclipse IDE, select Install New Software.
• Past this URL https://releases.liferay.com/tools/ide/latest/milestone/ inside Work With input.
• 

• Click next and accept the terms and conditions.
• Click finish.

Download Liferay

Downloading of Liferay Portal isn’t much hard mission, just you may follow the below steps to make sure you have proper Liferay Portal installed up and running using your Eclipse.

• Download latest Liferay Portal from this link.
• Unzip the downloaded into your directory.
• Restart your Eclipse and make sure you’re able of defining a new Liferay Server.
• 

• Click next and browse towered you unzipped Liferay.
• Click next & finish.
• Start the server from Servers pane.
• Waiting till the server get started and the browser open on https://localhost:8080/.
• 

• Fill in all required information before finish the configuration.
• 

• Click finish configuration.
• Once you’ve configured it successfully, click Go to My Portal.

• Accept the terms by clicking on I Agree.
• Enter your password that will be used for logging into your Portal later on and click on save.
• Select the password reminder question and type its answer and click save.
• 

Create Liferay Plugin Project & Portlet

We will use the Liferay plugin to get an instance of Liferay JSF Portlet and develop an employee registration form. This form is already done through wide range of Portlet containers and Portlet types. The same sample would be introduced using the Liferay Portal and its proprietaries.

Following below required steps for creating this Portlet:

• From your Project Explorer, Right-Click and select New.
• From the Select Wizard, liferay menu, select Liferay Portlet & Click next.
• When eclipse asked you if you would to open new liferay Plugin Project Wizard, just answer yes. That lets you creating a Liferay Portlet as a Liferay Plugin.
• From the shown wizard, fill in all the required information.
• 

• Determine the active profiles that you’ve set above by clicking on Create New Maven Profile Based on Liferay Runtime button that’s beside the Active Profiles input.
• 

• Click next & select JSF 2.x.
• 

• Click next and select the JSF component suite. Mainly, we’ve used a JSF Standard Implementation.
• 

• Click finish & bypass the Portlet creation wizard that’s displayed after then.

Database Design

Database design isn’t vary differ from what already we provided before in the previous JSF sample. It’s just a simple Employee Table that shows like below:

And you can find below used SQL query to get Employee Table created into your database:

CREATE TABLE `employee` (
  `EMP_ID` int(11) NOT NULL AUTO_INCREMENT,
  `EMP_NAME` varchar(45) DEFAULT NULL,
  `EMP_JOB` varchar(45) DEFAULT NULL,
  `EMP_SALARY` int(11) DEFAULT NULL,
  PRIMARY KEY (`EMP_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

Employee Model

Typically, your data shouldn’t be passed individually, and so a model must be defined for this purpose. Employee model will be like normal Java class below:

package com.journaldev.data;
public class Employee {
	private String id;
	private String name;
	private String job;
	private String salary;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getSalary() {
		return salary;
	}
	public void setSalary(String salary) {
		this.salary = salary;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
}

Managed Bean

According for JSF implementation, a managed bean is used to hold all the presentation logic that you may embed inside your view. In our case, an employee should be saved against our database, hence, our managed bean has defined a registerListener method that’s responsible for saving the entered Employee.

However, you may find an instance of your Employee but there’s no snippet of code has responsible for linking entered data with it. This is a JSF implementation responsibility and so you should focus into your business needs instead of got involved with adhoc work.

RegisterEmployeeManagedBean.java

package com.journaldev.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import org.apache.log4j.Logger;
import com.journaldev.dao.EmployeeDAO;
import com.journaldev.data.Employee;
@ManagedBean
@SessionScoped
public class RegisterEmployeeManagedBean {
	private static Logger logger = Logger.getLogger(RegisterEmployeeManagedBean.class);
	private Employee employee = new Employee();
	public Employee getEmployee() {
		return employee;
	}
	public void setEmployee(Employee employee) {
		this.employee = employee;
	}
	public void registerListener(ActionEvent event){
		try {
			// Register Employee
			this.employee = EmployeeDAO.getInstance().createEmployee(employee);
			logger.debug("Employee Has Registered");
			FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO,
					"Employee has regisered successfully !",""));
			// Reset employee
			this.employee = new Employee();
		} catch (Exception e) {
			logger.debug("Registration Process Has Failed",e);
			FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR,
					"Unforunately!, employee hasn't registered cause to : "+e,""));
		}
	}
}

You may also find @ManagedBean & @SessionScoped annotations which provided by the JSF implementation to define a new managed bean and determine the scope of it, respectively.

JSF View

We only have a single view that’s responsible to allow you enter employee’s information and notify you if your operation get finished successfully or something went wrongly.

view.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core">
	<h:head>
		<title>Register Employee</title>
	</h:head>
	<h:body>
		<h:messages showSummary="true" errorStyle="color:red;" infoStyle="color:green;"/>
		<h:form prependId="false">
			<h:panelGrid columns="2" style="width:100%">
					<h:outputLabel for="id" value="Identity"></h:outputLabel>
					<h:inputText id="id" value="#{registerEmployeeManagedBean.employee.id}" required="true" requiredMessage="ID is mandatory">
						<f:validateRegex pattern="[0-9]*"></f:validateRegex>
					</h:inputText>
					<h:outputLabel for="name" value="Name"></h:outputLabel>
					<h:inputText id="name" value="#{registerEmployeeManagedBean.employee.name}"></h:inputText>
					<h:outputLabel for="job" value="Job"></h:outputLabel>
					<h:inputText id="job" value="#{registerEmployeeManagedBean.employee.job}"></h:inputText>
					<h:outputLabel for="salary" value="Salary"></h:outputLabel>
					<h:inputText id="salary" value="#{registerEmployeeManagedBean.employee.salary}" requiredMessage="Salary is mandatory">
						<f:validateRegex pattern="[0-9]*"></f:validateRegex>
						<f:validateLength minimum="2" maximum="4"></f:validateLength>
					</h:inputText>
			</h:panelGrid>
			<h:commandButton value="Register" actionListener="#{registerEmployeeManagedBean.registerListener}" style=""></h:commandButton>
		</h:form>
	</h:body>
</html>

Here’s below the detailed explanation for the code listed above:

• Employee’s Identifier is required, if you omitted it, the form should notify you.
• Employee’s Identifier should be set of numbers.
• Employee’s Salary is required and it also should be set of numbers.
• Employee’s Salary must be formed of 2-4 digits.
• Messages component will help you getting notified by the status of your operation.
• Register submit action should provide you facility of sending entered information to be saved after then.

EmployeeDAO & Database Utility

EmployeeDAO and ConnectionUtility have been used each together for handling all the database missions. EmployeeDAO is responsbile of saving an employee while the database connectivity is handled by ConnectionUtility.

package com.journaldev.dao.utility;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.Properties;
public class ConnectionUtility {
	private static ConnectionUtility connectionUtiliy = null;
	private Connection connection = null;
	private ConnectionUtility() {
	}
	public static ConnectionUtility getInstance() throws IOException, IllegalAccessException, SQLException, ClassNotFoundException{
		// Synchronized against connectionUtility instance
		synchronized(ConnectionUtility.class){
			// Check whether the connectionUtility is null or not
			if(connectionUtiliy == null){
				// Create a properties instance
				Properties properties = new Properties();
				// Load properties from classpath
				properties.load(Thread.currentThread().getContextClassLoader().getResourceAsStream("connection.properties"));
				// Set connection with connectionUtility
				connectionUtiliy = new ConnectionUtility();
				// Load driver class
				Class.forName("com.mysql.jdbc.Driver");
				// Create connection
				connectionUtiliy.setConnection(DriverManager.getConnection("jdbc:mysql://localhost:3306/journaldev", properties));
			}
			return connectionUtiliy;
		}
	}
	public Connection getConnection() throws ClassNotFoundException, SQLException, IOException {
		if(connection.isClosed()){
			// Create a properties instance
			Properties properties = new Properties();
			// Load properties from classpath
			properties.load(Thread.currentThread().getContextClassLoader().getResourceAsStream("connection.properties"));
			// Load driver class
			Class.forName("com.mysql.jdbc.Driver");
			// Create connection
			connectionUtiliy.setConnection(DriverManager.getConnection("jdbc:mysql://localhost:3306/journaldev", properties));
		}
		return connection;
	}
	public void setConnection(Connection connection) {
		this.connection = connection;
	}
}

package com.journaldev.dao;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import com.journaldev.dao.utility.ConnectionUtility;
import com.journaldev.data.Employee;
public class EmployeeDAO {
	public static EmployeeDAO employeeDAO = null;
	private EmployeeDAO(){
	}
	public static EmployeeDAO getInstance(){
		synchronized(EmployeeDAO.class){
			if(employeeDAO == null){
				employeeDAO = new EmployeeDAO();
			}
		}
		return employeeDAO;
	}
	public Employee createEmployee(Employee employee) throws SQLException, IllegalAccessException, IOException, ClassNotFoundException{
		// Get connection instance
		Connection connection = ConnectionUtility.getInstance().getConnection();
		// Create Prepared Statement
		PreparedStatement query = connection.prepareStatement("INSERT INTO EMPLOYEE VALUES (?,?,?,?)");
		// Set variables
		query.setInt(1, Integer.parseInt(employee.getId()));
		query.setString(2, employee.getName());
		query.setString(3, employee.getJob());
		query.setInt(4, Integer.parseInt(employee.getSalary()));
		try {
			// Execute
			query.execute();
			// Return employee instance
			return employee;
		}
		catch(Exception e){
			// Close statement
			query.close();
			// Close connection
			connection.close();
			// Throw another exception for notifying the Servlet
			throw new SQLException(e);
		}
	}
	public boolean deleteEmployee(Employee employee){
		return false;
	}
	public boolean updateEmployee(Employee employee, int employeeId){
		return false;
	}
}

Registration Demo

The demonstration assumes that you have an installed Liferay Portal up and running and you can access it through using of https://localhost:8080 and you can enter your mail and password to log into your Dashboard.

From the right top corner, expand the menu that’s beneath your name and navigate into your dashboard.

Browsing of your dashboard will make you able of adding, removing and modifying your Portlets. From the Plus button in the most left top corner you can add your Portlet. But before adding your Portlet into your dashboard, just make sure you were deploying it.

Once you’re clicking on Plus button, a new pane has been viewed and set of tabs are shown. Make sure you’re selecting the applications and expand the Sample node.

Drag JournalDevPortlets into your dashboard

If you’ve tried to submit an empty form, you should find an error message that notify you about what’s went wrongly and needs your involvement.

Fill in all the information required and try to register

And finally, you should be able of seeing the employee registered inside your database.

Summary

We’ve introduced a lot of Portlet containers a long side of different tutorials had published on JournalDev. Due to Liferay Portal maturity and good reputation of it, this tutorial is an example that shows you how can you install and deploy a JSF Portlet into Liferay Portal.

Contribute us by commenting below and find the downloaded source code.