Typo3 Extensions mit Extbase und Fluid – Fluid View Helper

 in Blog, Typo3

Nachdem wir bereits einige View Helper für das Templating im Einsatz gesehen haben, lernen wir nun die eigentliche Funktionsweise dieser Tags kennen. Ein View Helper ist eigentlich eine Funktion, die mittels des Tags aufgerufen wird, um Daten zu rendern. Die Basis Syntax von Fluid View Helpern ist in der XML-Tag Schreibweise beginnend mit f, gefolgt von einem Doppelpunkt und dem View Helper Namen. Dies kann je nach Definition durch weitere Parameter ergänzt werden.

Tag Notation:
<f:ViewHelperName Parameter> ... </f:ViewHelperName>
Single Tag Notation:
<f:ViewHelperName Parameter />

Neben dieser Tag Notation gibt es noch die Möglichkeit der Inline-Schreibweise, die je nach View Helper etwas variiert. Der View Helper wird innerhalb von geschweiften Klammern notiert ergänzt durch die Argumente in Klammern. Dies erinnert wesentlich mehr an eine allgemeine Funktions-Schreibweise. Wenn ein ViewHelper auf eine Variable angewendet wird, schreibt man die Variable gefolgt von -> und dem ViewHelper. Wichtig ist, dass man innerhalb der Inline-Notation nur singlequotes (einfache Anführungszeichen) verwendet.

Allgemeine Notation:
{f:ViewHelperName (paramter: 'parameterValue')}
{Variable-> f:ViewHelperName()}
Beispiel if View Helper:
{f:if(condition:'{cycle} == 0', then: 'left', else: 'right')}
Beispiel Anwendung auf eine Variable:
{content -> f:format.html()}

Das ‚f‘ steht für den Namespace der Fluid Viewhelper Klassen, die automatisch geladen werden. Diese sind im Typo3-System unter typo3/sysext/fluid/Classes/ViewHelpers/ zu finden. Es lohnt sich auf jeden Fall einen Blick in die Dateien.

Ich möchte hier nur einige View Helper vorstellen, um einen Überblick zu verschaffen. Eine dokumentierte Übersicht findet man in der Typo3 View Helper Dokumentation sowie auf der Seite fluidtypo3.org, auf der auch ergänzende View Helper Klassen vorgestellt und dokumentiert werden.

 

Ein kleiner Exkurs zum Debugging und zur data-Variable

Ein wichtiger View Helper für jede Entwicklung ist f:debug. Mit diesem können wir uns alle aktiven Variablen anzeigen lassen. In der Notation können wir entweder einen bestimmten Variablen-Inhalt oder mit ‚_all‘ den gesamten Daten Array ausgeben lassen.

<f:debug>{_all}</f:debug>
<f:debug>{VariablenName}</f:debug>

Wenn wir in unserem Basis-Seiten-Template einmal _all ausgeben, werden wir feststellen, dass es bereits einen Array namens ‚data‘ gibt, der alle Daten der aktuellen Page beinhaltet. Mit anderen Worten die Inhalte des Datensatzes der aktuellen uid aus der Tabelle pages. Somit stehen uns bereits viele Informationen für das Templating zur Verfügung.

 

View Helper im Einsatz

An dieser Stelle verschaffen wir uns mit Hilfe des data Arrays einen kurzen Überblick über einige Standard View Helper, die in der Praxis am meisten verwendet werden.

f:for ViewHelper
Den Inhalt des data Arrays können wir mithilfe einer foreach-Schleife direkt im Template ausgaben. Der ViewHelper hat den Namen f:for und funktioniert analog zur bekannten PHP Funktion.

<f:for each="{data}" as="value" key="key">
	{key}: {value} <br/>
</f:for>

Diesen View Helper setzt man für die Ausgabe von Arrays ein und bietet noch zusätzliche Parameter, wie die ‚iteration‘, die aktuelle Zahl der Durchläufe. Für diese Iteration gibt es weitere Parameter, die für die Text-Formatierung mit Hilfe des f:if ViewHelpers sehr hilfreich sind.

f:if ViewHelper
Der f:if View Helper ist ziemlich einfach zu verstehen. Es wird eine Condition definiert und wenn diese zutrifft wird der Inhalt ausgeführt. Ergänzend dazu kann man über f:then und f:else noch das Verhalten von true und false spezifizieren. In der Condition sind folgende Vergleichs-Opratoren erlaubt: ==, !=, <, <=, >, >= und %.

Einfache Überprüfung, ob eine Variable existiert oder nicht leer ist:
<f:if condition="{VariablenName}">
	<p>Die Variable existiert und hat einen Inhalt</p>
</f:if>

Eine Überprüfung, ob eine Variable einen bestimmten Inhalt hat:
<f:if condition="{VariablenName} == 'Hello World'">
	<p>Der Variablen Inhalt ist {VariablenName}</p>
</f:if>

