spring boot

Spring boot w/ Thymeleaf, jQuery & jQuery UI, and Bootstrap

programming, Spring Boot, Uncategorized

A more typical/modern setup would be to replace JSP with one of the template engines and JS and styling libraries:

Add Thymeleaf to Dependency

Add this to the project POM:

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

Installing files

jQuery

Copy into src/main/resources/static/js/ the downloaded jquery-a.b.c.js (or jquery-a.b.c.min.js)

jQuery UI

  • Copy into src/main/resources/static/js/ the downloaded jquery-ui.js (or jquery-ui.min.js)
  • Copy into src/main/resources/static/css/ the downloaded jquery-ui*.css
  • Copy into src/main/resources/static/css/ the images subdirectory itself (i.e. as src/main/resources/static/css/images)

Bootstrap

Copy into src/main/resources/static/ the three subdirectories from the Bootstrap distribution:

  • css
  • fonts
  • js

Include the files into templates

This can be done per-template, but probably easier to have a fragment that templates can call.

Start with a fragment file

Create fragment template such as src/main/resources/templates/fragments/js.html

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="bootstrap">
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <script src="/js/bootstrap.min.js"></script>
</div>
<div th:fragment="jquerys">
    <link rel="stylesheet" href="/css/jquery-ui.css"/>
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
</div>
</body>
</html>

NOTE the two jquery libraries are combined into one fragment “jquerys”. They can be broken up as needed.

Reference various fragments in templates as needed

E.g. from src/main/resources/templates/index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
...
<div th:include="fragments/js :: jquerys"></div>
<div th:include="fragments/js :: bootstrap"></div>
....

Spring Boot w/ JSP

Java, maven, programming, Spring Boot

Project Setup

From the CLI or http://start.spring.io/, initialize a project with “web” capability.  What ends up happening is addition of the dependency:

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

Start with this directory structure. Be sure the controller (and any other Spring beans) are located under where the Application class (JspDemoApplication in this example) is.

...
  src/
    main/
      java/
        org/
          van/
            jspdemo/
              JspDemoApplication.java
              controller/
                DemoController.java
      resources/
        application.properties
      webapp/
        WEB-INF/
          jsp/
            demoindex.jsp

Controller and View

Add a controller file DemoController.java (see tree above for location):

...

@Controller
@RequestMapping("/jspdemo")
class DemoController { 
  @RequestMapping("/index")
  public String index(@RequestParam("name") String name, Model model) {
    model.addAttribute(name.toUpperCase());
    return "demoindex";  // view/JSP name
  }
}

Then the view file demoindex.jsp (see tree above for location). NOTE that the webapp/WEB-INF/jsp subdirectory needs to be created.

<html>
  <div>
    Hello, ${name}.
  </div>
</html>

Add support for JSP

Add these dependencies:

<dependency>
  <groupId>org.apache.tomcat.embed</groupId>
  <artifactId>tomcat-embed-jasper</artifactId>
  <scope>provided</scope>
</dependency>
<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>jstl</artifactId>
  <scope>provided</scope>
</dependency>

Add these to application.properties:

spring.view.prefix: /WEB-INF/jsp/
spring.view.suffix: .jsp