Thymeleaf-ViewPattern
Réviser ces flashcardsGratuit · répétition espacée · iPhone, Android, Mac et web
Toutes les cartes
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
Plus de flashcards
AMNE 301 Medical and Scientific Roots Part 2Médecine et santé · AnglaisjenAstronomy Final Exam 2022Sciences · AnglaisEmmaLección 15: Salud y bienestarLangues · Anglais → EspagnolMatthewEnvironmental Science: Air and Air PollutionSciences · AnglaisAeriel2.1 - Self, Family, Pets, Personal RelationshipsLangues · Espagnol → AnglaisJonahTopic C3 science revisionSciences · AnglaisZachFrenchIGCSEPsych Quiz 2Psychologie et société · AnglaisAmberNeuro Exam IVMédecine et santé · AnglaisZZGas Exchange systemsMédecine et santé · AnglaisLoganRNA ProcessingSciences · CoréenDanteIons column 1Sciences · AnglaisEthanunit 3 - expansion to civil warAnglaisJacob
Révise ces decks dans l’app
Gratuit sur iPhone, Android, Mac et le web. Ajoute n’importe quel deck à ton compte en un tap.