Ein Beispiel für ein Layout-Selector anhand des Page-Layouts mit f:then und f:else:
<f:if condition="{data.layout} == '0'">
	<f:then>
		<div class="singleCol">
			{content}
		<div="singleCol">
	</f:then>
	<f:else>
		<div class="leftCol">
			{contentLeft}
		<div="singleCol">
		<div class="rightCol">
			{contentRight}
		<div="singleCol">
	</f:else>
</f:if>

f:for, iteration und f:if
Wie bereits angedeutet liefert f:for die Iteration mit. Die Iteration hat mehrere Stadien, auf die wir im Ablauf der foreach Schleife zugreifen können:

  • index – Der aktuelle Zeiger Index des Arrays (Zähler beginnend bei 0)
  • cycle – Die aktuelle Durchlaufs-Zahl der Schleife (Zähler beginnend bei 1)
  • total – Die Anzahl der Array-Elemente (wie PHP count())
  • isFirst – Abfrage: ist es der erste Schleifen Durchlauf?
  • isLast – Abfrage: ist es der letzte Schleifen Durchlauf?
  • isOdd – Abfrage: ist die aktuelle Schleifen Durchlaufs Anzahl eine ungerade Zahl?
  • isEven – Abfrage: ist die aktuelle Schleifen Durchlaufs Anzahl eine gerade Zahl?
Ein Beispiel der data Array Ausgabe unter Verwendung aller Iteration Stadien
<f:for each="{data}" as="value" key="key" iteration="iterator">
	<f:if condition="{iterator.isFirst}">
		<h1>Start der Array Ausgabe mit {iterator.total} Elementen</h1>
	</f:if>

	<f:if condition="{iterator.isEven}">
		<f:then>
			<div class="even">
		</f:then>
		<f:else>
			<div class="odd">
		</f:else>
	</f:if>
	{iterator.cycle}. Array Element: {key}: {value} mit dem Index {iterator.index}
	</div>

	<f:if condition="{iterator.isLast}">
		<h1>Ende</h1>
	</f:if>
</f:for>

f:format ViewHelper
Dieser View Helper bietet verschiedenste Formatierungs-Möglichkeiten für die Ausgabe von Variablen. Neben String Operationen, wie z.B. printf oder crop bietet er auch Zahlen-Formatierungen wie z.B. Währungen und Datums-Formatierungen. Hier werden nur einge kurze wichtige Beispiele aufgeführt, da dieser VeiwHelper sehr viele Funktionen beinhaltet. Die komplette Übersicht findet man in der Typo3-Dokumentation. Wichtige Anwendungen sind die html und raw Funktionen, da Fluid bei der Ausgabe die Inhalte z.B. mit htmlspecialchars parst. Um eine HTML Ausgabe von z.B. der Variable ‚content < styles.content.get‘ aus unserem FLUIDTEMPLATE zu erzwingen müssen wir dies über f:format.html erzeugen. Am Beispiel aus unserem data Array können wir das Feld ‚tstamp‘ mit f:format.date aus dem Unix Format in ein allgemeines Datumsformat rendern.

HTML Formatierung
<f:format.html><p>Hello World.</p></f:format.html>
<f:format.html>{content}</f:format.html>

Datums Formatierung
<f:format.date format="d.m.Y - H:i:s">@{data.tstamp}</f:format.date>

f:link ViewHelper
Als letztes in dieser Ausführung schauen wir uns noch den oft verwendeten f:link View Helper an, der 4 Funktionen bietet, die durch bestimmte Parameter gesteuert werden:

  • page – erzeugt einen Link auf die Seite mit der angegeben uid
  • external – erzeugt einen Link auf eine externe URL
  • mail – erzeugt ein mailto Link
  • action – erzeugt einen Link auf eine Controller Action (dieser wird erst in der Verwendung mit Extensions interressant)

Die Beispiele sind minimal gehalten und selbsterklärend. Die Übersicht aller Parameter und Möglichkeiten findet man in der Dokumentation. Daneben sind auch allgemeine HTML Eigenschaften wie id, class, etc. erlaubt.

Beispiel einer Seiten-Verlinkung
<f:link.page pageUid="1">Link zur Seite mit der uid 1</f:link.page>
mit HTML Eigenschaften
<f:link.page pageUid="1" id="pageLinkUid1" class="internal-link">Link zur Seite mit der uid 1</f:link.page>

Beispiel einer externen Verlinkung
<f:link.external uri="typo3.org">Hier gehts zu Typo3</f:link.external>

Beispiel einer Email Verlinkung
<f:link.email email="max.musterman@mustermann.com" />

 

Dies war der kleine Ausflug in die Welt der Fluid View Helper. Ich möchte nochmals zum Weiterlesen die Dokumentationen aller Fluid View Helper unter Typo3 View Helper Dokumentation und fluidtypo3.org empfehlen. Im Weiteren beschäftigen wir uns mit dem Erstellen eigener View Helper.