-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathstatic-imports.html
More file actions
114 lines (114 loc) · 7.02 KB
/
static-imports.html
File metadata and controls
114 lines (114 loc) · 7.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
---
title: Thymol Static Imports
description: Describes Thymeleaf static import problems and the way Thymol solves them.
---
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
{% include header-section.html level="" %}
<body>
{% include common-section.html %}
<div class="content">
<h2>static imports</h2>
<p>One way to work with include(d) content in Thymeleaf is to use the "iframe body" technique, this uses an html <code><iframe></code> element as the static content (body) of all document elements with th:include.</p>
<pre><code> <!-- iframe example -->
<p th:include="./frames/menu::menu" >
<iframe src="./frames/menu.html">Your browser does not support iframes</iframe>
</p>
</code></pre><p>A browser that supports the use of <code><iframe></code> elements should render this html snippet with the entire content of the iframe src file embedded within the <code><p></code> element.</p>
<p>To remove the <code>iframe</code> border and to prevent displaying scroll-bars you can use the following css style in the enclosing document:</p>
<pre><code> body iframe {
border-style: none;
margin: 0px;
overflow-y: visible;
}
</code></pre>
<p>The "iframe body" technique behaves in a way similar to the "complete template" th:include mechanism (see <a href="http://www.thymeleaf.org/doc/usingthymeleaf.html#including-template-fragments">Using Thymeleaf</a> section "8.1 Including template fragments").</p>
<p>With this in mind, you should define only a single th:fragment in the included template, otherwise the static iframe view and the online dynamic view are likely to be different.</p>
<p>It should be pointed out that this technique will not work with th:replace (substituteby) as there is no way to statically replace the containing element (the <code><p></code> element in the example above).</p>
<p>With these provisos, the iframe method can be a useful work-around. There is however another serious disadvantage in this approach:</p>
<p>When fragments are inserted using th:include or th:replace (substituteby) in an online page, the end user's browser sees this content in the context of the css styles in force where the fragments are embedded in the DOM. For the static view this won't happen automatically, the styles applied to iframe content are only those defined in the iframe html source file.</p>
<p>To illustrate the issue, consider this template:</p>
<pre><code> <!--footer.html-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy" style="color: green;">&#169; 2011 The Good Thymes Virtual Grocery</div>
</body>
</html>
</code></pre><p>We include this in an enclosing page:</p>
<pre><code> <!--iframe-usage.html-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>simple iframes example</title>
<style type="text/css">
.red-text {color:red;}
.big-text {font-size:xx-large;}
.underlined-text {text-decoration:underline;}
body iframe {border-style: none; margin: 0px; overflow-y: visible;}
</style>
</head>
<body>
<div class="red-text">
<div class="big-text">
<div class="underlined-text">
<div th:include="footer::copy">
<iframe src="footer.html">Your browser does not support iframes</iframe>
</div>
</div>
</div>
<div th:include="footer::copy">
<iframe src="footer.html">Your browser does not support iframes</iframe>
</div>
</div>
</body>
</html>
</code></pre><p>When the page is rendered we find that the nested styles that should be applied to the content of the inner <code><div></code> are not applied to the imported content.</p>
<p><img src="img/iframe-view.jpg" alt="iframe-view"></p>
<p>For a site with many pages, many included fragments and many styles the amount of work required to ensure a consistent view of static and dynamic templates soon becomes unfeasible.</p>
<p>Thymol was originally devised to solve this. Thymol allows you to use th:include and/or th:replace (substituteby) and maintain consistency between static and dynamic view with minimal effort.</p>
<p>Thymol uses JavaScript and jquery to identify, load and embed the fragments into the DOM in the static view, simulating the way Thymeleaf does this for you in the dynamic view.</p>
<h3>usage</h3>
<p>Simply download the Thymol distribution file <a href="download.html">here</a> and follow the instructions <a href="documents/configuration.html">here</a>.
<p>Insert the following (or something similar) in your html source:</p>
<pre><code> <!-- embed example -->
<script th:remove="all" type="text/javascript" src="<path-to-thymol>thymol.js"></script></code></pre>
<p>If you have bower installed (see <a href="http://bower.io/#install-bower">here</a>), setting up Thymol is even easier, simply execute:
<pre><code> bower install thymol
</code></pre><p>in your project root directory and use the following script import line in your templates:
<pre><code> <!-- bower example -->
<script th:remove="all" type="text/javascript" src="bower_components/thymol/dist/thymol.js"></script></code></pre>
<h3>example</h3>
<p>Here is the footer example, re-worked slightly to use Thymol:</p>
<pre><code> <!--thymol-usage.html-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>thymol styles example</title>
<style type="text/css">
.red-text {color:red;}
.big-text {font-size:xx-large;}
.underlined-text {text-decoration:underline;}
</style>
</head>
<script th:remove="all" type="text/javascript" src="bower_components/thymol/dist/thymol.js"></script>
<body>
<div class="red-text">
<div class="big-text">
<div class="underlined-text">
<div th:include="footer::copy">
cannot load template: footer, fragment: copy
</div>
</div>
</div>
<div th:include="footer::copy">
cannot load template: footer, fragment: copy
</div>
</div>
</body>
</html>
</code></pre><p>When the Thymol enhanced page is rendered we find that the nested styles are applied to the imported content as intended!</p>
<p><img src="img/thymol-view.jpg" alt="thymol-view"></p>
</div>
</body>
</html>