Integrating Spring @MVC with jQuery and Bootstrap Michael Isvy

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博客上写一些文章

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

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

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 汤。 我们先讨论。。 然后讨论。。。 再讨论。。。 最后讨论。。。

General Spring MVC best practices

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.

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

Why Spring MVC? Survey from zeroturnaround Spring MVC number 1 http://zeroturnaround.com/labs/developer-productivity-report-2012-java-tools-tech-devs-and-data/ 这个年有两个很大的民意测验 (min2yi4ce4yan4) 他们都说Spring MVC 是web frameworks 的第一名。

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.

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!

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

Validation with Spring MVC Bean validation (JSR 303) import javax.validation.Valid; … @Controller public class UserController { @RequestMapping("/user") public String update(@Valid 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

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>

JSP best practices!!

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!

Jar files best practices One word about Webjars

Is it good? Version numbers!!!

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

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

Webjars Allow CSS and JS libraries to be imported as Maven libraries jQuery, jQuery-ui, bootstrap, backbonejs… http://www.webjars.org/

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

。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-1.9.1.custom.js"> Possibly: show that we can outsource from a variable

Adding jQuery

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

Why jQuery? Demo jQuery

jquery-ui

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

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

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

Adding jQuery Datatable

jQuery datatables jQuery plugin for datatables Click, sort, scroll, next/previous… http://datatables.net/

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

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

Bootstrap Let’s talk about CSS…

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

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

What is Bootstrap? 1 2 3 Most popular project on github! https://github.com/popular/starred

Bootstrap themes 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/

Avoiding JSP soup JSP file HTML Javascript CSS Taglibs

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

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

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

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) 离不开的朋友

Using custom tags inputField.tag First create a tag (or tagx) file <%@ 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> 离不开的朋友

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!

Conclusion 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 这是今天的日程(ri4cheng2) 我们先要讨论Spring MVC的最优方法。 以后我们要用jQuery和Twitter Bootstrap 最后我们能发现JSP里边有太多技术：有HTML, JSP scriptlets, CSS, JavaScript… 都很乱。我们叫这个“JSP soup” (JSP 汤）。 最后咱们要讨论怎么避免(bi4mian2)JSP 汤。 我们先讨论。。 然后讨论。。。 在讨论。。。 最后讨论。。。

Thank You!