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

Monday, November 28, 2016

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

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

second.jsp

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

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