Tabs Creation in Liferay

Here we are going to create multiple tabs where we can render JSP pages dynamically. Tabs can be created multiple way which are given below:

1: Using Liferay UI taglib:

Put below code in JSP file :


<%@page import="com.liferay.portal.kernel.util.ParamUtil"%>
<%@page import="javax.portlet.PortletURL"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<portlet:defineObjects />

<%
    String tabs1 = ParamUtil.getString(request,"tabs","Tab1");
    PortletURL portletURL = renderResponse.createRenderURL();
    portletURL.setParameter("tabs", tabs1);
    portletURL.setParameter("jspPage","/html/sampleclass/tabs.jsp");
%>

<aui:form>

    <liferay-ui:tabs names="Tab1,Tab2,Tab3"
                    param="tabs"
                    url="<%= portletURL.toString()%>"
                    />            
        <c:choose>
        <c:when test='<%=tabs1.equals("Tab1")%>'>
            <%@include file="/html/tabs/tab1.jsp" %>
        </c:when>
        <c:when test='<%=tabs1.equals("Tab2")%>'>
            <%@include file="/html/tabs/tab2.jsp" %>
        </c:when>
        <c:when test='<%=tabs1.equals("Tab3")%>'>
            <%@include file="/html/tabs/tab3.jsp" %>
        </c:when>
    </c:choose>
</aui:form>

2: Using Alloy UI :

You can refer : http://www.liferaysolution.com/2012/08/create-tab-using-aui-in-liferay-61.html