SilverStripe Templates Tutorial
In diesem Blog möchte ich das Template-Engine von SilverStripe, anhand eines Beispiels, erklären. Ich würde gerne zeigen, wie das Template-Engine funktioniert. Hierfür werde ich nur
die wichtigsten Methoden erklären, die ein Entwickler für die Programmierung eines Projekts mit SilverStripe braucht. Die Logik von Silverstripe Template-Engine ist es das HTML-Gerüst
eines Projekts zu bauen und auf die vom PHP-Controller zurückgegebene Variable zuzugreifen und dann diese in HTML-Code einzubauen.
Übersicht der Methoden, die ich in diesem Tutorial erläutern möchte:
- Template-Verzeichnisstruktur
- Variablen
- Files mit „include“ einbinden
- Operators
- „if“ Verzweigung
- loop schleife
- width
- Datumformatierung
1. Template-Verzeichnisstruktur
Die Template-Files eines SilverStripe Projekts liegen im Verzeichnis „themes/mytheme/“
Das Theme-Verzeichnis hat folgende Struktur:
- css: css-files Verzeichnis
- images: css-files Verzeichnis
- javascript: javascript-files Verzeichnis
- templates: dieses Verzeichnis enthält die Templates-Dateien und hat folgende Struktur:
- templates/Layout: in diesem Verzeichnis befinden sich alle Controllers index- und actions-Templates
- templates/Includes: alle globalen Templates(Header, Footer, Navigations, SideBar etc.) können hier abgelagert werden
- templates/email: alle Email-Versand-Vorlagen können in diesem Verzeichnis abgelagert werden.
- templates/forms: alle Forms-Templates können in diesem Verzeichnis abgelagert werden.
- templates/Page.ss: in der Datei Pages.ss (themes/mytheme/templates/Page.ss) wird das HTML-Grundgerüst für das gesamte Projekt aufgebaut. Hier werden die HTML-Grundelemente, css , javascripts und include-files aufgerufen.
Eine einfache Pages.ss Datei sieht wie folgt aus:
<html>
<head>
<% base_tag %>
<title>$Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- CSS Files -->
<% require themedCSS('style') %>
</head>;
<body>
<div class="wrapper">
<!-- bindet die Template includes/Header.ss ein -->
<% include Header %>
<div class="main">
<!-- Je nach Controller wird hier die Controller-Template eingebunden. -->
$Layout
</div>
<!-- bindet die Template includes/Footer.ss ein -->
<% include Footer %>
<!-- JavaScript Files -->
<script type="text/javascript" src="{$ThemeDir}/javascript/script.js"> </script>
</div>
</body>
2. Variable
Die Variablen, wie zum Beispiel die $Title werden in einer Template mit $ am Anfang und
folgend mit dem Variablennamen geschrieben.
Hier ein kurzes Beispiel, wie eine Variable in einem Controller definiert und in einer Template
ausgegeben wird:
Variable in einem Controller definieren:
class Page_Controller extends ContentController {
public MyVar = null;
public Member = null;
public function init() {
parent::init();
$this->MyVar = 'hello';
$this->Member = Member::get()->First();
}
}
Variable in der Template anzeigen:
<h1>$MyVar</h1> <p>$Member.ID <br/> $Member.FirstName<br/> $Memberr.Surname<br/> $Member.Email</p>
3. Include
Mit Include lassen sich bestimmte oder globale Templates einbinden. Die Voraussetzung ist, dass
sich die Include-Templates im includes-Verzeichnis befinden.Die richtige Syntax für Include ist <% include Templatename %>. SilverStripe bindet
automatisch die include-Template ein.
4. Operators
SilverStripe Templates-Engine kennt folgende Operatoren:
== , =, != , || und &&
Im nächsten Teil („ if“-Verzweigung ) dieses Blogs, werde ich die praktischen Beispiele aus
beiden Teilen, Operators und „if“-Verzweigung, zeigen.
5. „if“-Verzweigung
Die Logik einer “if“-Verzweigung in der Template-Engine liegt, wie bei der herkömmlichen“if „Logik in einem php-code. Der Unterschied zwischen der „if“ Logik in einem php-code und der
„if“ in der SilverStripe Template-Engine ist eine andere Syntax.
Praktische Beispiele für „if“-Verzweigung und Operators:
== <% if $Member.ID == 1 %> <h1>Member ID is 1 </h1> <% else %> <h1>Member with ID is not 1 </h1> <% end_if %> && <% if $Member.FirstName && $Member.Surname %> Hello $Member.FirstName $Member.Surname <% end_if %> || <% if $MyVar == 'silverstripe' || $MyVar='wordpress' %> <h1>$MyVar is silverstripe or wordpress </h1> <% else %> <h1>$MyVar is not silverstripe and note wordpres </h1> <% end_if %> != <% if $MyVar != 'silverstripe' %> <h1>$MyVar is not silverstripe </h1> <% end_if %>
if not <% if not $MyVar %> <h1>$MyVar is undefined </h1> <% end_if %> else_if <% if $Member.ID == 0 %> <h1>$MyVar is 0</h1> <% else_if $Member.ID == 1%> <h1>$MyVar is 1 </h1> <% else_if $Member.ID == 2%> <h1>$MyVar is 2</h1> <% else_if $Member.ID == 3%> <h1>$MyVar is 3</h1> <% else %> <h1>$MyVar is greater than 3</h1> <% end_if %>
6. Loop Schleife
Im SilverStripe Template-Engine kann man Array Variablen in einer loop-Schleife laufen lassen
<% loop MyMenu %> <h1>$Title</h1> <% end_loop %> Datensätze mit „Sort“ sortieren <% loop MyMenu.Sort(Title) %> <h1>$Title</h1> <% end_loop %> Datensätze mit „Limit“ limitieren <% loop MyMenu.limit(3) %> <h1>$Title</h1> <% end_loop %> Datensätze mit „Reverse“ rückwärts auflisten <% loop MyMenu.Reverse %> <h1>$Title</h1> <% end_loop %>
Loop Indikatoren
In einer Loop- Schleife kann man auf folgende Indikatoren zugreifen:
- $Pos liefert die aktuelle Position zurück
- $Even zeigt, ob die aktuelle Position gerade ist.
- $Odd zeigt, ob die aktuelle Position ungerade ist.
- $EvenOdd je nach Position liefert $EvenOdd Even oder Odd als String zurück
- $First, $Last, $Middle: gibt an, ob die sich die aktuelle Position auf der ersten, mittleren oder der letzteren Position befindet.
- $FirstLast: je nach Position liefert $ FirstLast First oder Last als String zurück
- $TotalItems: liefert die Anzahl der gefundenen Datensätze in einem Array zurück
7. With
Mit With können wir auf ein einzelnes Indexes einer Array-Variable zugreifen.
<% with $Member %> <h1>$FirstName $Surname</h1> <% end_with%>
8. Datumformatierung:
Eine der empfehlenswerten Methoden in SilverStripe Template-Engine ist die Datumformatierung. Hier lässt sich ein Datum anhand eines Datumformats formatieren. Die Variable $Now ist als globale Variable definiert und gibt das aktuelle Datum an.
- $Now // Das aktuelle Datum
- $Now.Year // Das aktuelle Jahr
- $Now.Month // Der aktuelle Monat
- $Now.Day // Der aktuelle Tag
- $Now.Nice // Je nach Variable i18n::set_locale('en_US'); in _config.php, wird das Datum formatiert.
- $Now.Format('m.d.Y') // gibt z.B 01.01.2014 zurück. Mit der Option „Format“ kann man das
