Forums:

SpringMVC with Bootstrap and Thymeleaf pages decoration

Ranch Hand

Posts: 45

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hey

I am working in:
"SpringMVC 5", with "Twitter Bootstrap 4" html pages, and "Thymeleaf 3" templating, in IntelliJ EAP (latest version) and Tomcat9, Maven

The structure of my project:

I am using these tutorials:
https://www.baeldung.com/spring-thymeleaf-fragments
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout

I have my page (home.html). I have my template (template.html).
According to the 2nd tutorial:

1. I inserted the "menubar" into the "template" (this insert must work, because I inserted the menubar directly to the "home.html" and it was inserted successfuly)
2. Question that I cannot solve from what they say into the 2nd tutorial:
How I "decorate" my "home.html" according the "template.html". I mean, how I use the template to decorate according it all my pages?

I used the following in the "home.html" but it is not working:

My files are:

"home.html"

"menubar.html"

"template.html"

"WebConfig.java"

@Configuration
@ComponentScan(basePackages = {"packages"})
@EnableWebMvc
public class WebConfig {
/*
I have a seperate controler that GETs my "home.html" successfuly
*/
    @Bean
    public ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/views/");
		viewResolver.setSuffix(".html");
        viewResolver.setExposeContextBeansAsAttributes(true);
        return viewResolver;
    }

@Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
		//templateEngine.addDialect(new LayoutDialect()); // This is not working at all
        templateEngine.setTemplateResolver(thymeleafTemplateResolver());
        return templateEngine;
    }

@Bean
    public SpringResourceTemplateResolver thymeleafTemplateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
		templateResolver.setTemplateMode("HTML5");
        templateResolver.setPrefix("/WEB-INF/views/layout/");
		templateResolver.setSuffix(".html");
        return templateResolver;
    }

@Bean
    public ThymeleafViewResolver thymeleafViewResolver() {
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        return viewResolver;
    }
}

In my pom (some of it):

<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-core</artifactId>
	<version>${springframework.version}</version>
</dependency>
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-context</artifactId>
	<version>${springframework.version}</version>
</dependency>
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-context-support</artifactId>
	<version>${springframework.version}</version>
</dependency>
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-beans</artifactId>
	<version>${springframework.version}</version>
</dependency>
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-web</artifactId>
	<version>${springframework.version}</version>
</dependency>
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-webmvc</artifactId>
	<version>${springframework.version}</version>
</dependency>
<dependency>
	<groupId>org.thymeleaf</groupId>
	<artifactId>thymeleaf</artifactId>
	<version>3.0.12.RELEASE</version>
</dependency>
<dependency>
	<groupId>org.thymeleaf</groupId>
	<artifactId>thymeleaf-spring5</artifactId>
	<version>3.0.12.RELEASE</version>
</dependency>
<dependency>
	<groupId>nz.net.ultraq.thymeleaf</groupId>
	<artifactId>thymeleaf-layout-dialect</artifactId>
	<version>3.0.0</version>
</dependency>
<dependency>
	<groupId>org.thymeleaf.extras</groupId>
	<artifactId>thymeleaf-extras-springsecurity5</artifactId>
	<version>3.0.4.RELEASE</version>
</dependency>
<dependency>
	<groupId>nz.net.ultraq.thymeleaf</groupId>
	<artifactId>thymeleaf-spring-environment-dialect</artifactId>
	<version>1.0.1</version>
</dependency>

Please some one help. Thanks in advance

Thomas Mylonas

Ranch Hand

Posts: 45

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hey finally I found solution:

Step 1

I put the page and the layout in the same folder:

Step 2

In "home.html" I added the "layout:decorate"

In "template.html" I changed the "layout:fragment"

In the "WebConfig.java" I deleted the "viewResolver() method" and I changed the others like following:

@Configuration
@ComponentScan(basePackages = {"packages"})
@EnableWebMvc
public class WebConfig {
    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
		templateEngine.addDialect(new LayoutDialect()); // I added it again. Very important
        templateEngine.setTemplateResolver(thymeleafTemplateResolver());
        return templateEngine;
    }

@Bean
    public SpringResourceTemplateResolver thymeleafTemplateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
		templateResolver.setTemplateMode("HTML");
        templateResolver.setPrefix("/WEB-INF/views/");
		templateResolver.setSuffix(".html");
        return templateResolver;
    }

But... A problem remains. I cannot keep my pages and my layout in different folders. If I do it with the previous structure and put: layout:decorate="~{layout/template}" the page is displayed as a blank page.

Any solution and idea from you it would be perfect for me.
A part of the solution is found though.

Update:
Solution in the last part is found. I had a mistake in the "template.html".
I should put it as: "layout/fragments/menubar.html :: menubar" with the structure:

And the code will be:

Campbell Ritchie

Marshal

Posts: 77141

370

posted 1 year ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Please beware of editing; if there is an answer before your edits, that answer will look mistaken. In this case, I think nobody else noticed the edits

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

Thomas Mylonas

Ranch Hand

Posts: 45

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hey Cambell Ritchie

Thanks a lot for notifying me this info.

With respect

Did you see how Paul cut 87% off of his electric heat bill with 82 watts of micro heaters?