Thymeleaf-ViewPattern
Study these flashcardsFree · spaced repetition · iPhone, Android, Mac & web
All cards
1
Welche View Patterns gibt es?
1) Template View Pattern
2) Composite View Pattern
2) Composite View Pattern
2
Thymeleaf
Templating Engine, die vollständig in Spring implementiert ist
3
Natural templating
Templates sehen aus wie html, enthalten Dummy Inhalte
4
\$ {...}
Variable expression z.B.
<form th:object="\${objekt, welches im Formular mitgegeben wird }"
<form th:object="\${objekt, welches im Formular mitgegeben wird }"
5
*{...}
Selection expression
in parent objekt definieren mit th:object, danach in children einzelne Teile des Objekts ausgeben. zB.
in parent objekt definieren mit th:object, danach in children einzelne Teile des Objekts ausgeben. zB.
6
#{...}
Message (i18n) expressions
7
@{...}
Link/Url Expressions
8
~{...}
Fragment expressions
9
Iteration
10
th:fragment
erstellt wiederverwendbares Fragment, zB header, Footer, content etc
11
th:replace
Wird mit einem Fragment ersetzt
<p th:replace="\${key}">
<p th:replace="\${key}">
12
Template View Pattern
Platzhalter werden zur Laufzeit durch Helper Functions durch Inhalte ersetzt (einzelne Views mit Thymeleaf)
13
Composite View Pattern
Layouting, Eine View enthält weitere Subviews. So können zB Header/Footer umgesetzt werden
14
Namespace in Thymeleaf definieren
<html xmlns:th="http://www.thymeleaf.org">
15
Redirect in handler Methode
return "redirect:url"
16
Include Style Layout, was ist das plus vor-&nachteile
- Jede View schliesst Subview mit ein
- einfach
- ungeeignet für grosse Apps
- einfach
- ungeeignet für grosse Apps
17
Hierarchical Style Layout
Modulare Design mit Layout/Decorator und Fragmenten
komplex, aber sehr sauber
komplex, aber sehr sauber
18
Layout erstellen
<html th:fragment="maincontent(content)" >
<head>
<body>
<div th:replace="~{header :: header}">Fake Header</div>
<div th:replace="\${content}">Fake content</div>
<head>
<body>
<div th:replace="~{header :: header}">Fake Header</div>
<div th:replace="\${content}">Fake content</div>
19
Content erstellen
20
Layout Fragment erstellen
<div th:fragment="header" class="header">
<div class="jumbotron">
<h1>Flashcard Client with SpringMVC</h1>
</div>
</div>
<div class="jumbotron">
<h1>Flashcard Client with SpringMVC</h1>
</div>
</div>
21
Content View erstellen
th:replace="~{layout :: maincontent(~{::section})}" in <html>
damit wird dann die Section mit th:fragment="content" als content eingesetzt
damit wird dann die Section mit th:fragment="content" als content eingesetzt