• Liferay liferay-ui:tabs

    Posted on September 16, 2014 by Hamidul Islam in Liferay.
    Liferay Tabs

    Liferay Tabs

    Aim of this article:

    Understand the basic use of liferay-ui:tabs tag in a portlet.


    Note Note 1:  Below line should be there in your JSP to use this tag

    <%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>

    Note 2: The name of the tld file is liferay-ui.tld. This tld should be available under \docroot\WEB-INF\tld

    Note 3: The tag class is com.liferay.taglib.ui.TabsTag


     1. Basic Tabs

     

    Tab Demo

    Tab Demo

    This is the simplest tabs. This is the minimal code required to display this basic tabs

    
    <liferay-ui:tabs names="Tab One,Tabe Two,Tab Three" refresh="<%=false %>">
        <liferay-ui:section>
            Tab One Content
        </liferay-ui:section>
        <liferay-ui:section>
                Tab Two Content
        </liferay-ui:section>
        <liferay-ui:section>
                Tab Three Content
        </liferay-ui:section>
    </liferay-ui:tabs>
    
    

    Code Explanation:

    names attribute: The names of the different tabs. In the above case we are creating three tabs Tab One, Tab Two and Tab Three

    refresh attribute : Its used when we dont want page refresh. false is for no page refresh and true for allow page refresh.

    liferay-ui:section : Its simply used to tell which section belongs to which tab. We have created three tabs and that's the reason we have three sections. 

    2. You want different page for each tab

    Lets consider you want to display tab1.jsp if you click Tab One and tab2.jsp if you click Tab Two. Similarly tab3.jsp for the Tab Three

    So how are we going to do that? Just create the three JSP pages under your portlet docroot folder.

    
    <portlet:renderURL var="tabURL"/>
    
    <%
    String tab = ParamUtil.getString(request, "tabs1","Tab One");
    %>
    
    <liferay-ui:tabs names="Tab One,Tab Two,Tab Three" url="<%=tabURL.toString()%>" >
    
    <c:if test='<%= tab.equalsIgnoreCase("Tab One")%>' >
    <jsp:include page="/tab1.jsp" flush="true" />
    </c:if>
    
    <c:if test='<%= tab.equalsIgnoreCase("Tab Two")%>' >
    <jsp:include page="/tab2.jsp" flush="true" />
    </c:if>
    
    <c:if test='<%= tab.equalsIgnoreCase("Tab Three")%>' >
    <jsp:include page="/tab3.jsp" flush="true" />
    </c:if>
    
    </liferay-ui:tabs>
    
    

    Code Explanation:

    In the above code we have created renderURL and url attribute is used. In this page refresh is not going to work. So we have not used it. Why we have written  String tab = ParamUtil.getString(request, "tabs1","Tab One")? Because each time we click tab a parameter with name tabs1 is passed. For each tab this parameter has different value.Remember it can have only one value at a time.

    If you click Tab One the value of tabs1 = Tab One

    If you click Tab Two the value of tabs1 = Tab Two

    If you click Tab Three the value of tabs1 = Tab Three

    liferay-ui:tabs works in this way by default. Say you are not happy with this default tabs1 parameter. You want to add your own parameter of your choice. For this there is an attribute called param attribute. Consider we want a parameter myParam to be passed each time when a tab is clicked. See the below code

    
    <portlet:renderURL var="tabURL"/>
    
    <%
        String tab = ParamUtil.getString(request, "myParam","Tab One");
    %>
    
    <liferay-ui:tabs names="Tab One,Tab Two,Tab Three" url="<%=tabURL.toString()%>" param="myParam" > 
    
        <c:if test='<%= tab.equalsIgnoreCase("Tab One")%>' >      
            <jsp:include page="/tab1.jsp" flush="true" />
        </c:if>
        
        <c:if test='<%= tab.equalsIgnoreCase("Tab Two")%>' >     
            <jsp:include page="/tab2.jsp" flush="true" />
        </c:if>
        
        <c:if test='<%= tab.equalsIgnoreCase("Tab Three")%>' >     
            <jsp:include page="/tab3.jsp" flush="true" />
        </c:if>
        
    
    </liferay-ui:tabs>
    
    

    NoteNote: By default param value can be any one name of the tab name that we have mentioned by names attribute. If you want different value for each tab then you can use tabsValues attribute. Here is a quick syntax

    <liferay-ui:tabs names="Tab One,Tab Two,Tab Three" url="<%=tabURL.toString()%>"  param="myParam" tabsValues="one,two,three">

     


     

    3. You want to select a tab by code

    In the above code we have used render url. You can use action URL also to do database related stuffs on clicking each tab. You know after each action request render phase is invoked. Say you have clicked Tab Three and you are invoking process action. So after page refresh Tab One will be active. So how are we going to maintain the tab state? For this we can use another attribute called value. Inside the tag use it like this

    value="<%=Some dynamic value%>"

    Say after page refresh you want to show the third tab. Below is the code

    <%

    //The parameter should come from server side code. Say some-parameter = "three"

    String tabValue = ParamUtil.getAttribute(request,"some-parameter");

    %>

    liferay-ui:tabs names="Tab One,Tab Two,Tab Three" url="<%=tabURL.toString()%>" param="myParam" tabsValues="one,two,three" value="<%=tabValue %>"

     

    4. You want to use tab in Ajax way

    You know that there wont be any page refresh. In this case we use serve resource URL in the url attribute and use refresh attribute false.The step is shown in the in 1. 

    Post Tagged with ,

One Response so far.

  1. Syed says:

    Very good article. It helped me lot. It will be better if you would explain 4th point i.e Using tabs in ajax way. Waiting for update on this.

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close