Presentation is loading. Please wait.

Presentation is loading. Please wait.

Integrating with jQuery and Bootstrap

Similar presentations


Presentation on theme: "Integrating with jQuery and Bootstrap"— Presentation transcript:

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 JSP file. Let’s talk about Webjars! Show a folder which does not contain any version number.", "width": "800" }

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 Demo: JSP (avec ou sans jQuery) JSP file.", "width": "800" }

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!
https://github.com/popular/starred

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

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!


Download ppt "Integrating with jQuery and Bootstrap"

Similar presentations


Ads by Google