I'm tryting to have email templates rendered using Thymeleaf and I would like to have the subject and the body in the same file, but rendered separately. I do not want to use spring view, just plain SpringTemplateEngine.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--/*#thymesVar id="user" type="com.myapp.user.User"*/-->
<!--/*#thymesVar id="invitationId" type="java.util.UUID"*/-->
<head>
<title th:fragment="subject">Hello <span th:text="${user.name}"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>
Hello <span th:text="${user.name}"></span>,<br>
you've been invited to join MyApp.
</p>
<p>
Click on the following link to confirm your email and setup a password:<br>
<a th:href="#{https://myapp.com/accept-invitation(id=${invitationId})}">Accept invitation</a>
</p>
<p>
Best regards,<br/>
<em>The MyApp team</em>
</p>
</body>
</html>
There are several problems with this
First, I'm unable to get Thymeleaf render only contents of <title>
String subject = templateEngine.process(
templateFile,
ImmutableSet.of("subject"),
new Context(Locale.ENGLISH, contextVariables)
);
it renders literary only Hello - it looks like the opening <title> tag is always removed and the fragment is trimmer right after the first tag.
And when I render the whole template, it returns
<!DOCTYPE html>
<html>
<head>
Hello <span>pepa</span></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<p>
Hello <span>pepa</span>,<br>
...
Using the following in the <title> makes the output a bit nicer
<span th:text="${user.name}" th:remove="tag"></span>
but the opening tag is still missing.
When I would theoretically succeed in rendering the title correctly, I'd still have it wrapped in an HTML tag - which obviously cannot be used as an email subject. Is there a way to render only contents of the fragment?
I would really like to have both the email subject and body in the same template for cases, when for example I want to do some iteration in the title to generate it from a list - I do not want to do any string concatenations, I wanna have it in the template.
Any suggestions please?
If you want to include only the content of your fragment, assuming that your fragment is called your_fragment.html and is placed under /resources/templates/fragments you can do:
<head>
<title th:replace="fragments/your_fragment::your_fragment"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
And your_fragment.html:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
<div th:fragment="your_fragment" th:remove="tag">
Hello <span th:text="${user.name}" th:remove="tag"></span>
</div>
</body>
</html>
This will render:
<head>
Hello username
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
Related
Previously I have worked just with JSP and Apache Tiles and now I'm trying to create Thymeleaf template for the first time. The problem I faced is that I have no idea how to insert custom header, footer and other sections into default.html. Here is the code example.
default.html:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<title>Default template</title>
<link rel="stylesheet" type="text/css" href="../static/css/app.css" th:href="#{/css/app.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css" th:href="#{/css/bootstrap.css}"/>
<link rel="stylesheet" type="text/css" href="../static/css/myCss.css" th:href="#{/css/myCss.css}"/>
</head>
<body>
<header id="header" layout:fragment="header">
HEADER
</header>
<section id="sidemenu" layout:fragment="sideMenu">
SIDE_MENU
</section>
<section id="site-content" layout:fragment="siteContent"></section>
<footer id="footer" layout:fragment="footerTemplate"></footer>
</body>
</html>
In default.html I have 'siteContent' which is provided for inserting all of application's html files, and 'header', 'sideMenu' and 'footer' sections that have to be implemented in separate corresponding html files (templates) and inserted into default.html.
index.html:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default">
<head>
<title>Index</title>
</head>
<body>
<div layout:fragment="siteContent">
<h1>Hello world!</h1>
</div>
</body>
</html>
footer.html:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{default}">
<head>
<title>Footer Template</title>
</head>
<body>
<div layout:fragment="footer">
Copyright © 2017
</div>
</body>
</html>
This is an example of footer.
SiteContent area works fine. Footer's 'Copyright © 2017' is supposed to be imported into default.html's footer area, but it doesn't.
The solution is found: I should have used
'footer id="footer" layout:include="footerTemplate"'
instead of
'footer id="footer" layout:fragment="footerTemplate"'
By the way, the examples, listed on thymeleaf's website never worked, but the correct decision wasn't there.
I'm trying to handle alerts event with HtmlUnitDriver, but I have some problems, and I would like to understand why.
Here is the java code:
HtmlUnitDriver browser = new HtmlUnitDriver(true);
browser.get("http://localhost:8001/index.html");
browser.findElementById("myButton").click();
try {
WebDriverWait wait = new WebDriverWait(browser, 2);
wait.until(ExpectedConditions.alertIsPresent());
Alert alert = browser.switchTo().alert();
alert.accept();
System.out.println("ALERT");
} catch (Exception e) {
System.out.println(e.getMessage());
System.out.println("NO ALERT");
}
String htmlContent = browser.getPageSource();
System.out.println(htmlContent);
browser.close();
and this is the html code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form id="form1">
<input id="username" name="username" />
<button id="myButton" type="button" value="Page2">Go to Page2</button>
</form>
</body>
</html>
<script>
document.getElementById("myButton").onclick = function () {
location.href = "page2.html";
};
</script>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Page2</title>
<meta charset="utf-8" />
</head>
<body onload="myfunction('hello2')">
<p id="result"></p>
</body>
</html>
<script>
function myfunction(data) {
document.getElementById('result').innerHTML = data
}
</script>
The output in the console is :
NO ALERT
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
Page2
</title>
<meta charset="utf-8"/>
</head>
<body onload="myfunction('hello2')">
?
<p id="result">
hello2
</p>
<script>
//<![CDATA[
function myfunction(data) {
document.getElementById('result').innerHTML = data
}
//]]>
</script>
</body>
</html>
Looking at the output, it seems to be a little different from the source code, and about this I have few questions.
why the alert on page2.html isn't detected?
Why are there some extra characters, such as "?" and "// < ! [CDATA["? How can I avoid them?
I'm trying to handle alerts, and I'm at the beginning, so any suggestions will be appreciate.
Where are you expecting the alert to come from? The code for handling the alert looks okay, but there's nothing in the HTML that suggests that an alert will be triggered at any stage. The only script that runs on Page 2 is setting p#result's innerHTML to 'hello2'.
As far as the extra characters are concerned, I'm not so sure. This answer might shed some light on the CDATA stuff being generated.
I made a config.properties file that sets a few things, including a webpage name. How do i access this webpage name when I am setting it inside of my html code?
Here is my config.properties file located in my resource directory in my java project.
port_number=8080
default_directory=/home/admin/Documents/archive
log_level= DEBUG
acceptable_extensions=.tar,.tar.gz,tar.tgz,.jar,.zip
DB_name= Thunder.db
title=Title
Then I have an html file called bootstrapPage.html also under my resource directory. Here is a bit of it... I want to use the title I set above in my config file inside this html file where it currently says "Project Thunder" if that is possible.
<html lang="en">
<head>
<script src="config.properties"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Upload</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<!-- creates top menu-->
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project Thunder</a>
</div>
</nav>
</div>
I am working with Thymeleaf for the first time, and I need a clarification about the templates. If I correctly understand the documentation, I can include a template - or just a fragment of it - in my page. So for example, I can write something like that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="template/layout :: header">
</head>
<body>
Hello world
<div th:include="template/layout :: footer"></div>
</body>
</html>
But what I want is in fact the opposite way of using the template : instead of including template fragment in the page, I want to include the page inside my template, something like that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
...
</head>
<body>
<div id="my-template-header">...</div>
<div id="the-content">
<!-- include here the content of the current page visited by the user -->
???
</div>
<div id="my-template-footer">...</div>
</body>
In others words, is there a way to have an equivalent of the Sitemesh decorators tags in Thymeleaf?
Thanks
with Thymeleaf 2.1, you can write something like that:
Create the template (for ex. templates/layout.html), and add the th:fragment="page" information in html tag and define the content area with th:include="this :: content" information:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
th:fragment="page">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
layout page
<div th:include="this :: content"/>
layout footer
</body>
</html>
Now create the page that will include this template adding th:include="templates/layout :: page" in html tag and put your main content inside a div with th:fragment="content"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
th:include="templates/layout :: page">
<head>
<title></title>
</head>
<body>
<div th:fragment="content">
my page content
</div>
</body>
</html>
In layout page you can use this (th:include="this :: content") or suppress this option (th:include=":: content"). It seems like jsf facelets I think.
Ok, as stated by Sotirios Delimanolis, Thymeleaf does not support that way of using template, or should I say "Hierarchical layouts", as explained by Daniel Fernandez in this thread.
As sitemesh and Thymeleaf are compatible, it seems that I have to use both solutions. Too bad.
Edit: As suggested by DennisJaamann in a comment, I finally used Thymeleaf Layout Dialect, a view dialect that provides the feature I was looking for.
The working code:
First I add the LayoutDialect class:
#Bean
public ServletContextTemplateResolver templateResolver() {
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
resolver.setPrefix("/WEB-INF/views/");
resolver.setSuffix(".html");
//NB, selecting HTML5 as the template mode.
resolver.setTemplateMode("HTML5");
resolver.setCacheable(false);
return resolver;
}
Then, I create the template (for ex. templates/layout.html), and add the layout:fragment information where I want to put the content of the current page:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
...
</head>
<body>
<div id="my-template-header">...</div>
<div id="the-content" layout:fragment="content">
<!-- include here the content of the current page visited by the user -->
</div>
<div id="my-template-footer">...</div>
</body>
and the page will refers to the template with the attribute layout:decorator:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="templates/layout">
<body>
<div layout:fragment="content">
Hello world
</div>
</body>
</html>
You need
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>1.2.2</version>
</dependency>
and add this to your SpringTemplateEngine:
#Bean
#Description("Thymeleaf template engine with Spring integration")
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(templateResolver());
templateEngine.addDialect(new LayoutDialect());
return templateEngine;
}
If now create a folder named template in your views folder.
views/home.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="template/layout">
<body>
<div layout:fragment="content">
Hello world
</div>
</body>
</html>
views/layout/layout.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
</head>
<body>
<div id="content" layout:fragment="content">
</div>
</body>
</html>
As far as I know, you can't. A possible solution would be to create a ViewResolver that always forwards to your decorator file, but at the same time put Model attributes that would have the actual path to the fragment you want to include.
I am tring to run function that get 2 variables one of them should get the value from textfield.
any advice?
<%#page import="root.SQLQuery"%>
<%# page language="java" contentType="text/html; charset=windows-1255"
pageEncoding="windows-1255"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%# page import="root.SQLQuery"%>
<%
String emp_email = session.getAttribute("email").toString();
SQLQuery sql = new SQLQuery();
String link="";
%>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<title>Insert title here</title>
</head>
<body>
<center>
<table width="900" height="900">
<iframe src="http://www.aol.com/av" width="900" height="900"></iframe>
<center>
<font color=red>your email is:<%=emp_email%>></font>
Copy the link here: <input type="text" name="videoLink" id="link">
<input type="submit" value="submit" onclick="<%sql.meetingUpdateVideoLink(emp_email, request.getParameter("videoLink").toString()); %>>">
</center>
</table>
</center>
I am tring to insert the fanction meetingUpdateVideoLink() two variables:
email - that easy I get from session.
Link - that is the tricky one I need to get it from the textfield name="videoLink"
Thanks,
Cfir