jQuery UI is built on top of jQuery JavaScript Library to help web developers in creating awesome web pages with different types of effects. Today we will look into jQuery UI Tabs feature that we can use to create tabs in the view pages easily. We will use this in a simple java web application where user can register and then login. Both registration and login forms will be part of the home page, in two different tabs.

Just to get an idea, below image shows the home page of the web application after integrating all the bits and pieces.


Java Web Application Setup

Below image shows the final structure of our web application. Before we proceed with the code, we need to setup our application with required JS and CSS libraries.


  1. Create a “Dynamic Web Project” in Eclipse, you can choose any name but if you want to use the same name as my project, use jQueryUITabsLoginExample. After project is created, convert it to maven project so that we can add required dependencies.
  2. I am using MySQL DB to store user information, below script can be used to create the Users table.
  3. Since I am using MySQL database, we need to add MySQL Java driver to the project. Below is our final pom.xml, it’s simple and straight-forward.pom.xml
  4. Download jQuery JavaScript library from https://jquery.com/download/ and put in the js directory as shown in the project image.
  5. Download jQuery UI library from https://jqueryui.com/download/, you will get a lot of JS and CSS files. You need to include only jquery-ui.js and jquery-ui.css files for the project. jQuery UI provides a lot of themes that we can use as base and then customize it according to our requirements. The layout in the project homepage is the Cupertino theme, you can choose one of the theme from the Download page.

Our project setup is ready now, we can move to our business logic part now.

Model Class

We have User class to map the database table, below is the User model class code.


Database Connection Utility Class

We have a simple utility class for database connection, it’s not optimized and just for example purposes.


DAO Implementation Classes

UseDAO interface defines the contract for the services that will be exposed for operations on Users table.


Below is the implementation class, we could have used Hibernate or any other ORM tools for the implementation too.


Servlet Classes and Configuration

We have two servlet controller classes for registration and login process. There are some simple validations present to avoid common errors.



It’s time to configure these servlets in web.xml file, below is the final web.xml file.


Project CSS File

Below is our custom CSS file for view pages.


jQuery UI Tabs View Page

Below is the home page JSP code, where we are using jQuery UI tags.


jQuery JS Code for creating tags is:

Above code will convert the tabs div into different tabs. For different tabs, this div should have an unordered list of elements, for us it’s

Notice that every list item contains anchored URL, they should be the other div elements that will form the view of the tabs. That’s why we have two further divs – login and register. That’s it, other parts of the JSP page are simple HTML and JSP scriptlets. I know that we should not use scriptlets, but again it’s an example and I didn’t wanted to add another technology into it, if you haven’t guessed till now, I am talking about JSTL.

We have couple more simple JSP pages for registration success and login success.



jQuery UI Tabs Project Test

Our web application is ready, just build and deploy the project. Below are some of the images for different pages.



jQuery UI Vertical Tabs Example

By default, jQuery UI create horizontal tabs. But we can add some extra jQuery code to create vertical tabs too. Below is another form of JSP page with vertical tabs.


Below are some of the images for vertical tabs output.



We have posted a lot of jQuery tutorials here, this example was meant to show how easy it is to integrate jQuery and jQuery UI into a java web application. You can download the final project from below link, don’t miss to share it with other too.

By admin

Leave a Reply

%d bloggers like this: