From 1e052c5a721be544899a146080b5103f1af2c8d5 Mon Sep 17 00:00:00 2001 From: Amy DeGregorio Date: Tue, 31 Mar 2020 12:02:54 -0400 Subject: [PATCH] BAEL-3827 Add CSS and JS to Thymeleaf (#8985) * BAEL-3827 Add CSS and JS to Thymeleaf * BAEL-3827 Add integration tests * BAEL-3827 Add new spring-thymeleaf-3 module to the parent pom.xml * BAEL-3827 Add new spring-thymeleaf-3 module to the parent pom.xml in both places --- pom.xml | 2 + spring-thymeleaf-3/README.md | 5 ++ spring-thymeleaf-3/pom.xml | 78 +++++++++++++++++++ .../com/baeldung/thymeleaf/Application.java | 11 +++ .../cssandjs/CssAndJsApplication.java | 11 +++ .../cssandjs/CssAndJsController.java | 15 ++++ .../resources/static/js/cssandjs/actions.js | 7 ++ .../resources/static/styles/cssandjs/main.css | 18 +++++ .../templates/cssandjs/styledPage.html | 20 +++++ .../thymeleaf/ApplicationIntegrationTest.java | 13 ++++ .../CssAndJsControllerIntegrationTest.java | 41 ++++++++++ 11 files changed, 221 insertions(+) create mode 100644 spring-thymeleaf-3/README.md create mode 100644 spring-thymeleaf-3/pom.xml create mode 100644 spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/Application.java create mode 100644 spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsApplication.java create mode 100644 spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsController.java create mode 100644 spring-thymeleaf-3/src/main/resources/static/js/cssandjs/actions.js create mode 100644 spring-thymeleaf-3/src/main/resources/static/styles/cssandjs/main.css create mode 100644 spring-thymeleaf-3/src/main/resources/templates/cssandjs/styledPage.html create mode 100644 spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/ApplicationIntegrationTest.java create mode 100644 spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/cssandjs/CssAndJsControllerIntegrationTest.java diff --git a/pom.xml b/pom.xml index e82390a37e..9f132ca7a8 100644 --- a/pom.xml +++ b/pom.xml @@ -729,6 +729,7 @@ spring-threads spring-thymeleaf spring-thymeleaf-2 + spring-thymeleaf-3 spring-vault spring-vertx @@ -1229,6 +1230,7 @@ spring-thymeleaf spring-thymeleaf-2 + spring-thymeleaf-3 spring-vault spring-vertx diff --git a/spring-thymeleaf-3/README.md b/spring-thymeleaf-3/README.md new file mode 100644 index 0000000000..e1ddd727d7 --- /dev/null +++ b/spring-thymeleaf-3/README.md @@ -0,0 +1,5 @@ +## Spring Thymeleaf 3 + +This module contains articles about Spring with Thymeleaf + +## Relevant Articles: \ No newline at end of file diff --git a/spring-thymeleaf-3/pom.xml b/spring-thymeleaf-3/pom.xml new file mode 100644 index 0000000000..7677e50d79 --- /dev/null +++ b/spring-thymeleaf-3/pom.xml @@ -0,0 +1,78 @@ + + + 4.0.0 + spring-thymeleaf-3 + spring-thymeleaf-3 + war + + + com.baeldung + parent-boot-2 + 0.0.1-SNAPSHOT + ../parent-boot-2 + + + + + org.springframework.boot + spring-boot-starter-web + + + org.springframework.boot + spring-boot-starter-thymeleaf + + + + org.springframework.boot + spring-boot-starter-test + test + + + + + + + org.springframework.boot + spring-boot-maven-plugin + + com.baeldung.thymeleaf.cssandjs.CssAndJsApplication + JAR + + + + org.apache.maven.plugins + maven-war-plugin + + + + org.apache.tomcat.maven + tomcat7-maven-plugin + ${tomcat7-maven-plugin.version} + + + tomcat-run + + exec-war-only + + package + + / + false + webapp.jar + utf-8 + + + + + + spring-thymeleaf-3 + + + + 1.8 + 1.8 + 2.2 + + + diff --git a/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/Application.java b/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/Application.java new file mode 100644 index 0000000000..2ccca82497 --- /dev/null +++ b/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/Application.java @@ -0,0 +1,11 @@ +package com.baeldung.thymeleaf; + +import org.springframework.boot.SpringApplication; +import org.springframework.boot.autoconfigure.SpringBootApplication; + +@SpringBootApplication +public class Application { + public static void main(String[] args) { + SpringApplication.run(Application.class, args); + } +} diff --git a/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsApplication.java b/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsApplication.java new file mode 100644 index 0000000000..fc6c142b8b --- /dev/null +++ b/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsApplication.java @@ -0,0 +1,11 @@ +package com.baeldung.thymeleaf.cssandjs; + +import org.springframework.boot.SpringApplication; +import org.springframework.boot.autoconfigure.SpringBootApplication; + +@SpringBootApplication +public class CssAndJsApplication { + public static void main(String[] args) { + SpringApplication.run(CssAndJsApplication.class, args); + } +} diff --git a/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsController.java b/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsController.java new file mode 100644 index 0000000000..b56a7b468e --- /dev/null +++ b/spring-thymeleaf-3/src/main/java/com/baeldung/thymeleaf/cssandjs/CssAndJsController.java @@ -0,0 +1,15 @@ +package com.baeldung.thymeleaf.cssandjs; + +import org.springframework.stereotype.Controller; +import org.springframework.ui.Model; +import org.springframework.web.bind.annotation.GetMapping; + +@Controller +public class CssAndJsController { + + @GetMapping("/styled-page") + public String getStyledPage(Model model) { + model.addAttribute("name", "Baeldung Reader"); + return "cssandjs/styledPage"; + } +} diff --git a/spring-thymeleaf-3/src/main/resources/static/js/cssandjs/actions.js b/spring-thymeleaf-3/src/main/resources/static/js/cssandjs/actions.js new file mode 100644 index 0000000000..e192e6358e --- /dev/null +++ b/spring-thymeleaf-3/src/main/resources/static/js/cssandjs/actions.js @@ -0,0 +1,7 @@ +function showAlert() { + alert("The button was clicked!"); +} + +function showName(name) { + alert("Here's the name: " + name); +} \ No newline at end of file diff --git a/spring-thymeleaf-3/src/main/resources/static/styles/cssandjs/main.css b/spring-thymeleaf-3/src/main/resources/static/styles/cssandjs/main.css new file mode 100644 index 0000000000..1f57b4616a --- /dev/null +++ b/spring-thymeleaf-3/src/main/resources/static/styles/cssandjs/main.css @@ -0,0 +1,18 @@ +h2 { + font-family: sans-serif; + font-size: 1.5em; + text-transform: uppercase; +} + +strong { + font-weight: 700; + background-color: yellow; +} + +p { + font-family: sans-serif; +} + +label { + font-weight: 600; +} \ No newline at end of file diff --git a/spring-thymeleaf-3/src/main/resources/templates/cssandjs/styledPage.html b/spring-thymeleaf-3/src/main/resources/templates/cssandjs/styledPage.html new file mode 100644 index 0000000000..12e4fc9227 --- /dev/null +++ b/spring-thymeleaf-3/src/main/resources/templates/cssandjs/styledPage.html @@ -0,0 +1,20 @@ + + + + + Add CSS and JS to Thymeleaf + + + + + +

Carefully Styled Heading

+

+ This is text on which we want to apply very special styling. +

+

+ + + \ No newline at end of file diff --git a/spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/ApplicationIntegrationTest.java b/spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/ApplicationIntegrationTest.java new file mode 100644 index 0000000000..b7cfa140f0 --- /dev/null +++ b/spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/ApplicationIntegrationTest.java @@ -0,0 +1,13 @@ +package com.baeldung.thymeleaf; + +import org.junit.Test; +import org.springframework.boot.test.context.SpringBootTest; + +@SpringBootTest +public class ApplicationIntegrationTest { + + @Test + public void contextLoads() { + + } +} diff --git a/spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/cssandjs/CssAndJsControllerIntegrationTest.java b/spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/cssandjs/CssAndJsControllerIntegrationTest.java new file mode 100644 index 0000000000..365608bd2a --- /dev/null +++ b/spring-thymeleaf-3/src/test/java/com/baeldung/thymeleaf/cssandjs/CssAndJsControllerIntegrationTest.java @@ -0,0 +1,41 @@ +package com.baeldung.thymeleaf.cssandjs; + +import static org.hamcrest.CoreMatchers.containsString; +import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content; +import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status; +import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.view; + +import org.junit.Before; +import org.junit.Test; +import org.junit.runner.RunWith; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.test.context.ContextConfiguration; +import org.springframework.test.context.junit4.SpringJUnit4ClassRunner; +import org.springframework.test.context.web.WebAppConfiguration; +import org.springframework.test.web.servlet.MockMvc; +import org.springframework.test.web.servlet.request.MockMvcRequestBuilders; +import org.springframework.test.web.servlet.setup.MockMvcBuilders; +import org.springframework.web.context.WebApplicationContext; + +@RunWith(SpringJUnit4ClassRunner.class) +@WebAppConfiguration +@ContextConfiguration(classes = CssAndJsApplication.class) +public class CssAndJsControllerIntegrationTest { + @Autowired + private WebApplicationContext context; + + private MockMvc mockMvc; + + @Before + public void setup() { + this.mockMvc = MockMvcBuilders.webAppContextSetup(this.context).build(); + } + + @Test + public void whenCalledGetStyledPage_thenReturnContent() throws Exception { + this.mockMvc.perform(MockMvcRequestBuilders.get("/styled-page")) + .andExpect(status().isOk()) + .andExpect(view().name("cssandjs/styledPage")) + .andExpect(content().string(containsString("Carefully Styled Heading"))); + } +}