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


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




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

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

2)When you click Second Tab and submit the form:-

Note:- Here you can see Second Tab is still selected because we use value="${selectedTab}" inside view.jsp.

Project Structure:-

You can Download Source code from  Create tabs in Liferay. 

Hope this will Help....

Related Post:-

No comments:

Post a Comment

Total Pageviews

Number Of Unique Visitor

Free counters!