Click here to Skip to main content
15,905,614 members
Articles / Programming Languages / Java
Tip/Trick

Spring MVC, Maven, Twitter Bootstrap example

Rate me:
Please Sign up or sign in to vote.
4.20/5 (6 votes)
24 Sep 2013CPOL3 min read 77.9K   1.7K   10   3
Spring MVC, Maven, Twitter Bootstrap example.

Introduction  

I was asked to, as an introduction example for a new job, to create a project which should:

  • be Java Spring based
  • use Maven and Twitter bootstrap 
  • run on Tomcat 
  • show a page to enter user name and email, both validated (in case of validation failure it should preserve user entered values in input boxes)
  • show a page of entered users
  • support non English characters 

Background 

I'm completely new to Java / Maven / Spring word, so I decided to go through the templates available on the internet. Each and every one of them was missing at least one required feature. So I decided to contribute to the overall mess with my own bit ;) 

Using the code 

You can find the result of my work in the attached file. I'm going to make a brief description of every important feature, which problems I encountered and how I've solved them. 

Problem 0:) 

On the internet there are too many of half cooked and rather wrongly named templates which do much less then they promise.  OK, finally I've found following template, which is clearly base of my work: https://github.com/dagi/spring-training and from that specifically springmvc subproject. The problem is, doc for it are in Czech language.  

Problem 1: Twitter Bootstrap) 

This example is not using Twitter Bootstrap. Adding it is not so easy. There are many Maven packages of Bootstrap. One of them is https://github.com/efsavage/Bootstrap-Maven. It promises taglib interface like: 

XML
<%@ taglib uri="http://efsavage.com/twitter-bootstrap" prefix="bs" 

You can then use the tags as specified in the taglibs.md file. For example: 

XML
<bs:button text="Go" />

Looks good, so I started messing with pom.xml of Maven. But Bootstrap in turn requires jQuery. There is efsavage version of jQuery for Maven. I was not able to make Maven happy regarding this jQuery dependency. I got feeling that Maven is not haven at all. Not to mention it is not clear how to get correct css / js into your resulting web page... Well, I'm missing something crucial with this project, should they improve their doc? Who knows, I need to solve my problem. 

So there's another bootstrap/jQuery Maven package on http://mvnrepository.com/artifact/org.webjars. Maven is happy about both dependencies, but how to get css / js into web page? Easy, if you know how to do it. I found following solution: 

  1. add Maven dependency on webjars-locator along with dependency on jquery and bootstrap (pom.xml)  
XML
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>0.1</version>
</dependency>
            
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>2.0.3</version> 
</dependency>

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.0.0</version>
</dependency>   

2. add code to locate css / js filen into jsp pages (index.jsp)  

XML
<link rel='stylesheet' href='<%= org.webjars.AssetLocator.getWebJarPath("css/bootstrap.min.css") %>'>
<link rel='stylesheet' href='<%= org.webjars.AssetLocator.getWebJarPath("css/bootstrap-theme.min.css") %>'>
<script type='text/javascript' src='<%= org.webjars.AssetLocator.getWebJarPath("jquery.min.js") %>'></script>
<script type='text/javascript' src='<%= org.webjars.AssetLocator.getWebJarPath("js/bootstrap.min.js") %>'></script>
  

Problem 2: Email Validation)

1. add yet another dependency to Maven (springmvc/pom.xml)  

XML
<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-validator</artifactId>
</dependency>   

2. Annotate model's class member by hybernate/email validator (User.java)  

C++
@Email
private String email;   

Problem 3: Input text localisation 

I've put magic filter into web.xml and localised characters are handled correctly. Some people say that jsp and java files have to be saved in UTF-8, I do not know, this filter seems necessary anyway: 

XML
<filter>  
    <filter-name>encodingFilter</filter-name>  
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>  
    <init-param>  
       <param-name>encoding</param-name>  
       <param-value>UTF-8</param-value>  
    </init-param>  
    <init-param>  
       <param-name>forceEncoding</param-name>  
       <param-value>true</param-value>  
    </init-param>  
</filter>  
<filter-mapping>  
    <filter-name>encodingFilter</filter-name>  
    <url-pattern>/*</url-pattern>  
</filter-mapping>   

Problem 4: Preserving user entered values in case of validation error)    

This had to be fixed by putting following code into editUser.jsp: 

XML
<form:form method="post" modelAttribute="user">
<table>
   <tr>
     <td>Username:</td>
     <td><form:input type="text" path="name" /></td>
     <td><form:errors path="name" cssClass="red" /></td>
   </tr>
   <tr>
     <td>Email:</td>
     <td><form:input type="text" path="email"/></td>
     <td><form:errors path="email" cssClass="red" /></td>
   </tr>
</table>
<input type="submit" />
<input type="reset" />
</form:form>

There is crucial to use <form:form ... modelAttribure="user"> which must correspond to modelAttribute in UserEditFormController.java code: 

C++
@RequestMapping(method = RequestMethod.GET)
public String setupForm(ModelMap model) {
    model.addAttribute("user", new User());
    return "editUser"; //viewname
}

@RequestMapping(method = RequestMethod.POST)
public String processSubmit( @ModelAttribute("user") 
  @Valid User user, BindingResult result, SessionStatus status) {
...
}

Conclusion 

By giving you my problems and their solution I'm also giving you enough information how whole thing work without loosing time on stating obvious. At least for somebody who has some extended experience with programming. And it gives you example which works correctly in mentioned areas and not just working somehow.

Points of Interest 

I've removed hibernate to store values into database. I've skipped how to configure Maven to directly store resulting war file into Tomcat by using MVN tomcat:deploy. There are plenty of tutorials on those subjects, and none of them work for me yet, so I'll update this article when they do. 

History

  • None so far. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Nexthink
Switzerland Switzerland
Please have a look at http://cz.linkedin.com/pub/jan-mach/22/6b1/815/

Comments and Discussions

 
QuestionNo resource files loaded. Pin
Member 43308512-Dec-14 21:45
Member 43308512-Dec-14 21:45 
QuestionBootstrap as a maven dependancy Pin
Stuart Paton23-Sep-13 11:15
Stuart Paton23-Sep-13 11:15 
AnswerRe: Bootstrap as a maven dependancy Pin
jan.mach7124-Sep-13 12:12
jan.mach7124-Sep-13 12:12 
Good point. As I'm not Java fundamentalist, I think that Maven is not doing stuff which is interesting to me. I'm accustomed to put my dependencies into version system and let's say, have it under control. But Java experts always say to me, that they cannot imagine the world without Maven. Despite the fact, that it is necessary to cope with how somebody packaged the library and that this might change in the future, etc. I think that practically both approaches have their advantages/disadvantages. Whether to use Maven or put stuff directly into version system is cultural stuff to me. In my example I tried to use Maven for everything and further it is up to you, if you are going to use this in your projects or not.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.