Monday, February 17, 2014

How to Create Tabs UI using HTML, CSS, jQuery, JSP and JavaScript

JSP is still a popular technology for developing view part of Struts and Spring based Java application, but unfortunately it doesn't have rich UI support available in GWT, or any other library. On other day, we had a requirement to display HTML tables inside tabs, basically we had two tables of different data set and we need to display them in their own tabs. User can navigate from one tab to other, and CSS should take care of which tab is currently selected, by highlighting active tab. Like many Java developers, our hands on HTML, CSS and JavaScript is little bit tight than a web guy, and since our application is not using any UI framework, we had to rely on JSP to do this job.  Since display tag is my favourite, I had no problem to dealing with tabular data, our only concern was how we will develop tabbed UI by just using HTML, CSS, JavaScript or may be jQuery. It looks everything is possible with these technology, we eventually able to develop our JSP page, which can show data in tabs. So if you need to create tabs in JSP page, you can use this code sample, all you need to ensure is you have required libraries e.g. display tag library, JSTL core tag library and jQuery. I will explain you step by step how to create tabs in html or jsp page.



HTML, CSS, jQuery, JSP and JavaScript for TAB UI

Here is our JSP page to show tabbed ui using only html, CSS, jQuery and JavaScript. For simplicity reason I have combined everything in JSP page, but this is not exactly we have used it. We follow project guidelines and best practices and has separate files for CSS, HTML, and JavaScript. Also writing Java code in JSP is not recommended, so avoid that part as well. You should write your Java code inside  model and controller classes. Your view class e.g. JSP page, should only render data created by model, believe a dumb JSP is the best JSP. If you scan through this JSP file, first part is importing Java classes e.g. ArrayList, List and a domain class Contact, next is importing tab libraries e.g. display tag and JSTL core tag library. Since we are also displaying tabular data, for this sample purpose, I had  used dispalytag.css file, available in display tag examples, when you download display tag. Next is our custom CSS required for tabbed UI and then we have jQuery code, which does the magic of creating tabs and managing them i.e. keeping track of which tab is active and changing its CSS class to highlight it. To create tabs in JSP page, we have used an unordered list <ul>   , which contains two list items for each tabs. This list item hyper link to two <div id='tab1'blocks, with id tab1 and tab2, which acts as container to hold tab data. Since we need to show HTML tables inside tabs, we have put  <display:table> inside these divs. Magic of showing data only from active tab is done using CSS. Each container div has a CSS class class="tab_content" , which is just display:none, to make them invisible. When page loads, jQuery get hashtag from current URL to find out which tab is active, and subsequently assign it a class called active, and make it visible. Same thing is done on the click as well. When use clicks one of the tab, jQuery first removes active class from previous tab and then assign it to new tab. It then hides the previous tab and show new tab by calling show() method. You can even use jQuery methods fadeIn() and fadeOut() instead of show() and hide() for better effects.

