integrating spring @mvc with jquery and bootstrap
Download
Skip this Video
Download Presentation
Integrating Spring @MVC with jQuery and Bootstrap

Loading in 2 Seconds...

play fullscreen
1 / 48

Integrating Spring @MVC with jQuery and Bootstrap - PowerPoint PPT Presentation


  • 121 Views
  • Uploaded on

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…

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Integrating Spring @MVC with jQuery and Bootstrap' - adin


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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…
  • Active blogger on blog.springsource.com
history
History

2004

Spring 1.0

SpringSource created (originally called Interface21)

French division created

2008

Spring 1.0??

VMware acquires SpringSource

2009

2012

Many « new Emerging Products » at VMware:

CloudFoundry, GemFire, RabbitMQ …

3

inspired from a blog entry
Inspired from a blog entry

http://blog.springsource.org/2012/08/29/

agenda
Agenda

HTML

Javascript

CSS

Taglibs

JSP file

General Spring MVC best practices

Adding jQuery (Javascript)

Adding Bootstrap (CSS)

Avoiding JSP soup

why spring mvc
Why Spring MVC?

Many people like it because it is simple

why spring mvc1
Why Spring MVC?

http://www.infoq.com/research/jvm-web-frameworks

  • InfoQ top 20 Web frameworks for the JVM
    • Spring MVC number 1
why spring mvc2
Why Spring MVC?

http://zeroturnaround.com/labs/developer-productivity-report-2012-java-tools-tech-devs-and-data/

  • Survey from zeroturnaround
    • Spring MVC number 1
how to use spring mvc
How to use Spring MVC?

@Controller

