spring-mvc-jquery-bootstrap-en - Huihoo

disgustedtukwilaInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

144 εμφανίσεις

Integrating Spring @MVC

with jQuery and Bootstrap

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


Michael Isvy

2

History

3

3

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??

Inspired from a blog entry

4

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

JSP file


General Spring MVC best practices


Adding jQuery (Javascript)


Adding Bootstrap (CSS)


Avoiding JSP soup



Agenda

5

HTML

Javascript

CSS

Taglibs

General
Spring MVC

best practices



Many people like it because it is simple


Why Spring MVC?


InfoQ top 20 Web frameworks for the JVM


Spring MVC number 1


Why Spring MVC?

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



Survey from zeroturnaround


Spring MVC number 1


Why Spring MVC?

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



Which way is more appropriate?

How to use Spring MVC?

10

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!!


Programmatic validation?

Validation with Spring MVC

11

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!


Bean validation (JSR 303) annotations

Validation with Spring MVC

12

import

javax.validation.constraints.*;

public class

Dining {




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


private

String
creditCardNumber
;




@Min(0)


private

BigDecimal
monetaryAmount
;



@NotNull


private

Date
date
;


}

POJO


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


Form tag library

View Layer

14

<
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

JSP best practices!!

15

JSP: Which way is better?

16

<
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

Jar files best practices

One word about Webjars

Is it good?

18

Version numbers!!!

Best practices

19


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

Version numbers?

20

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


Allow CSS and JS libraries to be imported as Maven
libraries


jQuery, jQuery
-
ui, bootstrap, backbonejs…


http://www.webjars.org/

Webjars

Webjars

<
dependency
>


<
groupId
>
org.webjars
</
groupId
>


<
artifactId
>
jquery
-
ui
</
artifactId
>


<
version
>
1.9.1
</
version
>

</
dependency
>


pom.xml

Using Webjars

23


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!

Adding jQuery


Javascript framework


Very simple core with thousands of plugins available


Datatable


jQuery UI (datepicker, form interaction…)

What is jQuery?

Why jQuery?

jquery
-
ui


One of the most popular jQuery plugins


Autocomplete


Date picker


Drag and drop


Slider






Let us get started with dates!

jqueri
-
ui


java.util.Date




Joda Time





JSR 310: Date and time API

How do you use dates in Java?

29

Only for very simple use

GOOD!

Not available yet

May be in 2013

Integrates well

with Spring MVC

jqueryui date picker

30


<
script
>


$(
"#startDate"

).datepicker({ dateFormat:
"yy
-
m
-
dd"

});


$(
"#endDate"

).datepicker({ dateFormat:
"yy
-
m
-
dd"

});

</
script
>



<
form:input

path
=
"
startDate
"

/>

<
form:input

path
=
"
endDate
"

/>



JSP file

Adding jQuery

Datatable


jQuery plugin for datatables


Click, sort, scroll, next/previous…


http://datatables.net/


jQuery datatables


You don

t even need to write Javascript yourself!


Just use DataTables4J


http://datatables4j.github.com/docs/

Datatables in Spring MVC

33

<
dependency
>


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


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


<
version
>
0.7.0
</
version
>

</
dependency
>


pom.xml


Inside JSP file

Datatables in Spring MVC

34


<
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…


So your Web Designer does not have to cry anymore

Why Bootstrap?

Let

s talk about Bootstrap!


Originally called

Twitter Bootstrap



Available from 2011


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


Integrates well with jQuery

What is Bootstrap?


Most popular project on github!


What is Bootstrap?

https://github.com/popular/starred


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

Avoiding JSP soup

JSP file

HTML

Javascript

CSS

Taglibs


Our application now looks good in a web browser





What about the internals?


We can do better!




Avoiding JSP soup


Should be your best friend when working with JSPs
!







Can easily turn 100 lines of code into 10 lines of code!








JSP custom tags


Custom tags are part of Java EE


.tag or .tagx files


Created in 2004


Not a new feature!

Custom tags

43

Form fields: Without custom tags












<
div

class
=

control
-
group


id
=

${
last
Name}
"
>


<
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


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


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!


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



Conclusion

47

Thank You!