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

@@ -729,6 +729,7 @@
                 <module>spring-threads</module>
                 <module>spring-thymeleaf</module>
                 <module>spring-thymeleaf-2</module>
+                <module>spring-thymeleaf-3</module>
 
                 <module>spring-vault</module>
                 <module>spring-vertx</module>
@@ -1229,6 +1230,7 @@
 
                 <module>spring-thymeleaf</module>
                 <module>spring-thymeleaf-2</module>
+                <module>spring-thymeleaf-3</module>
 
                 <module>spring-vault</module>
                 <module>spring-vertx</module>

spring-thymeleaf-3/README.md

@@ -0,0 +1,5 @@
+## Spring Thymeleaf 3
+
+This module contains articles about Spring with Thymeleaf
+
+## Relevant Articles:

spring-thymeleaf-3/pom.xml

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <artifactId>spring-thymeleaf-3</artifactId>
+    <name>spring-thymeleaf-3</name>
+    <packaging>war</packaging>
+
+    <parent>
+        <groupId>com.baeldung</groupId>
+        <artifactId>parent-boot-2</artifactId>
+        <version>0.0.1-SNAPSHOT</version>
+        <relativePath>../parent-boot-2</relativePath>
+    </parent>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+                <configuration>
+                    <mainClass>com.baeldung.thymeleaf.cssandjs.CssAndJsApplication</mainClass>
+                    <layout>JAR</layout>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-war-plugin</artifactId>
+            </plugin>
+
+            <plugin>
+                <groupId>org.apache.tomcat.maven</groupId>
+                <artifactId>tomcat7-maven-plugin</artifactId>
+                <version>${tomcat7-maven-plugin.version}</version>
+                <executions>
+                    <execution>
+                        <id>tomcat-run</id>
+                        <goals>
+                            <goal>exec-war-only</goal>
+                        </goals>
+                        <phase>package</phase>
+                        <configuration>
+                            <path>/</path>
+                            <enableNaming>false</enableNaming>
+                            <finalName>webapp.jar</finalName>
+                            <charset>utf-8</charset>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+        <finalName>spring-thymeleaf-3</finalName>
+    </build>
+
+    <properties>
+        <maven.compiler.source>1.8</maven.compiler.source>
+        <maven.compiler.target>1.8</maven.compiler.target>
+        <tomcat7-maven-plugin.version>2.2</tomcat7-maven-plugin.version>
+    </properties>
+
+</project>

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);
+    }
+}

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);
+    }
+}

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";
+    }
+}

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);
+}

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;
+}

spring-thymeleaf-3/src/main/resources/templates/cssandjs/styledPage.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>Add CSS and JS to Thymeleaf</title>
+    <link th:href="@{/styles/cssandjs/main.css}" rel="stylesheet" />
+    <script th:inline="javascript">
+        var nameJs = /*[[${name}]]*/;
+    </script>
+    <script type="text/javascript" th:src="@{/js/cssandjs/actions.js}"></script>
+</head>
+<body>
+    <h2>Carefully Styled Heading</h2>
+    <p>
+        This is text on which we want to apply <strong>very special</strong> styling.
+    </p>
+    <p><label>Name:</label><span th:text="${name}"></span></p>
+    <button type="button" th:onclick="showName(nameJs);">Show Name</button>
+</body>
+</html>

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() {
+        
+    }
+}

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")));
+    }
+}