30.07.2009
16:38

Fluid Template Engine (Teil1: Grundlagen)

Wie ist Fluid aufgebaut?

Natürlich besteht ein Fluid-Template zunächst einmal aus HTML, in das man per Marker Inhalte einfügen kann. Das unterscheidet sich zunächst kaum vom alten Templating-System für TYPO3 Plugins.

Klassisches Templating System
<div class="username">###USERNAME###</div>
Fluid Syntax
<div class="username">{username}</div>

Fluid bringt grundsätzlich zwei neue große Features mit sich:

  • Neben einfachen Datentypen können Objekte und Arrays übergeben werden und im Template kann dann auf die einzelnen Werte bzw. Eigenschaften zugegriffen werden.
  • Kontrollstruktur und Ausgabelogik (diese Elemente werden in Fluid ViewHelper genannt)

Umgang mit Objekten und Arrays

Egal ob ein Objekt oder ein Array an das Template übergeben wird kann folgendermaßen auf die Eigenschaften bzw. Werte zugegriffen werden:

Zugriff auf Objekteigenschaften / Array-Werte in Fluid
<div class="username">{user.firstname} {user.lastname}</div>

ViewHelper - bringen Logik ins Template

Mit ViewHelper lassen sich Kontrollstrukturen (z.B. if/then/else) oder Bestimmte Formatierungen erreichen. Das Besondere an Fluid gegenüber anderen Template Engines mit Kontrollstrukturen ist, dass die ViewHelper komplett von der eigentlichen Engine getrennt sind. So lassen sich auch einfach eigene ViewHelper schreiben. Wie das genau funktioniert werde ich im zweiten Teil dieser Einführung beschreiben.

ViewHelper sind immer XML-Tags, die von einem bestimmten XML-Namespace gebrauch machen. Die bei Fluid mitgelieferten ViewHelper benutzen den Namespace f.

Um es nicht zu theoretisch werden zu lassen an dieser Stelle ein Beispiel:

Beispiel: IfViewHelper
<div class="username">Hallo {user.name}</div>
<f:if condition="{user.mayConfig}">
  <p>Sie dürfen Einstellungen verändern.</p>
</f:if>

In diesem fiktiven Beispiel wird dem Benutzer ein zusätzlicher Text angezeigt, wenn der Wert von {user.mayConfig} TRUE entspricht.

Hier ein weiteres Beispiel, diesmal der ImageViewHelper zum Anzeigen von Bildern:

Beispiel: ImageViewHelper
<div class="user">
  <div class="imagewrap">
    <f:image src="{user.image}" alt="Benutzerbild von {user.name}" width="120" />
  </div>
</div>

Wie man es vom Image Rendering von TYPO3 gewöhnt ist wird hier intern die Skalierung des Bildes geregelt.

Anmerkung: An den alt-Parameter darf derzeit kein string mit double quotes (") übergeben werden, da sonst eine Exception auftritt.

Im Ordner Classes/ViewHelpers/ von Fluid findest du alle ViewHelper die Fluid beiliegen. Weitere Beispiele zur Verwendung findest zu z.B. in der Extension blog_example.

Ich hoffe ich konnte dem einen oder anderen helfen Fluid zu verstehen - bald gibt es hier den zweiten Teil mit einer Anleitung eigene ViewHelper zu schreiben.

Anmerkung

Dieser Artikel bezieht sich auf Fluid V4 (also für TYPO3 >= 4.3) in der aktuellen trunk-Version. Spätere Versionen von Fluid V4 oder Fluid V5 (für FLOW3) können in Details abweichen.

0 Kommentar(e)

Mein Kommentar

Ich möchte über jeden weiteren Kommentar in diesem Post benachrichtigt werden.

Zurück