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
This commit is contained in:
Amy DeGregorio 2020-03-31 12:02:54 -04:00 committed by GitHub
parent 8c69054bec
commit 1e052c5a72
11 changed files with 221 additions and 0 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,7 @@
function showAlert() {
alert("The button was clicked!");
}
function showName(name) {
alert("Here's the name: " + name);
}

View File

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

View File

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

View File

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

View File

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