4 - Verschachtelung
Auf unserem Streifzug durch das MVC sind wir beim 'View', der Anzeige angekommen. Wir kennen die Datei Page.ss. Sie beinhaltet das HTML und die Platzhalter um die Ausgabe des Page-Controllers anzuzeigen. Jetzt möchten wir aber nicht den gesamten HTML-Code für jeden weiteren Controller kopieren. Es reicht, wenn wir den HTML-Code für unsere SideBar zusätzlich bauen. Wird der Page-Typ SideBarPage verwendet, soll dieser zusätzliche Code mitverwendet werden beim Aufbau der HTML-Ausgabe.
Wir können also den HTML-Code in einer separaten Dateien ablegen. So den HTML-Code für die ganze Site (Template), und den HTML-Code für den Page-Controller (Layout) trennen. In der Abbildung unten, ist der HTML-Code auf zwei Dateien verteilt. Beim Aufruf wird der Code in einem Stück dem Browser übergeben. So können wir unsere Absicht ausführen, innerhalb unseres Templates, ein Layout für den normalen Page-Typ und ein Layout für den RigtBarPage-Typ unterschiedlich zu entwickeln, ohne dass wir eine Codezeile doppelt schreiben.
Der Ordner: Layout
Um den HTML-Code zu trennen, müssen wir erst die Ordner und Dateien vorbereiten und dann den entsprechenden Code-Block auschneiden und in die gewünschte Datei einfügen.
1. Erstelle im Ordner templates den Ordner Layout ...
2. darin die Dateien Page.ss und RightBarPage.ss
Die *.ss-Dateien sind ineinander verschachtelt. Es ist wichtig, dass die HTML-Tags in den einzelnen Dateien geschlossen sind. (Es ist unübersichtlich, wenn ein Div in Page.ss beginnt und in RightBarPage.ss endet.)
In der äusseren (Template)-Page.ss wird zudem der Platzhalter $Layout an die Stelle gesetzt, an der die innere (Layout)-Page.ss angezeigt werden soll. Der Controller RightBarPage.php wird die Datei (Template)-Page.ss auch benutzen, aber die (Layout)-RightBarPage.ss für den Contentbereich laden.
In der Abbildung oben, ist die Verschachtelung der Page-Typen ersichtlich (Rote Verbindungen).
Mit 'Include' verschachtelte Dateien (Grüne Verbindungen, siehe unten).
Der Ordner: Include
Es ist noch eine weitere Verschachtelung des Templates dargestellt. Mit <% include xxx %> kann eine Datei, die HTML-Code enthällt includiert werden. Wenn zum Beispiel ein Footer verwendet wird, der nicht mit allen Pagetypen angezeigt werden soll. So kann er nur dort includiert werden, wo es gewünscht ist. Die Absicht besteht darin, den Code nicht mehrfach zu verwenden, was die Übersicht und Wartung erschwert.
Oft werden neben Footer, auch Header, Breadcrump, Top-Navigation oder Side-Navigation in den Ordner 'Include' ausgelagert. Sie lassen sich so geziehlt und mehrfach verwenden.
Wie in der Abbildung oben, wird der HTML-Code für den Footer in einer separaten Datei angelegt. Aus der Datei (Template)-Page.ss wird er mit Include (Grün) aufgerufen.
3. Erstelle im Ordner templates den Ordner Includes ...
4. darin die Datei Footer.ss
Das Template für (Layout)-Page.ss
Der Code-Block der für die Anzeige des $Content zuständig ist kopieren wir in die Layout-Datei Page.ss (im Ordner Layout).
5. Öffne die Datei template/Page.ss
6. schneide den Code-Block innerhalb <div inhalt ... /div> aus
7. Ersetze die Leerstelle mit $Layout
8. Öffne die Datei template/Layout/Page.ss und kopiere den Code ein
9. Füge darüber zusätzlich den Platzhalter für den Seitentitel ein
10. Speichere und publiziere beide Dateien
Die Datei templates/Page.ss (grau = wird verschoben, rot = wird eingefügt)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>$Title</title>
<% base_tag %>
<% require themedCSS('typography') %>
<% require themedCSS('form') %>
<% require themedCSS('layout') %>
</head>
<body>
<header></header>
<nav>
<ul>
<% loop Menu(1) %>
<li><a href="$Link">$MenuTitle</a></li>
<% end_loop %>
</ul>
</nav>
<article>
<h1>$Title</h1>
$Content
$Form
$Layout
</article>
<footer>
<p>Adresse in der Fusszeile</p>
<a href="javascript:window.print()">
<img src="$ThemeDir/images/printer.png">
</a>
</footer>
</body>
</html>
Die Datei templates/Page.ss
<h1>$Title</h1>
$Content
$Form
Die Datei: templates/Layout/Page.ss
Das Template für (Layout)-RightBarPage.ss vorbereiten
Der Inhalt mit $Title, $Content und $Form soll auch in diesem Seitentyp angezeigt werden. Die rechte Spalte soll zusätzlich angezeigt werden.
11. Öffne die Datei RightBarPage.ss
12. Kopiere den Code aus templates/Layout/Page.ss nach RightBarPage.ss
13. Speichere und Publiziere RightBarPage.ss
<h1>$Title</h1>
$Content
$Form
Die Datei: templates/Layout/RightBarPage.ss
Noch werden unsere News nicht dargestellt. Wir werden nun die Anzeige der rechten Spalte für den Pagetyp RightBarPage ergänzen ...
Weiter mit der Anzeige von RightBarPage