Spring One China 2012 (Beijing)

Integrating Spring MVC with jQuery, Bootstrap, DataTables4J and webjars

Transcript

1. Integrating Spring @MVC with jQuery and Bootstrap Michael Isvy
2. •  The github project used for my demos is available here: •  https://github.com/michaelisvy/demo-springone-beijing demos
3. •  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 3
4. History 4 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??
5. Inspired from a blog entry 5 http://blog.springsource.org/2012/08/29/
6. JSP  file •  General  Spring  MVC  best  prac8ces   •  Adding  jQuery  (Javascript)   •  Adding  Bootstrap  (CSS)   •  Avoiding  JSP  soup   Agenda 6 HTML Javascript CSS Taglibs
7. General Spring MVC best practices
8. •  Many people like it because it is simple Why Spring MVC?
9. •  InfoQ top 20 Web frameworks for the JVM –  Spring MVC number 1 Why Spring MVC? http://www.infoq.com/research/jvm-web-frameworks
10. •  Survey from zeroturnaround –  Spring MVC number 1 Why Spring MVC? http://zeroturnaround.com/labs/developer-productivity-report-2012-java-tools- tech-devs-and-data/
11. •  Which way is more appropriate? How to use Spring MVC? 11 public class UserController extends SimpleFormController { public ModelAndView onSubmit(Object command) { //... } } @Controller public class UserController { @RequestMapping(value="/users/", method=RequestMethod.POST) public ModelAndView createUser(User user) 
 { //... } } Deprecated!!
12. •  Programmatic validation? Validation with Spring MVC 12 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!
13. •  Bean validation (JSR 303) annotations Validation with Spring MVC 13 import javax.validation.constraints.*; public class Dining { 
 @Pattern(regexp="\\d{16}") private String creditCardNumber; @Min(0) private BigDecimal monetaryAmount; @NotNull private Date date; } POJO
14. •  Bean validation (JSR 303) Validation with Spring MVC 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
15. •  Form tag library View Layer 15 <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
16. JSP best practices!! 16
17. JSP: Which way is better? 17 <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 No html escape: risk for cross site scripting Good! jsp file
18. Jar files best practices One word about Webjars
19. Is it good? 19 Version numbers!!!
20. Best practices 20 •  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
21. Version numbers? 21 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
22. •  Allow CSS and JS libraries to be imported as Maven libraries –  jQuery, jQuery-ui, bootstrap, backbonejs… –  http://www.webjars.org/ Webjars
23. Webjars <dependency> <groupId>org.webjars</groupId> <artifactId>jquery-ui</artifactId> <version>1.9.1</version> </dependency> pom.xml
24. Using Webjars 24 •  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!
25. Adding jQuery
26. •  Javascript framework •  Very simple core with thousands of plugins available –  Datatable –  jQuery UI (datepicker, form interaction…) What is jQuery?
27. Why jQuery?
28. jquery-ui
29. •  One of the most popular jQuery plugins –  Autocomplete –  Date picker –  Drag and drop –  Slider –  … •  Let us get started with dates! jqueri-ui
30. •  java.util.Date •  Joda Time •  JSR 310: Date and time API How do you use dates in Java? 30 Only for very simple use GOOD! Not available yet May be in 2013 Integrates well with Spring MVC
31. jqueryui date picker 31 <script> $( "#startDate" ).datepicker({ dateFormat: "yy-m-dd" }); $( "#endDate" ).datepicker({ dateFormat: "yy-m-dd" }); </script> … <form:input path="startDate" /> <form:input path="endDate" /> JSP file
32. Adding jQuery Datatable
33. •  jQuery plugin for datatables •  Click, sort, scroll, next/previous… •  http://datatables.net/ jQuery datatables
34. •  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
35. •  Inside JSP file Datatables in Spring MVC 35 <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
36. Bootstrap Let’s talk about CSS…
37. •  So your Web Designer does not have to cry anymore Why Bootstrap? Let’s talk about Bootstrap!
38. •  Originally called “Twitter Bootstrap” •  Available from 2011 •  Typography, forms, buttons, charts, navigation and other interface components •  Integrates well with jQuery What is Bootstrap?
39. •  Most popular project on github! What is Bootstrap? https://github.com/popular/starred
40. •  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
41. Avoiding JSP soup JSP  file HTML Javascript CSS Taglibs
42. •  Our application now looks good in a web browser •  What about the internals? –  We can do better! Avoiding JSP soup
43. •  Should be your best friend when working with JSPs! •  Can easily turn 100 lines of code into 10 lines of code! JSP custom tags
44. •  Custom tags are part of Java EE –  .tag or .tagx files •  Created in 2004 –  Not a new feature! Custom tags 44
45. 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 div Label Form input Error message (if any) JSP
46. •  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
47. •  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!
48. •  Consider  using  WebJars  for  sta8c  files   –  http://www.webjars.org/   •  It’s  easy  to  integrate  Spring  MVC  with  jQuery   –  Consider  using  DataTables4J     –  hOp://datatables4j.github.com/docs/   –  Bootstrap  is  cool!   –  JSP  custom  tags  can  make  your  life  easier   Conclusion 48
49. Cloud Foundry 启动营 49 在www.cloudfoundry.com注册账号并成功上传应用程序，即可于12月8日中 午后凭账号ID和应用URL到签到处换取Cloud Foundry主题卫衣⼀一件。
50. iPhone5 等你拿 50 第二天大会结束前，请不要提前离开，将填写完整的意见反馈表投到签到 处的抽奖箱内，即可参与“iPhone5”抽奖活动。
51. 所有讲师都会在课程结束后，到紫兰厅与来宾讨论课程上的问题 Birds of a Feather 专家面对面 51
52. Thank You!