1. Integrating Spring @MVC with jQuery and Bootstrap
Michael Isvy

2. Michael Isvy 大家好。 我的名字叫Michael. 我是法国人。2008年我开始在SpringSource 公司工作。
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.
我是法国人。2008年我开始在SpringSource 公司工作。
我是一个IT顾问和培训经理。(我已经在20多国家教过Spring, Tomcat 和vFabric的课程。Ke4cheng2)
我去过很多国家叫Spring
有空的时候,我就在blog.springsource.com上写博客。
我常常在SpringSource博客上写一些文章

3. History Spring 1.0?? 我 2004 2008 2009 2012 Spring 1.0 …
SpringSource created (originally called Interface21) …
2008
French division created
Spring 1.0?? 我
2009
VMware acquires SpringSource
2012
Many « new Emerging Products » at VMware:
CloudFoundry, GemFire, RabbitMQ …
你们知不知道Spring是什么时候发布的？
我们可以讨论一下SpringSource的历史（li4shi3)
2004年：Spring 1.0 出来了。这个时候SpringSource有7个创始人.（chuang4shi3ren2) 一点儿零
2008年：SpringSource只有20个员工。(yuan2gong1). 法国 的SpringSource分公司是我跟朋友一起创建的。(ye4wu4) （ban3ben3) (chuang4jian4)
2009年: VMware 收购了SpringSource (shou1gou4)
到了2012年：我们比以前壮大了。我们现在有新的产品: Cloudfoundry, GemFire, RabbitMQ… (chan3pin3) 等等 deng3deng3
接下来 jie1xia4lai2 : et ensuite… 3

4. Inspired from a blog entry
八月份的时候，我在博客上写了一篇文章。有很多人留言(liu2yan2, comment)
我很快就发现有很多人感兴趣。
我们今天要讨论的内容跟这篇文章有关。

5. Agenda General Spring MVC best practices Adding jQuery (Javascript)
Adding Bootstrap (CSS)
Avoiding JSP soup
JSP file
HTML
Javascript
CSS
Taglibs
这是今天的日程(ri4cheng2)
我们先要讨论Spring MVC的最优方法。
然后我们要用jQuery和Twitter Bootstrap的接合
最后咱们能发现JSP里边有太多技术：有HTML, JSP scriptlets, CSS, JavaScript… 都很乱。我们把这个叫做“JSP soup” (JSP 汤）。（ji4shu4)
最后咱们要讨论怎么避免(bi4mian2)JSP 汤。
我们先讨论。。
然后讨论。。。
再讨论。。。
最后讨论。。。

6. General Spring MVC best practices

7. Many people like it because it is simple
Why Spring MVC?
Many people like it because it is simple
为什么有人用Spring MVC?
Spring MVC是一个很简单web framework.

8. Why Spring MVC? InfoQ top 20 Web frameworks for the JVM
Spring MVC number 1
这个年有两个很大的民意测验 (min2yi4ce4yan4)
他们都说Spring MVC 是web frameworks 的第一名。

9. Why Spring MVC? Survey from zeroturnaround Spring MVC number 1
这个年有两个很大的民意测验 (min2yi4ce4yan4)
他们都说Spring MVC 是web frameworks 的第一名。

