- 19/01/2015
- 0
In der Programmierung gibt es verschiedene Regeln, an die sich ein Programmierer halten sollte. Eine der wichtigsten Regeln ist „Don`t repeat yourself“.
Benutzt man Programmiersprachen wie Java oder JavaScript wird man sich diese Regel sehr schnell zu Herzen nehmen und befolgen. Man schreibt Methoden und ruft diese anschließend an verschiedenen Stellen im Programm auf. Dadurch wird zum einen der Code sehr viel schlanker und lesbarer und zum anderen kann man ihn besser warten und ergänzen.
Verwendet man in einem Projekt das Content-Management-Framework TYPO3 und die Template-Engine Fluid, ermöglicht es dem Programmierer den Grundsatz von „ Don`t repeat yourself“ durch sogenannte Partials zu realisieren.
Ein Partial ist ein wiederkehrender Teil im Quellcode, welchen man nur einmal definiert und anschließend an vielen Stellen einbinden kann. Hin und wieder kommt es vor, dass ein bestimmter Abschnitt im Template mehr als einmal auftaucht. Taucht dieser Abschnitt zudem noch unverändert auf, ist es möglich diesen in ein Partial auszulagern und dann an den entsprechenden Stellen im Template wieder aufzurufen.
Um ein Partial zu nutzen muss dieses zunächst an der entsprechenden Stelle im Projekt erzeugt werden. Dabei ist zu beachten, dass diese immer in einem fest vorgegebenen Verzeichnis liegen müssen.
Verwendet man ein Partial innerhalb einer Extension werden die Dateien unter „typo3conf/ext/[ExtensionKey]/Resources/Private/Partials/“ abgelegt. Nun wird an dieser Stelle eine HTML-Datei erstellt und mit einem entsprechenden Namen versehen. Als nächstes wird in dieser Datei das entsprechende HTML-Snippet definiert.
Partial.html
<div class=’partialDiv‘><p>Ich bin der Inhalt des Partials!</p></div>
Das Partial besteht in diesem Beispiel aus einem Div mit einem Absatz. Um dieses Snippet nun im HTML-Code aufzurufen, wird eine Render-Funktion an der entsprechenden Stelle eingefügt. In dieser Render-Funktion können unterschiedliche Parameter verwendet werden.
Einer der wichtigsten Parameter ist dabei partial. Mittels diesem Parameter wird die entsprechende Datei, dessen Inhalt eingefügt werden soll, aufgerufen. Dabei wird lediglich der Dateiname ohne die Endung .html angegeben. Somit wird das komplette Partial in den HTML-Code intrigiert.
Template.html
<f:render partial=’partial‘ />
Bei einer großen Anzahl an Snippets ist es theoretisch möglich, jedes einzelne in ein eigenes Partial auszulagern. Doch gerade bei vielen kleinen Code-Stücken würde die Anzahl der einzelnen Dateien rapide ansteigen. Der damit verbundene Aufwand steht in keinem Verhältnis zum Nutzen. Es besteht aber die Möglichkeit mittels einer Section die unterschiedlichen Code-Abschnitte in einem Partial unterzubringen. Dazu wird um den entsprechenden Code-Teil ein Section-Tag angelegt.
Partial.html
<f:section name=’begruessung‘>
<div class=’partialDiv‘>
<p> Hallo! </p>
</div>
</f:section>
<f:section name=’beschreibung‘ >
<div class=’partialDiv‘>
<p>Ich bin der Inhalt des Partials!</p>
</div>
</f:section>
So werden in dem Partial zwei Snippets definiert, welche durch Sections voneinander getrennt werden. Nun da das Partial mehrere Sections besitzt, wird in der Render-Funktion das Argument section verwendet. In diesem Parameter wird der Name der gewünschten Section angegeben.
Template.html
<f:render partial=’partial‘ section=’beschreibung‘ />
Innerhalb dieses Render-Aufrufes wird nun aus dem Partial die zweite Sektion angesprochen und in das Template integriert. Somit ist man nicht gezwungen für jeden einzelnen Code-Abschnitt eine neue Datei anzulegen, sondern hat die Gelegenheit die einzelnen Partials nach Funktionalität zu sortieren.
Eventuell kann es vorkommen, dass in den unterschiedlichen Templates zwar das entsprechende Snippet verwendet werden, aber inhaltlich leicht von der ursprünglichen Version abweichen soll.
Nehmen wir zum Beispiel unsere Begrüßung-Sektion. Darin wird lediglich ein Absatz mit dem Wort Hallo ausgegeben. In manchen Fällen kann es aber vorkommen, dass auf einer bestimmten Seite mehr als nur Hallo angezeigt werden soll. Statt eine weitere Section zu erstellen, können wir der Begrüßung-Section einfach einen Wert übergeben.
Um einen Wert an ein Partial oder eine Section zu übergeben, wird in der Render-Funktion der Parameter arguments verwendet. Wie der Name schon sagt, ist es möglich mehrere Variablen an das Partial zu übergeben und diese dort zu nutzen. Hierfür werden die einzelnen Variablen nacheinander in einem Array geschrieben. In diesem Fall wird zuerst der Variablenname angegeben und im Anschluss der entsprechende Wert.
<f:render partial=’partial‘ section=’begruessung‘ arguments=“{name: ‚du da‘}“ />
Die übergebene Variable muss in dem entsprechenden Partial nicht extra definiert, sondern kann direkt verwendet werden. Um eine bestimmte Variable zu verwenden wird an der gewünschten Stelle im Partial der {Variablenname} geschrieben.
Partial.html
<f:section name=’begruessung‘>
<div class=’partialDiv‘>
<p> Hallo {name} ! </p>
</div>
</f:section>
Beim späteren Rendern überprüft die Funktion dann, ob ein bestimmter Variablenname in dem Partial oder der Section verwendet wird und ersetzt diesen anschließend durch den angegeben Wert. Dadurch wir der Inhalt des Absatzes durch den Wert du da erweitert.
Sollte es bei der Verwendung von Argumenten im Partial dazu kommen, dass bereits vorhandene Variablen verwendet werden sollen, können diese ebenfalls in der Render-Funktion aufgerufen werden.
Template.html
<f:alias map='{rezept: {0: {zutat: ‚Eier‘, menge: ‚4‘} 2: {zutat: ‚Mehl‘, menge: ‚400g‘} 3: {zutat: ‚Milch‘, menge: ‚400ml‘}}}‘>
<f:for each='{rezept}‘ as=’zutaten‘>
<f:render partial=’Rezept‘ arguments='{zutaten: zutaten}’/>
</f:for>
</f:alias>
In diesen Fall besitzen wir bereits ein Array. Anschließend wird für jedes einzelne die Render-Funktion aufgerufen und das Array mit den Werten übergeben.
Rezept.html
<tr>
<td>{zutaten.menge}</td>
<td>{zutaten.zutat}</td>
</tr>
Weiterführende Links:
http://wiki.typo3.org/Fluid
http://t3n.de/magazin/seitentemplates-fluid-226788/
http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Render.html
http://www.marcoseiler.de/typo3/typo3-inhalte-ausgeben/fluidtemplate-typoscript.html
