Beautify your Java web application with Bootstrap

Bootstrap is one of the most popular front-end framework for developing responsive web design. It includes buttons, form inputs, links, columns, and tons of other pre-formatted page objects.

The mixt of Bootstrap and Spring MVC gives a powerfull toolbox to develop a web application running in both desktop and mobile devices.

   

This post presents a very concise and easy way to integrate Bootstrap to a Spring MVC web project.

Add bootstrap to your project dependency

You can add Bootstrap to your project by downloading a zip file from the project web site http://getbootstrap.com, then unzip the content and copy it to the webapp resources directory.
But it is more interesting to get it as project a maven dependency to your project. This is made possible by the client-side web libraries webjars

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>2.1.1</version>
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.2.0</version>
    <exclusions>
        <exclusion>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
        </exclusion>
    </exclusions>
</dependency>

Bootstrap javascript components needs JQuery. That’s why Bootstrap has a dependency to JQuery.
In this post we made the choice to exclude Bootstrap version and to import 2.1.1 version of JQuery.
You can manage the version by defining a dependency management to the project pom.

Configure Spring

We need to add a resource handler for /webjars/** to associate it with classpath:/META-INF/resources/webjars/ located in the bootstrap-3.2.0.jar

@EnableWebMvc
@Configuration
@ComponentScan(basePackages = { "com.mycompany.myproject.web.controller" })
public class MvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
    }
.................
..............

}

Add a bootstrap reference to the web page.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel='stylesheet' href='webjars/bootstrap/3.2.0/css/bootstrap.min.css'>
</head>
<body>
    
    <!-- YOUR CODE HERE -->
<script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Jboss config

JBoss has a specific library management and in some cases it can’t find files in webjars dependency.
This problem can be solved by unpackaging webjars jars using maven dependency plugin.

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-dependency-plugin</artifactId>
    <executions>
        <execution>
            <id>unpack</id>
            <phase>compile</phase>
            <goals>
                 <goal>unpack</goal>
            </goals>
            <configuration>
                 <artifactItems>
                      <artifactItem>
                          <groupId>org.webjars</groupId>
                          <artifactId>bootstrap</artifactId>
                          <overWrite>false</overWrite>
                          <outputDirectory>${project.build.directory}/classes</outputDirectory>
                          <excludes>**/maven/**, **/*.MF</excludes>
                      </artifactItem>
                 </artifactItems>
            </configuration>
        </execution>
    </executions>
</plugin>

Samples and components

You can find many samples and plugins for bootstrap that can gives you inspiration for your web application design.
I recommend those sites and projects:

The picture bellow presents a screenshot for a demo web application using bootstrap.
user-list

Advertisements

Web design with 960 grid system

Sometimes we lose a lot of time solving some web design problems like unstable components positions or page structure. Often web pages change with screen width, content and web browser.

Some CSS frameworks like BluePrint and 960 Grid System cut down development time. They give a web developer a solid foundation to build UI with an easy-to-use grid and other features.

   

Photo credit: HannyB

This article presents 960 Grid System and suggests to integrate it in a dynamic web project (JEE JSF web project).

How 960 grid system works?

960 grid System framework propose two ways to manage the web page area. The first one use the central part of the web page with a fixe width. The second way use fluid width to define the exploited area of the page.

960 grid System framework uses the css class name to manage DIV position and the inner component position into the web page.

A row is defined by the container which is a div used to specify how many total columns exist, either 12 or 16.

If a grid unit contains grid children, the child need to a class which will indicate a number of columns it will take (grid_X). If you want to insert empty space before or after a grid unit, use class prefix_P or suffix_S.

container_12

pref grid_10 prefix_2 suffix_1 suf


The picture above explains how to use 960 grid CSS to manage Div positions. The content of the grid will be in the green area.

After we have a look to basic use case of the 960 grid framework, we will try to integrate it in a web application to manage screen components position.

960 grid in JEE project

Usually, the first step in UI design we define the page template. The picture bellow presents a template that we suggest to use for a project sample.

template
header
menu
content
footer
960px

960 grid system gives us the possibility to choose the way to place the different part of the application user interface into a grid system. We made a choice to use fixed width of 960px with 12 grids.

To use 960 grid system in your template page you need to add 960.css to the CSS folder of the web project and reference it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="#{request.contextPath}/css/default.css"  rel="stylesheet" type="text/css"/>
<link href="#{request.contextPath}/css/960.css"  rel="stylesheet" type="text/css"/>
<title>Sample Template</title>
</head>
<body >

<div id="wrap">
	<div id="header" class="container_12">
		<ui:include src="/pages/template/header.xhtml" />
	</div>
	<div id="main" class="container_12">
		<div id="menu" class="grid_2 " >
			<ui:include src="/pages/template/menu.xhtml" />
		</div>
		<div id="content" class="grid_6  prefix_2 suffix_2">
			<ui:insert name="body" />
		</div>
	</div>

</div>
<div id="footer" class="container_12" >
		<ui:include src="/pages/template/footer.xhtml" />
</div>

</body>
</html>

The picture bellow presents the application interface after we applied the 960 grid system.