Liferay is easy: Create tabs in liferay with liferay-ui:tabs

In liferay we can create a tabs by simply using Liferay ui tag.So in this tutorial we create 3 tabs and on each tab we have a form. so lets start this step by step:-

Step 1:-Create Liferay Project and Portlet
Just create a project and then create a portlet in it.

Step 2:-Change view.jsp
Open view.jsp and paste this content:-

view.jsp

	<%@page import="com.liferay.portal.kernel.util.ParamUtil"%>
	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
	<portlet:defineObjects />

	<liferay-ui:tabs names="First Tab,Second Tab,Third Tab" refresh="false" value="${selectedTab}">
	<liferay-ui:section>
	<%@ include file="first.jsp" %>
	</liferay-ui:section>
	<liferay-ui:section>
	<%@ include file="second.jsp" %>
	</liferay-ui:section>
	<liferay-ui:section>
	Text for Tab 3.
	</liferay-ui:section>
	</liferay-ui:tabs>

view raw view.jsp hosted with ❤ by GitHub

Explanation:-
1) liferay-ui:tabs:-In this tag we use 3 attributes:-

names:- The name of the tabs
refresh:- On clicking of tab page is refresh or not.
value:- Which tab is selected.

Note:-There are other attributes also but for this tutorial these are sufficient.

2)liferay-ui:section:- There are 3 tabs so we have 3 section and each section include other jsp except the Third Tab here i write a simple message.

Step 3:-Create first and second jsps
Create two jsp files inside the same folder where your view.jsp reside:-

first.jsp

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<portlet:defineObjects />

	<portlet:actionURL name="first" var="first"/>
	<h3>First Form</h3>
	<form action="${first}" method="POST">
	First:- <input type="text" name="<portlet:namespace/>first"><br>
	<input type="submit">
	</form>

view raw first.jsp hosted with ❤ by GitHub

second.jsp

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<portlet:defineObjects />

	<portlet:actionURL name="second" var="second"/>
	<h3>Second Form</h3>
	<form action="${second}" method="POST">
	Second:- <input type="text" name="<portlet:namespace/>second"><br>
	<input type="submit">
	</form>

view raw second.jsp hosted with ❤ by GitHub

Explanation:-
In the two jsps we create a simple form with a text box and a submit button. When we submit the form first and second method is called inside your controller.

Step 4:-Change your Controller
Open your java file and paste this content:-

Tabs.java

	package com.tabs;

	import java.io.IOException;
	import javax.portlet.ActionRequest;
	import javax.portlet.ActionResponse;
	import javax.portlet.PortletException;
	import com.liferay.portal.kernel.util.ParamUtil;
	import com.liferay.util.bridges.mvc.MVCPortlet;

	public class Tabs extends MVCPortlet {

	public void first(ActionRequest actionRequest,ActionResponse actionResponse) throws IOException, PortletException {
	String first = ParamUtil.getString(actionRequest, "first");
	System.out.println("First Method==>"+first);

	//After submit First Tab is selected
	actionRequest.setAttribute("selectedTab", "First Tab");
	}

	public void second(ActionRequest actionRequest,ActionResponse actionResponse) throws IOException, PortletException {
	String second = ParamUtil.getString(actionRequest, "second");
	System.out.println("Second Method==>"+second);

	//After submit Second Tab is selected
	actionRequest.setAttribute("selectedTab", "Second Tab");
	}

	}

view raw Tabs.java hosted with ❤ by GitHub

Explanation:-
1)On submitting of form, method inside controller is called and print the value on console .
2)After that we set a attribute selectedTab . This value is used in view.jsp inside value attribute of liferay-ui:tabs.

<liferay-ui:tabs names="" refresh="" value="${selectedTab}">

Step 5:-Check the Output

Now deploy the portlet and check the output:-

1)When you click on any tab page is not refreshed:-