« 返回到 Development

Creating Tabs in Liferay Portlets

标签: customization

Introduction #

The Liferay "Journal" portlet, has "Articles,Structures,Templates,Recent" tabs inside the portlet. Liferay includes a custom tab tag which allows you to create the same effect in your own portlets. These tabs are essentially just other .jsp pages that are displayed based on the selection of the tab.

In this article, we will modify the Reports Portlet to have tabs. We will create "Sample Tab 1", "Sample Tab 2" and "Sample Tab 3" tabs. In the end, we will have a portlet that will look something like this:

Create Files #

To do this in your own portlet you will need to create the following files:

Create Tab Pages #

Remember to include some plain text in each file

ext/ext-web/docroot/html/portlet/ext/reports/sample_tab_1.jsp:

sample 1
ext/ext-web/docroot/html/portlet/ext/reports/sample_tab_2.jsp:
sample 2
ext/ext-web/docroot/html/portlet/ext/reports/sample_tab_3.jsp:
sample 3

init.jsp #

in init.jsp include the following code:

ext/ext-web/docroot/html/portlet/ext/reports/init.jsp:

<%@ include file="/html/common/init.jsp" %>

<portlet:defineObjects />

view.jsp #

in view.jsp

ext/ext-web/docroot/html/portlet/ext/reports/view.jsp:

<%@ include file="/html/portlet/ext/reports/init.jsp" %>


<%
String tabs1 = ParamUtil.getString(request, "tabs1", "Sample Tab 1");

PortletURL portletURL = renderResponse.createRenderURL();

portletURL.setWindowState(WindowState.NORMAL);

portletURL.setParameter("struts_action", "/ext/reports/view_reports");
portletURL.setParameter("tabs1", tabs1);

String tabNames = "Sample Tab 1,Sample Tab 2,Sample Tab 3";

%>

<liferay-ui:tabs
   names="<%= tabNames %>"
   url="<%= portletURL.toString() %>"
/>

It is recommeded using "<liferay-util:include page>" instead of "<%@ include file= "

<c:if test='<%= tabs1.equals("Sample Tab 1") %>'>
  <liferay-util:include page="/html/portlet/ext/reports/sample_tab_1.jsp" >
</c:if>
<c:if test='<%= tabs1.equals("Sample Tab 2") %>'>
  <liferay-util:include page="/html/portlet/ext/reports/sample_tab_2.jsp" >
</c:if>
<c:if test='<%= tabs1.equals("Sample Tab 3") %>'>
  <liferay-util:include page="/html/portlet/ext/reports/sample_tab_3.jsp" >
</c:if>

explained:

<%
String tabs1 = ParamUtil.getString(request, "tabs1", "Sample Tab 1");

PortletURL portletURL = renderResponse.createRenderURL();

portletURL.setWindowState(WindowState.NORMAL);

portletURL.setParameter("struts_action", "/ext/reports/view_reports");
portletURL.setParameter("tabs1", tabs1);

String tabNames = "Sample Tab 1,Sample Tab 2,Sample Tab 3";

%>

tabs1: holds the value of the tab to be displayed

tabNames: comma delimited list of tab names

(Note: A common mistake is to include spaces before or after the commas. Make sure there are no extra spaces in the variable "tabNames", otherwise the strings wont match with the value in "tabs1". see above)

<liferay-ui:tabs
   names="<%= tabNames %>"
   url="<%= portletURL.toString() %>"
/>

This is a custom Liferay tab tag. This auto-genereates the tabs based on the variables defined above. (defined: "portal\portal-web\docroot\html\taglib\ui\tabs")

<c:if test='<%= tabs1.equals("Sample Tab 1") %>'>
   <liferay-util:include page="/html/portlet/ext/reports/sample_tab_1.jsp" >
</c:if>
<c:if test='<%= tabs1.equals("Sample Tab 2") %>'>
   <liferay-util:include page="/html/portlet/ext/reports/sample_tab_2.jsp" >
</c:if>
<c:if test='<%= tabs1.equals("Sample Tab 3") %>'>
   <liferay-util:include page="/html/portlet/ext/reports/sample_tab_3.jsp" >
</c:if>

Based on the value of tabs1, this will include a different jsp page.

Deploy your code and now take a look at your Reports Portlet. Now your Reports Portlet should look like:

Make page refresh optional #

Use this snippet to do the same thing without requiring page refreshes.

<liferay-ui:tabs
	names="Sample Tab 1, Sample Tab 2, Sample Tab 3"
	refresh="<%= false %>"
>
	<liferay-ui:section>
		sample 1
	</liferay-ui:section>
	<liferay-ui:section>
		sample 2
	</liferay-ui:section>
	<liferay-ui:section>
		sample 3
	</liferay-ui:section>
