Twitter Bootstrap With Spring MVC

 Posted On  | Yashwant Chavan | Views :- 16853

Today we are going to learn how to integrate Twitter Bootstrap responsive web design framework with spring framework.Now a days everybody is crazy about responsive web design because mobile, tab users are growing day by day. If you want to know more about twitter bootstrap please visit its official website (www.getbootstrap.com)

Twitter Bootstrap + Spring Mvc

Twitter bootstrap support Responsive Web Design(RWD). Basically it provides consistence look and fill across a wide range of devices (from mobile phones, tabs to desktop computers).

Useful to whom

This tutorial is useful for beginners and experience developers who wants to integrate twitter bootstrap with spring mvc. It will helps you to learn step by step with the help of attached code.

Tools and Technologies

  1. Twitter Bootstrap 2.3
  2. Maven 3.0.4
  3. JDK 1.6
  4. Spring 2.5.6

Dependancy in pom.xml

Define Spring dependencies into pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>SpringExamples</groupId>
	<artifactId>SpringExamples</artifactId>
	<packaging>war</packaging>
	<version>1.0</version>
	<name>SpringExamples</name>
	<description></description>
	<build>
		<plugins>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.5</source>
					<target>1.5</target>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.0</version>
				<configuration>
					<webResources>
						<resource>
							<directory>WebContent</directory>
						</resource>
					</webResources>
				</configuration>
			</plugin>
		</plugins>
	</build>
	<properties>
		<spring.version>3.0.5.RELEASE</spring.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-mapper-asl</artifactId>
			<version>1.7.1</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-web</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${spring.version}</version>
		</dependency>
	</dependencies>
</project>

Deployment Descriptor web.xml

Define the Spring DispatcherServlet mapping into deployment descriptor xml.

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<servlet>
		<servlet-name>springtutorial</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springtutorial</servlet-name>
		<url-pattern>*.htm</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file> index.jsp </welcome-file>
	</welcome-file-list>
</web-app>

Spring Bean Configuration springtutorial-servlet.xml

Define spring bean definations into springtutorial-servlet.xml, Which is located under "WEB-INF" folder.

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
	
	<mvc:resources mapping="/css/**" location="/css/"/>
	<mvc:annotation-driven />
	<context:component-scan base-package="com.technicalkeeda.controller" />	 
	 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      <property name="prefix" value="/WEB-INF/jsp/" />
      <property name="suffix" value=".jsp" />
   </bean>
</beans>

Pojo Class (Employee.java)

Simple Employee pojo class.

package com.technicalkeeda.bean;

public class Employee {
	
	private String firstName;
	private String lastName;
	private String email;

	public String getFirstName() {
		return firstName;
	}

	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	public String getLastName() {
		return lastName;
	}

	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

}

Controller Class (EmployeeController.java)

EmployeeController get the data from view page with matching url ("/employee/add.htm" ) request and forward it to next page "employeesuccess.jsp"

package com.technicalkeeda.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.technicalkeeda.bean.Employee;

@Controller
@RequestMapping("/employee/add.htm")
public class EmployeeController {
	@RequestMapping(method = RequestMethod.POST)
	ModelAndView add(HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		Employee employee = new Employee();
		
		String firstName = request.getParameter("firstName");
		String lastName = request.getParameter("lastName");
		String email = request.getParameter("email");
		
		employee.setEmail(email);
		employee.setFirstName(firstName);
		employee.setLastName(lastName);

		return new ModelAndView("employeesuccess", "employee",employee);

	}
}

View Page (index.jsp)

This is default page of the application which contains simple employee form which is developed with the help of twitter bootstrap responsive web design.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Bootstrap Form With Spring Mvc Example</title>
<link type="text/css" href="<%=request.getContextPath() %>/css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<fieldset>
				<legend>Bootstrap Form With Spring Mvc Example</legend>
				<form class="form-horizontal" method="post" action='employee/add.htm' name="employeeForm" id="employeeForm">
					<div class="control-group">
						<label class="control-label">First Name</label>
						<div class="controls">
							<input type="text" name="firstName" id="firstName" title="First Name" value="">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Last Name</label>
						<div class="controls">
							<input type="text" name="lastName" id="lastName" title="Last Name" value="">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Email</label>
						<div class="controls">
							<input type="text" name="email" id="email" title="Email" value="">
						</div>
					</div>
					<div class="form-actions">
						<button type="submit" class="btn btn-success">Submit</button>
						<button type="button" class="btn">Cancel</button>
					</div>
				</form>
				</fieldset>
			</div>
		</div>
	</div>		
</body>
</html>

Another View Page(employeesuccess.jsp)

This is the success page which display the employee information.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Bootstrap Form With Spring Mvc Example</title>
<link type="text/css" href="<%=request.getContextPath() %>/css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<fieldset>
				<legend>Employee Details</legend>
				    <table class="table table-striped">
					    <tr>
					    	<td>First Name</td>
					    	<td>Last Name</td>
					    	<td>Email</td>
					    </tr>
					    <tr>
				    	<td>${employee.firstName}</td>
				    	<td>${employee.lastName}</td>
				    	<td>${employee.email}</td>
				    </tr>    		
    				</table>
				</fieldset>
			</div>
		</div>
	</div>		
</body>
</html>

Twitter Bootstrap Employee Form

Twitter Bootstrap Employee Success

Finish

Hope this Tutorial is useful to you, Please fill free to provide your comments if there is any problem. Thanks

Tags Bootstrap  Twitter Bootstrap  Spring Mvc 


HTML Comment Box is loading comments...

Hi I am Yashwant Chavan founder of www.technicalkeeda.com, Purpose of this website to share the programming knowledge in the form post , blogs and articles.

Latest Updates

Stay updated with latest post, articles and technical discussions.

Most Popular Articles



© technicalkeeda.com 2014