Like in topic, Can I use Thymeleaf layout dialect with spring? Do I have to use Spring Standard Dialect?
There is so many materials on web, which makes me really confused.
I've started with Layout dialect, but I cant get to work whole app.
Here is my template main file:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>DERP></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="../../css/template.css" th:href="@{/css/template.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/font-awesome-4.2.0/css/font-awesome.min.css" th:href="@{/lib/font-awesome-4.2.0/css/font-awesome.min.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/bootstrap-3.3.1-dist/css/themes/slate/bootstrap.min.css" th:href="@{/lib/bootstrap-3.3.1-dist/css/themes/slate/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" media="all" href="../../lib/animate/animate.css" th:href="@{/lib/animate/animate.css}" />
</head>
<body>
<div th:include="fragments/bodyHeader" th:remove="tag">
for prototyping
</div>
<div id="mainMenu">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DERP</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Active</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-home"></i> Customer <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- #mainMenu ENDS-->
<div layout:fragment="header">Static header</div>
<div layout:fragment="pageContent">Demo static page content</div>
<div id="pageFooter" class="panel panel-default">
<div class="panel-body">Copyright Daniel Korbel 2014</div>
</div>
<div id="javaScriptSection">
<script type="text/javascript" src="../../lib/jquery/jquery-2.1.1.min.js" th:src="@{lib/jquery/jquery-2.1.1.min.js}"></script>
<script type="text/javascript" src="../../js/template.js" th:src="@{/js/template.js}"></script>
<script type="text/javascript" src="../../lib/noty-2.3.1/js/noty/packaged/jquery.noty.packaged.min.js" th:src="@{/lib/noty-2.3.1/js/noty/packaged/jquery.noty.packaged.min.js}"></script>
<script type="text/javascript" src="../../lib/noty-2.3.1/js/noty/layouts/topRight.js" th:src="@{/lib/noty-2.3.1/js/noty/layouts/topRight.js}"></script>
<script type="text/javascript" src="../../js/notyStarter.js" th:src="@{/js/notyStarter.js}"></script>
<script type="text/javascript" src="../../lib/bootstrap-3.3.1-dist/js/bootstrap.min.js" th:src="@{/lib/bootstrap-3.3.1-dist/js/bootstrap.min.js}"></script>
</div>
</body>
</html>
and my sample body file which is returned by controller:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/template">
<div layout:fragment="pageContent">
<p>LIST</p>
</div>
</html>
But unfortunatelly this code works only with Layout dialect.
Can anyone help me transform that code to work with spring standard dialect?
My thymeleaf config:
public class ThymeleafConfig {
@Bean
public ServletContextTemplateResolver templateResolver() {
ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
resolver.setPrefix("/WEB-INF/view/");
resolver.setSuffix(".html");
resolver.setTemplateMode("HTML5");
resolver.setOrder(1);
resolver.setCacheable(false);
return resolver;
}
@Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(templateResolver());
templateEngine.setDialect(new SpringStandardDialect());
//templateEngine.setDialect(new LayoutDialect());
return templateEngine;
}
@Bean
public ThymeleafViewResolver viewResolver() {
ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
viewResolver.setTemplateEngine(templateEngine());
viewResolver.setCharacterEncoding("UTF-8");
return viewResolver;
}
}
Adding the layoutdialect to the templateengine should be enough to get it working. Don't use
setDialect. You should have anaddDialectorsetAdditionalDialectsmethod or something like that. (I use the xml config so i don't know the exact names)UPDATE: added xml config