</liferay-ui:tabs>
0 附件
110314 查看
平均 (4 票)
满分为 5,平均得分为 2.5。
评论
讨论主题回复 作者 日期
<liferay-ui:tabs names="Sample Tab 1,Sample... Rohit Rai 2009年1月23日 下午11:49
hye, I did the same steps to have some tabs in... mipih faical 2009年6月15日 上午7:02
How can I do this in navigation.vm???? Secret Developer 2009年7月30日 下午1:21
Has anyone resolved the issue with spaces in... Jeff Goodwin 2009年8月14日 下午6:39
Hi ppl, Try using language keys... JP O 2009年8月23日 下午9:55
0 JP O 2009年8月23日 下午10:04
liferay-ui:util does not work with jsp in... Muhammed Shakir 2010年7月19日 上午8:47
I got an error in code <liferay-util:include... Linh Nguyen 2011年5月8日 上午4:39
for more Liferay Tabs ... Rohit Salecha 2011年5月24日 上午1:38
can we use liferay ui tab inside another... Hajri Mohamed 2011年6月9日 上午5:51
how to hide/show the tabs using conditions?? ie... ankit yakkundi 2011年7月14日 上午3:58
Displaying text on clicking on the tabs works... Ram Manusani 2011年12月27日 下午11:16
Hi by looking at the code that creates the tabs... Manuel Calvo 2012年6月8日 上午6:53
Helpful post Mazhar Alam 2012年7月17日 上午3:54
I got this error: liferay-ui:section tag... Imre Telek 2015年6月1日 上午7:32
hi i am getting pages when i click on tabs with... Sohi Mankotia 2012年9月5日 上午3:13
hi can some one tell me taglib for <c:if ? nitish tyagi 2012年11月21日 下午11:25
<%@ taglib... Jorik Wartanow 2014年5月26日 上午4:01
How to localize tab names? It doesn't... Imre Telek 2015年6月1日 上午7:38

<liferay-ui:tabs
names="Sample Tab 1,Sample Tab 2,Sample Tab 3"
refresh="<%= false %>"
>
<liferay-ui:section>
sample 1
</liferay-ui:section>
<liferay-ui:section>
sample 2
</liferay-ui:section>
<liferay-ui:section>
sample 3
</liferay-ui:section>
</liferay-ui:tabs>

This code doesn't work for me. The UI is created, but clicking on the tabs deosn't work.
It works if I remove the spaces IN the tab names. Can't we have tabs with two word names?
在 09-1-23 下午11:49 发帖。
hye,
I did the same steps to have some tabs in my portlet but it don't work.
I have the same think in all my tabs.
Can you help me please
在 09-6-15 上午7:02 发帖以回复 Rohit Rai
How can I do this in navigation.vm????
在 09-7-30 下午1:21 发帖。
Has anyone resolved the issue with spaces in tab names?
在 09-8-14 下午6:39 发帖。
Hi ppl,

Try using language keys as the tab names and then add to language-ext.properties.
now if you try to add "sign-in" as a tab, you'll see it actually displayed as "Sign In".
Enjoy!
在 09-8-23 下午9:55 发帖。
在 09-8-23 下午10:04 发帖。
liferay-ui:util does not work with jsp in custom portlet with expected behavior.
在 10-7-19 上午8:47 发帖。
I got an error in code
<liferay-util:include page="/sample_tab_1.jsp" >
It should be like this
<liferay-util:include page="/sample_tab_1.jsp" servletContext="<%=this.getServletContext() %>"/>

Im using Lifery 6.0.5 and tomcat 6.0.26

Furthermore, you probably need to add taglib in sourcecode to make it work.
like
<%@ taglib uri="/WEB-INF/tld/liferay-ui.tld" prefix="liferay-ui" %>
<%@ taglib uri="/WEB-INF/tld/liferay-util.tld" prefix="liferay-util" %>

which works in my case.
在 11-5-8 上午4:39 发帖以回复 Muhammed Shakir AK Misarwala
for more Liferay Tabs

http://liferaydemystified.blogspot.com/2011/05/liferay-ui-tabs.html
在 11-5-24 上午1:38 发帖以回复 Linh Nguyen
can we use liferay ui tab inside another liferay ui tab (nested liferay tabs), i m trying but i m having a null pointer exeption
在 11-6-9 上午5:51 发帖以回复 Rohit Salecha
how to hide/show the tabs using conditions??
ie if some condition gets satisfies then i want to hide some tabs and show some tabs.
how to implement that??
在 11-7-14 上午3:58 发帖。
Displaying text on clicking on the tabs works fine with me... Is there a way to show portlets on clicking the tabs??

Any solution will be greatly appreciated
在 11-12-27 下午11:16 发帖以回复 ankit yakkundi
Hi by looking at the code that creates the tabs HTML elements here:
http://www.jarvana.com/jarvana/view/com/liferay/portal/portal-web/6.0.4/por­tal-web-6.0.4.war!/html/taglib/ui/tabs/start.jsp?format=ok

and the JS that displays the tabs here:
http://www.jarvana.com/jarvana/view/com/liferay/portal/portal-web/6.0.4/por­tal-web-6.0.4.war!/html/js/liferay/portal.js

if you want to use refresh="false" you need to add a name attribute to the liferay-ui:section, so the correct code should be:

<liferay-ui:tabs
names="view,search"
values="view,search"
refresh="false"
param=­"tab"
>

<liferay-ui:section
param="tab"
name="view"
>
sample 1
</liferay-ui:section>
<liferay-ui:section
param="tab"
name="search"
>
sa­mple 2
</liferay-ui:section>
</liferay-ui:tabs>
在 12-6-8 上午6:53 发帖以回复 Ram Manusani
在 12-7-17 上午3:54 发帖以回复 Manuel Calvo
hi i am getting pages when i click on tabs with <liferay-util:include page="/html/portlet/ext/reports/sample_tab_3.jsp" >

and what is

portletURL.setParameter("struts_action", "/ext/reports/view_reports");
在 12-9-5 上午3:13 发帖。
hi can some one tell me taglib for <c:if ?
在 12-11-21 下午11:25 发帖。
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
在 14-5-26 上午4:01 发帖以回复 nitish tyagi
I got this error: liferay-ui:section tag doesn't have param and name attributes.
在 15-6-1 上午7:32 发帖以回复 Manuel Calvo
How to localize tab names? It doesn't translates it If I use comma seperated resource keys in names attribute. It also doesn't work if I use one resource key and try to put each tab name into that string because it creates only one tab with a comma in it's name.
在 15-6-1 上午7:38 发帖。