<%@page import="java.util.ArrayList"%>
<%@page import="com.web.revision.Contact"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JQuery Tab Example</title>
        <link rel="stylesheet" href="css/displaytag.css" type="text/css">
        <link rel="stylesheet" href="css/screen.css" type="text/css">
        <link rel="stylesheet" href="css/site.css" type="text/css">

        <style>
             {padding:0; margin:0;}

            html {
                padding:15px 15px 0;
                font-family:sans-serif;
                font-size:14px;
            }

            p, h3 {
                margin-bottom:15px;
            }

            div {
                padding:10px;
                width:600px;
                background:#fff;
            }

            .tabss li {
                list-style:none;
                display:inline;
            }

            .tabss a {
                padding:5px 10px;
                display:inline-block;
                background:#666;
                color:#fff;
                text-decoration:none;
            }

            .tabss li.active a{
                background:#f0f;
                color:#00;
            }
           
            .tab_content {
                display: none;
            }
        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
         </script>
       
        <script>

         // Wait until the DOM has loaded before querying the document
         $(document).ready(function(){

            //Active tab selection after page load       
            $('#tabs').each(function(){
           
            // For each set of tabs, we want to keep track of
            // which tab is active and it's associated content
            var $active, $content, $links = $(this).find('a');
           
            // If the location.hash matches one of the links, use that as the active tab.
            // If no match is found, use the first link as the initial active tab.
            $active = $($links.filter('[href="'+location.hash+'"]')[0]
                      || $links[0]);
            
            $active.parent().addClass('active');
           
            $content = $($active.attr('href'));
            $content.show();
        });
       
       
         $("#tabs li").click(function() {
                
             // First remove class "active" from currently active tab
             $("#tabs li").removeClass('active');
        
             // Now add class "active" to the selected/clicked tab
             $(this).addClass("active");
                
             // Hide all tab content
             $(".tab_content").hide();

             // Here we get the href value of the selected tab
             var selected_tab = $(this).find("a").attr("href");      

             var starting = selected_tab.indexOf("#");
             var sub = selected_tab.substring(starting);
               
             //write active tab into cookie
                
             //$(sub).show();
                 $(sub).fadeIn();
             // At the end, we add return false so that the click on the
            // link is not executed
             return false;
          });
        });

       </script>

    </head>
    <body>

        <%
            List<Contact> cricketers = new ArrayList<Contact>();
            cricketers.add(new Contact("Kohli", 98273633, "Mohali"));
            cricketers.add(new Contact("Dhoni", 98273634, "Ranchi"));
            cricketers.add(new Contact("Sehwag", 98273635, "Delhi"));
            cricketers.add(new Contact("Rahane", 98273636, "Jaipur"));
            cricketers.add(new Contact("Gambhir", 98273637, "Delhi"));
            cricketers.add(new Contact("Rohit", 98273638, "Mumbai"));
            cricketers.add(new Contact("Dinda", 98273639, "Kolkata"));
            cricketers.add(new Contact("Ashwin", 98273640, "Chennai"));

            session.setAttribute("contacts", cricketers);
           
            List<Contact> actors = new ArrayList<Contact>();
            actors.add(new Contact("SRK", 98273633, "Mohali"));
            actors.add(new Contact("Salman", 98273634, "Ranchi"));
            actors.add(new Contact("Hrithik", 98273635, "Delhi"));
            actors.add(new Contact("Ajay", 98273636, "Jaipur"));
            actors.add(new Contact("Imran", 98273637, "Delhi"));
            actors.add(new Contact("John", 98273638, "Mumbai"));
            actors.add(new Contact("Akshay", 98273639, "Kolkata"));
            actors.add(new Contact("Sunil", 98273640, "Chennai"));
           
            session.setAttribute("actors", actors);

        %>



        <ul id='tabs' class="tabss">
            <li><a href='#tab1'>Tab 1</a></li>
            <li><a href='#tab2'>Tab 2</a></li>
        </ul>
        <div id='tab1' class="tab_content" >
            <h3>Section 1</h3>
            <p>This is First TAB </p>
            <display:table name="sessionScope.contacts"
                           requestURI="#tab1" pagesize="5"
                           export="true" sort="list" uid="one">
                <display:column property="name" title="Name"
                                sortable="true" headerClass="sortable" />
                <display:column property="contact" title="Contact"
                                sortable="true" headerClass="sortable" />
                <display:column property="city" title="City"
                                sortable="true" headerClass="sortable" />
            </display:table>
        </div>
       
        <div id='tab2' class="tab_content">
            <h3>Section 2</h3>
            <p>This is SECOND TAB</p>
            <display:table name="sessionScope.actors" requestURI="#tab2"      
                           pagesize="5" export="true" sort="list" uid="two">
                <display:column property="name" title="Name" sortable="true"     
                                headerClass="sortable" />
                <display:column property="contact" title="Contact" sortable="true"
                                headerClass="sortable" />
                <display:column property="city" title="City" sortable="true"
                                headerClass="sortable" />
            </display:table>
        </div>
    </body>
</html>


Output
This is how our tabbed UI  looks when displayed as HTML in client's browser. Active Tab is shown with pink, not a good choice but serves the purpose of highlight it. You can see contents of tab 1 has normal HTML code as well as table data generated from display tag. You can play with this table to understand display tag pagination and sorting as well.  Second image is for tab 2, you can see it contain different data i.e. first tab is about crickets and second tab is about Bollywood film stars.

Creating Tabbed UI using HTML, CSS, jQuery, JSP and JavaScript





    And this is how your second TAB will look like, when user will click on Tab 2 link

HTML, JSP, JQuery Tab UI example


That's all about How to create Tabs UI using HTML, CSS, jQuery and JSP in Java web application. If you like you can use any other library e.g. jQuery UI, which provides inbuilt tabs support, which will make your code more simpler than this. For example creating a tabbed page in jQuery UI will just require you to declare div elements for each tab and a list specifying all tabs, and then just calling  $( "#tabs" ).tabs();  method . jQuery UI will handle all JavaScript and CSS for you. Now it depends upon you, what you want :)

No comments :

Post a Comment