publicclass UserController {

@RequestMapping(value="/users/",

method=RequestMethod.POST)

public ModelAndView createUser(User user) { //... }

}

publicclass UserController

extends SimpleFormController {

public ModelAndView

onSubmit(Object command) { //... }

}

Deprecated!!

Which way is more appropriate?

validation with spring mvc
Validation with Spring MVC

class DiningValidator extends Validator {

publicvoid validate(Object target, Errors errors) {

if((DiningForm)target)

.merchantNumber.matches("[1-9][0-9]*") )

errors.rejectValue(“merchantNumber”, “numberExpected”);

}

}

Not the preferred

way anymore!

Programmatic validation?

validation with spring mvc1
Validation with Spring MVC

import javax.validation.constraints.*;

public class Dining {

@Pattern(regexp="\\d{16}")

private String creditCardNumber;

@Min(0)

privateBigDecimal monetaryAmount;

@NotNull

private Date date;

}

POJO

Bean validation (JSR 303) annotations

validation with spring mvc2
Validation with Spring MVC

import javax.validation.Valid;

@Controller

publicclass UserController {

@RequestMapping("/user")

public String update(@Valid User user,

BindingResult result) {

if (result.hasErrors()) {

return “rewards/edit”;

} // continue on success...

}

}

Controller

Bean validation (JSR 303)

view layer
View Layer

<c:urlvalue="/user.htm"var="formUrl"/>

<form:formmodelAttribute="user"action="${formUrl}">

<labelclass="control-label">Enter your first name:</label>

<form:inputpath="firstName"/>

<form:errorspath="firstName"/>

...

<buttontype="submit”>Save changes</button>

</form:form>

JSP

Form tag library

jsp which way is better
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:outvalue="${user.firstName}"/></td>

<td><c:outvalue="${user.lastName}"/></td>

</tr>

3

Good!

jar files best practices

Jar files best practices

One word about Webjars

is it good
Is it good?

Version numbers!!!

best practices
Best practices

<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

Manage version numbers using Maven or Gradle

version numbers
Version numbers?

<linkhref="/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!

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

<dependency>

<groupId>org.webjars</groupId>

<artifactId>jquery-ui</artifactId>

<version>1.9.1</version>

</dependency>

pom.xml

using webjars
Using Webjars

<dependency>

<groupId>org.webjars</groupId>

<artifactId>jquery-ui</artifactId>

<version>1.9.1</version>

</dependency>

<mvc:resourcesmapping="/webjars/**"location="classpath:/META-INF/resources/webjars/"/>

<link rel=“stylesheet"href=“/webjars/jquery-ui/1.9.1/js/jquery-ui-1.9.1.custom.js">

。js file is inside a jar file!

Inside pom.xml Spring configuration

Inside JSP

what is jquery
What is jQuery?
  • Javascript framework
  • Very simple core with thousands of plugins available
    • Datatable
    • jQuery UI (datepicker, form interaction…)
jqueri ui
jqueri-ui
  • One of the most popular jQuery plugins
    • Autocomplete
    • Date picker
    • Drag and drop
    • Slider
  • Let us get started with dates!
how do you use dates in java
How do you use dates in Java?

Only for very simple use

GOOD!

Integrates well

with Spring MVC

Not available yet

May be in 2013

java.util.Date

Joda Time

JSR 310: Date and time API

jqueryui date picker
jqueryui date picker

<script>

$( "#startDate" ).datepicker({ dateFormat: "yy-m-dd" });

$( "#endDate" ).datepicker({ dateFormat: "yy-m-dd" });

</script>

<form:inputpath="startDate"/>

<form:inputpath="endDate"/>

JSP file

adding jquery1

Adding jQuery

Datatable

jquery datatables
jQuery datatables
  • jQuery plugin for datatables
  • Click, sort, scroll, next/previous…
  • http://datatables.net/
datatables in spring mvc
Datatables in Spring MVC

<dependency>

<groupId>com.github.datatables4j</groupId>

<artifactId>datatables4j-core-impl</artifactId>

<version>0.7.0</version>

</dependency>

pom.xml

  • You don’t even need to write Javascript yourself!
  • Just use DataTables4J
    • http://datatables4j.github.com/docs/
datatables in spring mvc1
Datatables in Spring MVC

<datatables:tabledata="${userList}"id="dataTable"row="user">

<datatables:columntitle="First Name"

property="firstName"sortable="true"/>

<datatables:columntitle="Last Name"

property="lastName"sortable="true"/>

</datatables:table>

JSP file

Inside JSP file

bootstrap

Bootstrap

Let’s talk about CSS…

why bootstrap
Why Bootstrap?

Let’s talk about Bootstrap!

So your Web Designer does not have to cry anymore

what is bootstrap
What is Bootstrap?

Originally called “Twitter Bootstrap”

Available from 2011

Typography, forms, buttons, charts, navigation and other interface components

Integrates well with jQuery

what is bootstrap1
What is Bootstrap?

1

2

3

https://github.com/popular/starred

  • Most popular project on github!
bootstrap themes
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

Avoiding JSP soup

HTML

Javascript

CSS

Taglibs

avoiding jsp soup1
Avoiding JSP soup
  • Our application now looks good in a web browser
  • What about the internals?
    • We can do better!
jsp custom tags
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
  • Custom tags are part of Java EE
    • .tag or .tagx files
  • Created in 2004
    • Not a new feature!
form fields without custom tags
Form fields: Without custom tags

<divclass=“control-group”id=“${lastName}">

<labelclass="control-label">${lastNameLabel}</label>

<divclass="controls">

<form:inputpath="${name}"/>

<spanclass="help-inline">

<form:errorspath="${name}"/>

</span>

</div>

</div>

CSS div

Label

Form input

Error message (if any)

JSP

using custom tags
Using custom tags

<%@taglibprefix="form"uri="http://www.spring…org/tags/form"%>

<%@attributename="name"required="true"rtexprvalue="true"%>

<%@attributename="label"required="true"rtexprvalue="true"%>

<divclass="control-group"id="${name}">

<labelclass="control-label">${label}</label>

<divclass="controls">

<form:inputpath="${name}"/>

<spanclass="help-inline">

<form:errorspath="${name}"/>

</span>

</div>

</div>

inputField.tag

  • First create a tag (or tagx) file
using custom tags1
Using custom tags

Folder which contains

custom tags

<htmlxmlns:custom="urn:jsptagdir:/WEB-INF/tags/html" …>

<custom:inputFieldname="firstName"label="Enter your first name:"/>

<custom:inputFieldname=”lastName"label="Enter your last name:"/>

</html>

JSP file

1 line of code

instead of 9!!

JSP

No more JSP soup!

  • Custom tag call
conclusion
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
ad