is it possible extend a shared view with thymeleaf?
I saw that is possible use framents but is not what I want.
Instead I want something similar to .NET MVC, with something like #RenderBody() and another view that extend the shared view by including the shared view.
You can use the Thymeleaf Layout Dialect to extend a view.
Layout page
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
<body layout:fragment="body">
...
</body>
</html>
Content page
In your content page, you refer to the layout (decorator) page using the layout:decorator attribute.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout.html">
...
<body layout:fragment="body">
<p>Actual page content</p>
</body>
</html>
It is possible to have multiple fragments in one page.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
<body>
<div layout:fragment="content"></div>
<footer layout:fragment="footer"></footer>
</body>
</html>
Related
I would like to have dynamic value in my html file which gets Convertet to a PDF file. I've got no idea how to do that.
HTML
<!doctype html>
<html lang="en">
<head>
<title>SpringHow html to pdf</title>
</head>
<body>
<div>
<h2> --> DYNAMIC VALUE HERE <-- </h2>
</div>
</body>
</html>
JAVA
HtmlConverter.convertToPdf(new File("template.html"),new File("report.pdf"));
I am trying to use an HTML template as given below and set 2 values to it dynamically.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>
</head>
<body>
<div class="page-content">
<h1 th:text="|Hello ${siteCode}!|"></h1>
</div>
</body>
</html>
I used the below code to set the values.
Model model = new ExtendedModelMap();
model.addAttribute("title", site.getName());
model.addAttribute("siteCode", site.getCode());
I want to get the new html file with the values added in the template variable so that I can store the file to s3. Please help.. Thanks in advance.
I'm trying to understand how use Thymeleaf, I have a structure like this:
I have a default.html that work like the most general page, I put there some inclusion like general css, bootstrap and so on.. The I replace using th:replace the footer and a navbar. I use this page as base line for all the other pages.
My problem is: how can I use this page for all the other pages?
For example if I have 2 pages, page A and B and both of them need bootstrap, the app's css and so on, I don't want write the code to include them twice, but only once. So to do that I think I have to put page A inside default.html if I want show A and B in the other case.
At least, I done in this way using JSP.
How can I do it? Is it possible using Thymeleaf?
I tried to do somenthig like that but id doesn't work
DEFAULT.HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title th:text="#{application_name}"></title>
<link rel="icon" type="image/x-icon" th:href="#{/static/favicon.ico}"/>
<script th:src="#{/webjars/jquery/jquery.min.js}"></script>
<script th:src="#{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="#{/webjars/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="#{/css/mio.css}"/>
<link rel="stylesheet" th:href="#{/webjars/font-awesome/css/font-awesome.min.css}"/>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<div class="container">
<div layout:fragment="content">
<p>Your page content goes here</p>
</div>
</div>
<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>
It is totally possible!
We have some steps to do it with Thymeleaf:
Configurations:
1 - Include the thymeleaf layout dialect into your project:
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.1.2</version>
</dependency>
2 - I do not know how is your webConfig, but with Spring, we have to add this configuration to template engine:
#Bean
public TemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setEnableSpringELCompiler(true);
//your templateResolver
engine.setTemplateResolver(templateResolver());
//here it is!
engine.addDialect(new LayoutDialect());
return engine;
}
The default html:
<!DOCTYPE html>
<html lang="pt-BR"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
<!-- Necessary to thymeleaf layout dialect-->
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<link rel="stylesheet" type="text/css" th:href="#{/layout/stylesheets/vendors/bootstrap.css}" />
</head>
<body>
<header>your Heder here</header>
<!--Here what you want, it gonna find the other html that contains "maincode"-->
<section layout:fragment="maincode"></section>
<footer>yourFooter</footer>
<script th:src="#{/javascript/vendors/jquery-2.2.4.min.js}"></script>
<script th:src="#{/layout/javascripts/bootstrap.min.js}"></script>
<th:block layout:fragment="javascript-extra"></th:block>
</body>
</html>
The other html:
<!DOCTYPE html>
<html lang="pt" xmlns="http://w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
<!--Tell who is the default html-->
layout:decorate="layout/defaultHtml">
<body>
<section layout:fragment="maincode">
bla bla bla
</section>
</body>
</html>
Any question, just ask!
Creating an MVC 3 Razor project. have a very involved UI design. I wanted to put #renderbody() into a partial view source by _layout. The compiler won't let me. Is there a way to do this?
Instead of partial view you can go for master/sub layouts.
MasterLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
#RenderBody()
</body>
</html>
Layout.cshtml
#{
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
// html code above render body
#RenderBody()
// html code below render body
Your sublayout(Layout.cshtml) contains the code that should be in the partial view.
I am currently learning CodeIgniter and using it for a small project. I would like to make a template so that I don't need to write repeated code for the views. I like jruzafa's answer in this post: How to Deal With Codeigniter Templates?
In controller:
//Charge the view inside array
$data['body'] = $this->load->view('pages/contact', '', true);
//charge the view "contact" in the other view template
$this->load->view('template', $data);
In view template.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Template codeigniter</title>
</head>
<body>
<div>
<?=$body?>
</div>
<div class="clear"></div>
<div>Footer</div>
</div>
</body>
</html>
$body is the view contact.
But now I face a problem. The form validation doesn't work if I pass the form_view as string to $data['body']. Is there any way to work around it?
Thanks.
Try loading the body content within the template itself. This should allow you to be more selective with your output:
In controller:
// Set the path to body content inside the $data array
$data['path_to_body'] = 'pages/contact';
$this->load->view('template', $data);
In view template.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Template codeigniter</title>
</head>
<body>
<div>
<? $this->load->view($path_to_body) ?>
</div>
<div class="clear"></div>
<div>Footer</div>
</div>
</body>
</html>