10. How to use Spring MVC? Which way is more appropriate? Deprecated!!
@Controller
public class UserController {
@RequestMapping(value="/users/",
method=RequestMethod.POST)
public ModelAndView createUser(User user) { //... } }
public class UserController
extends SimpleFormController {
public ModelAndView
onSubmit(Object command) { //... } }
Deprecated!!
Next: show quickly what we have in the code.

11. Validation with Spring MVC
Programmatic validation?
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!

12. Validation with Spring MVC
Bean validation (JSR 303) annotations
import javax.validation.constraints.*;
public class Dining {
@Pattern(regexp="\\d{16}")
private String creditCardNumber;
@Min(0)
private BigDecimal monetaryAmount;
@NotNull
private Date date; }
POJO

13. Validation with Spring MVC
Bean validation (JSR 303)
import javax.validation.Valid; …
@Controller
public class UserController {
@RequestMapping("/user")
public String User user,
BindingResult result) {
if (result.hasErrors()) {
return “rewards/edit”;
} // continue on success... }
Controller
Go into app and run 2 ways: correct and not correct. way

14. View Layer JSP Form tag library
<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>

15. JSP best practices!!

16. JSP: Which way is better?
<tr>
<td> <%=user.getFirstName() %></td>
<td> <%=user.getLastName() %> </td>
</tr> 1
Not perfect: it is better to use taglibs
jsp file
<tr>
<td> ${user.firstName} </td>
<td> ${user.lastName} </td>
</tr> 2
No html escape: risk for cross site scripting
<tr>
<td> <c:out value="${user.firstName}"/> </td>
<td> <c:out value="${user.lastName}"/> </td>
</tr> 3
Good!

17. Jar files best practices
One word about Webjars

18. Is it good?
Version numbers!!!

19. Best practices Manage version numbers using Maven or Gradle
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>3.1.3.RELEASE</version>
</dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.10</version>
<scope>test</scope>
Maven POM file pom.xml

20. Let’s talk about Webjars!
Version numbers?
<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
Let’s talk about Webjars!
Show a folder which does not contain any version number

21. Webjars Allow CSS and JS libraries to be imported as Maven libraries
jQuery, jQuery-ui, bootstrap, backbonejs…

22. Webjars pom.xml <dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery-ui</artifactId>
<version>1.9.1</version>
</dependency>
pom.xml

23. 。js file is inside a jar file!
Using Webjars
Inside pom.xml Spring configuration
Inside JSP
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery-ui</artifactId>
<version>1.9.1</version>
</dependency>
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
。js file is inside a jar file!
<link rel=“stylesheet" href=“/webjars/jquery-ui/1.9.1/js/jquery-ui custom.js">
Possibly: show that we can outsource from a variable

24. Adding jQuery

25. What is jQuery? Javascript framework
Very simple core with thousands of plugins available
Datatable
jQuery UI (datepicker, form interaction…)

26. Why jQuery?
Demo jQuery

27. jquery-ui

28. jqueri-ui One of the most popular jQuery plugins
Autocomplete
Date picker
Drag and drop
Slider …
Let us get started with dates!
Demo

29. How do you use dates in Java?
java.util.Date
Joda Time
JSR 310: Date and time API
Only for very simple use
GOOD!
Integrates well
with Spring MVC
Not available yet
May be in 2013
Demo: server side

30. jqueryui date picker JSP file <script>
$( "#startDate" ).datepicker({ dateFormat: "yy-m-dd" });
$( "#endDate" ).datepicker({ dateFormat: "yy-m-dd" });
</script> …
<form:input path="startDate" />
<form:input path="endDate" />
Demo: JSP (avec ou sans jQuery)
JSP file

31. Adding jQuery
Datatable

32. jQuery datatables jQuery plugin for datatables
Click, sort, scroll, next/previous…

33. Datatables in Spring MVC
You don’t even need to write Javascript yourself!
Just use DataTables4J
<dependency>
<groupId>com.github.datatables4j</groupId>
<artifactId>datatables4j-core-impl</artifactId>
<version>0.7.0</version>
</dependency>
pom.xml

34. Datatables in Spring MVC
Inside JSP file
<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

35. Bootstrap
Let’s talk about CSS…

36. Let’s talk about Bootstrap!
Why Bootstrap?
So your Web Designer does not have to cry anymore
Let’s talk about Bootstrap!

37. What is Bootstrap? Originally called “Twitter Bootstrap”
Available from 2011
Typography, forms, buttons, charts, navigation and other interface components
Integrates well with jQuery
Demo

38. What is Bootstrap? 1 2 3 Most popular project on github!

39. Bootstrap themes Hundreds of themes available
So your website does not look like all other websites!
Some are free and some are commercial
Example:

40. Avoiding JSP soup
JSP file
HTML
Javascript
CSS
Taglibs

41. Avoiding JSP soup Our application now looks good in a web browser
What about the internals?
We can do better!
Show code

42. JSP custom tags Should be your best friend when working with JSPs!
Can easily turn 100 lines of code into 10 lines of code!
离不开的朋友

43. Custom tags Custom tags are part of Java EE Created in 2004
.tag or .tagx files
Created in 2004
Not a new feature!

44. Form fields: Without custom tags
JSP
<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>
CSS div
Label
Form input
Error message (if any)
离不开的朋友

45. Using custom tags inputField.tag First create a tag (or tagx) file
taglib prefix="form" uri=" %>
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>
离不开的朋友

46. Using custom tags 1 line of code JSP instead of 9!! Custom tag call
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
JSP
1 line of code
instead of 9!!
离不开的朋友
No more JSP soup!

47. Conclusion Consider using WebJars for static files
It’s easy to integrate Spring MVC with jQuery
Consider using DataTables4J
Bootstrap is cool!
JSP custom tags can make your life easier
这是今天的日程(ri4cheng2)
我们先要讨论Spring MVC的最优方法。
以后我们要用jQuery和Twitter Bootstrap
最后我们能发现JSP里边有太多技术：有HTML, JSP scriptlets, CSS, JavaScript… 都很乱。我们叫这个“JSP soup” (JSP 汤）。
最后咱们要讨论怎么避免(bi4mian2)JSP 汤。
我们先讨论。。
然后讨论。。。
在讨论。。。
最后讨论。。。

48. Thank You!