integrating spring @mvc with jquery and bootstrap
DESCRIPTION
Integrating Spring @MVC with jQuery and Bootstrap. Michael Isvy. Michael Isvy. Trainer and Senior Consultant Joined SpringSource in 2008 Already taught Spring in more than 20 countries Core-Spring, Spring MVC, Spring with JPA/Hibernate, Apache Tomcat… - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/1.jpg)
Integrating Spring @MVC with jQuery and Bootstrap
Michael Isvy
![Page 2: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/2.jpg)
• Trainer and Senior Consultant– Joined SpringSource in 2008
– Already taught Spring in more than 20 countries• Core-Spring, Spring MVC, Spring with JPA/Hibernate, Apache
Tomcat…
• Active blogger on blog.springsource.com
Michael Isvy
2
![Page 3: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/3.jpg)
History
3
2004
2008 French division created
2009 VMware acquires SpringSource
2012 Many « new Emerging Products » at VMware:CloudFoundry, GemFire, RabbitMQ …
我
Spring 1.0
SpringSource created (originally called Interface21)
…
Spring 1.0??
![Page 4: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/4.jpg)
Inspired from a blog entry
4
http://blog.springsource.org/2012/08/29/
![Page 5: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/5.jpg)
JSP file
• General Spring MVC best practices• Adding jQuery (Javascript)• Adding Bootstrap (CSS)• Avoiding JSP soup
Agenda
5
HTMLJavascriptCSSTaglibs
![Page 6: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/6.jpg)
General Spring MVC best practices
![Page 7: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/7.jpg)
• Many people like it because it is simple
Why Spring MVC?
![Page 8: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/8.jpg)
• InfoQ top 20 Web frameworks for the JVM– Spring MVC number 1
Why Spring MVC?
http://www.infoq.com/research/jvm-web-frameworks
![Page 9: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/9.jpg)
• Survey from zeroturnaround– Spring MVC number 1
Why Spring MVC?
http://zeroturnaround.com/labs/developer-productivity-report-2012-java-tools-tech-devs-and-data/
![Page 10: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/10.jpg)
• Which way is more appropriate?
How to use Spring MVC?
10
public class UserController extends SimpleFormController {
public ModelAndView onSubmit(Object command) { //... }
}
@Controllerpublic class UserController {
@RequestMapping(value="/users/", method=RequestMethod.POST) public ModelAndView createUser(User user) { //... }
}
Deprecated!!
![Page 11: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/11.jpg)
• Programmatic validation?
Validation with Spring MVC
11
class DiningValidator extends Validator { public void validate(Object target, Errors errors) { if ((DiningForm)target) .merchantNumber.matches("[1-9][0-9]*") ) errors.rejectValue(“merchantNumber”, “numberExpected”); }}
Not the preferred way anymore!
![Page 12: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/12.jpg)
• Bean validation (JSR 303) annotations
Validation with Spring MVC
12
import javax.validation.constraints.*;public class Dining { @Pattern(regexp="\\d{16}") private String creditCardNumber;
@Min(0) private BigDecimal monetaryAmount;
@NotNull private Date date;}
POJO
![Page 13: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/13.jpg)
• Bean validation (JSR 303)
Validation with Spring MVC
import javax.validation.Valid;…@Controllerpublic class UserController {
@RequestMapping("/user") public String update(@Valid User user, BindingResult result) { if (result.hasErrors()) { return “rewards/edit”; } // continue on success... }}
Controller
![Page 14: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/14.jpg)
• Form tag library
View Layer
14
<c:url value="/user.htm" var="formUrl" /><form:form modelAttribute="user" action="${formUrl}"> <label class="control-label">Enter your first name:</label> <form:input path="firstName"/> <form:errors path="firstName"/> ... <button type="submit”>Save changes</button></form:form>
JSP
![Page 15: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/15.jpg)
JSP best practices!!
15
![Page 16: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/16.jpg)
JSP: Which way is better?
16
<tr> <td> <%=user.getFirstName() %></td> <td> <%=user.getLastName() %> </td></tr>
<tr> <td> ${user.firstName} </td> <td> ${user.lastName} </td></tr>
<tr> <td> <c:out value="${user.firstName}"/> </td> <td> <c:out value="${user.lastName}"/> </td></tr>
Not perfect: it is better to use taglibs
Not perfect: it is better to use taglibs
No html escape: risk for cross site scripting
No html escape: risk for cross site scripting
Good!Good!
jsp file
![Page 17: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/17.jpg)
Jar files best practices
One word about Webjars
![Page 18: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/18.jpg)
Is it good?
18
Version numbers!!!Version numbers!!!
![Page 19: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/19.jpg)
Best practices
19
• Manage version numbers using Maven or Gradle
<dependency> <groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId><version>3.1.3.RELEASE</version>
</dependency><dependency> <groupId>junit</groupId>
<artifactId>junit</artifactId><version>4.10</version><scope>test</scope>
</dependency>
Maven POM file pom.xml
Maven POM file pom.xml
![Page 20: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/20.jpg)
Version numbers?
20
Let’s talk about Webjars!Let’s talk about Webjars!
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<script src="/js/addThis.js"></script><script src="/js/jquery-ui.js"></script><script src="/js/jquery.dataTables.js"></script><script src="/js/jquery.js"></script>
JSP file
![Page 21: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/21.jpg)
• Allow CSS and JS libraries to be imported as Maven libraries– jQuery, jQuery-ui, bootstrap, backbonejs…
– http://www.webjars.org/
Webjars
![Page 22: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/22.jpg)
Webjars
<dependency> <groupId>org.webjars</groupId> <artifactId>jquery-ui</artifactId> <version>1.9.1</version></dependency>
pom.xml
![Page 23: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/23.jpg)
Using Webjars
23
• Inside pom.xml Spring configuration
• Inside JSP
<dependency> <groupId>org.webjars</groupId> <artifactId>jquery-ui</artifactId> <version>1.9.1</version></dependency>
<link rel=“stylesheet" href= “ /webjars/jquery-ui/1.9.1/js/jquery-ui-1.9.1.custom.js">
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
。 js file is inside a jar file!。 js file is inside a jar file!
![Page 24: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/24.jpg)
Adding jQuery
![Page 25: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/25.jpg)
• Javascript framework• Very simple core with thousands of plugins available
– Datatable
– jQuery UI (datepicker, form interaction…)
What is jQuery?
![Page 26: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/26.jpg)
Why jQuery?
![Page 27: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/27.jpg)
jquery-ui
![Page 28: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/28.jpg)
• One of the most popular jQuery plugins– Autocomplete
– Date picker
– Drag and drop
– Slider
– …
• Let us get started with dates!
jqueri-ui
![Page 29: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/29.jpg)
• java.util.Date
• Joda Time
• JSR 310: Date and time API
How do you use dates in Java?
29
Only for very simple useOnly for very simple use
GOOD!GOOD!
Not available yetMay be in 2013
Not available yetMay be in 2013
Integrates well with Spring MVCIntegrates well with Spring MVC
![Page 30: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/30.jpg)
jqueryui date picker
30
<script> $( "#startDate" ).datepicker({ dateFormat: "yy-m-dd" }); $( "#endDate" ).datepicker({ dateFormat: "yy-m-dd" });</script>…<form:input path="startDate" /><form:input path="endDate" />
JSP file
![Page 31: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/31.jpg)
Adding jQuery
Datatable
![Page 32: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/32.jpg)
• jQuery plugin for datatables• Click, sort, scroll, next/previous…• http://datatables.net/
jQuery datatables
![Page 33: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/33.jpg)
• You don’t even need to write Javascript yourself!• Just use DataTables4J
– http://datatables4j.github.com/docs/
Datatables in Spring MVC
<dependency><groupId>com.github.datatables4j</groupId><artifactId>datatables4j-core-impl</artifactId><version>0.7.0</version>
</dependency>
pom.xml
![Page 34: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/34.jpg)
• Inside JSP file
Datatables in Spring MVC
34
<datatables:table data="${userList}" id="dataTable" row="user"><datatables:column title="First Name"
property="firstName" sortable="true" />
<datatables:column title="Last Name" property="lastName" sortable="true" />
</datatables:table>
JSP file
![Page 35: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/35.jpg)
Bootstrap
Let’s talk about CSS…
![Page 36: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/36.jpg)
• So your Web Designer does not have to cry anymore
Why Bootstrap?
Let’s talk about Bootstrap!Let’s talk about Bootstrap!
![Page 37: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/37.jpg)
• Originally called “Twitter Bootstrap”• Available from 2011• Typography, forms, buttons, charts, navigation and other
interface components• Integrates well with jQuery
What is Bootstrap?
![Page 38: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/38.jpg)
• Most popular project on github!
What is Bootstrap?
https://github.com/popular/starred
![Page 39: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/39.jpg)
• Hundreds of themes available– So your website does not look like all other websites!
– Some are free and some are commercial
• Example: www.bootswatch.com/
Bootstrap themes
![Page 40: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/40.jpg)
Avoiding JSP soup
JSP file
HTMLJavascriptCSSTaglibs
![Page 41: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/41.jpg)
• Our application now looks good in a web browser
• What about the internals?– We can do better!
Avoiding JSP soup
![Page 42: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/42.jpg)
• Should be your best friend when working with JSPs!
• Can easily turn 100 lines of code into 10 lines of code!
JSP custom tags
![Page 43: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/43.jpg)
• Custom tags are part of Java EE– .tag or .tagx files
• Created in 2004– Not a new feature!
Custom tags
43
![Page 44: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/44.jpg)
Form fields: Without custom tags
<div class=“control-group” id=“${lastName}"><label class="control-label">${lastNameLabel}</label><div class="controls">
<form:input path="${name}"/><span class="help-inline">
<form:errors path="${name}"/></span>
</div></div>
CSS divLabelForm input
Error message (if any)
JSP
![Page 45: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/45.jpg)
• First create a tag (or tagx) file
Using custom tags
<%@ taglib prefix="form" uri="http://www.spring…org/tags/form" %><%@ attribute name="name" required="true" rtexprvalue="true" %><%@ attribute name="label" required="true" rtexprvalue="true" %><div class="control-group" id="${name}">
<label class="control-label">${label}</label><div class="controls">
<form:input path="${name}"/><span class="help-inline">
<form:errors path="${name}"/></span>
</div></div>
inputField.tag
![Page 46: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/46.jpg)
• Custom tag call
Using custom tags
Folder which contains custom tags
<html xmlns:custom="urn:jsptagdir:/WEB-INF/tags/html" …> … <custom:inputField name="firstName" label="Enter your first name:" /> <custom:inputField name=”lastName" label="Enter your last name:" /></html>
JSP file
1 line of code instead of 9!!
No more JSP soup!
![Page 47: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/47.jpg)
• Consider using WebJars for static files– http://www.webjars.org/
• It’s easy to integrate Spring MVC with jQuery– Consider using DataTables4J – http://datatables4j.github.com/docs/
– Bootstrap is cool!– JSP custom tags can make your life easier
Conclusion
47
![Page 48: Integrating Spring @MVC with jQuery and Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022081421/568148f9550346895db61ec3/html5/thumbnails/48.jpg)
Thank You!