Presentation is loading. Please wait.

Presentation is loading. Please wait.

Integrating with jQuery and Bootstrap Michael Isvy.

Similar presentations

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

1 Integrating with jQuery and Bootstrap Michael Isvy

2 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 Michael Isvy 2

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

4 Inspired from a blog entry 4

5 JSP file General Spring MVC best practices Adding jQuery (Javascript) Adding Bootstrap (CSS) Avoiding JSP soup Agenda 5 HTML Javascript CSS Taglibs

6 General Spring MVC best practices

7 Many people like it because it is simple Why Spring MVC?

8 InfoQ top 20 Web frameworks for the JVM –Spring MVC number 1 Why Spring MVC?

9 Survey from zeroturnaround –Spring MVC number 1 Why Spring MVC? tech-devs-and-data/

10 Which way is more appropriate? How to use Spring MVC? 10 public class UserController extends SimpleFormController { public ModelAndView onSubmit(Object command) { //... } public class UserController method=RequestMethod.POST) public ModelAndView createUser(User user) { //... } } Deprecated!!

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

12 Bean validation (JSR 303) annotations Validation with Spring MVC 12 import javax.validation.constraints.*; public class Dining private String private BigDecimal private Date date; } POJO

13 Bean validation (JSR 303) Validation with Spring MVC import javax.validation.Valid; public class UserController public String User user, BindingResult result) { if (result.hasErrors()) { return rewards/edit; } // continue on success... } Controller

14 Form tag library View Layer 14 Enter your first name:... Save changes JSP

15 JSP best practices!! 15

16 JSP: Which way is better? 16 ${user.firstName} ${user.lastName} Not perfect: it is better to use taglibs No html escape: risk for cross site scripting Good! jsp file

17 Jar files best practices One word about Webjars

18 Is it good? 18 Version numbers!!!

19 Best practices 19 Manage version numbers using Maven or Gradle org.springframework spring-webmvc RELEASE junit 4.10 test Maven POM file pom.xml

20 Version numbers? 20 Lets talk about Webjars! Lets talk about Webjars! JSP file

21 Allow CSS and JS libraries to be imported as Maven libraries –jQuery, jQuery-ui, bootstrap, backbonejs… – Webjars

22 org.webjars jquery-ui pom.xml

23 Using Webjars 23 Inside pom.xmlSpring configuration Inside JSP org.webjars jquery-ui js file is inside a jar file!

24 Adding jQuery

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

26 Why jQuery?

27 jquery-ui

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

29 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 Not available yet May be in 2013 Integrates well with Spring MVC Integrates well with Spring MVC

30 jqueryui date picker 30 $( "#startDate" ).datepicker({ dateFormat: "yy-m-dd" }); $( "#endDate" ).datepicker({ dateFormat: "yy-m-dd" }); … JSP file

31 Adding jQuery Datatable

32 jQuery plugin for datatables Click, sort, scroll, next/previous… jQuery datatables

33 You dont even need to write Javascript yourself! Just use DataTables4J – Datatables in Spring MVC 33 com.github.datatables4j datatables4j-core-impl pom.xml

34 Inside JSP file Datatables in Spring MVC 34 JSP file

35 Bootstrap Lets talk about CSS…

36 So your Web Designer does not have to cry anymore Why Bootstrap? Lets talk about Bootstrap! Lets talk about Bootstrap!

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

38 Most popular project on github! What is Bootstrap?

39 Hundreds of themes available –So your website does not look like all other websites! –Some are free and some are commercial Example: Bootstrap themes

40 Avoiding JSP soup JSP file HTML Javascript CSS Taglibs

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

42 Should be your best friend when working with JSPs! Can easily turn 100 lines of code into 10 lines of code! JSP custom tags

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

44 Form fields: Without custom tags ${lastNameLabel} CSS div Label Form input Error message (if any) JSP

45 First create a tag (or tagx) file Using custom tags ${label} inputField.tag

46 Custom tag call Using custom tags Folder which contains custom tags … JSP file 1 line of code instead of 9!! No more JSP soup!

47 Consider using WebJars for static files – Its easy to integrate Spring MVC with jQuery –Consider using DataTables4J – –Bootstrap is cool! –JSP custom tags can make your life easier Conclusion 47

48 Thank You!

Download ppt "Integrating with jQuery and Bootstrap Michael Isvy."

Similar presentations

Ads by Google