Fluid Template Basics

Fluid ist die von TYPO3 entwickelte Template Engine und die Anfänge gehen bereits auf die TYPO3 Version 4.3 zurück.

Nach dem allgemeinem MVC Konzept (model - view - controller) beinhaltet das Fluid Template den Html Code. Entgegen früherer pi Extensions in denen der html Code zum Teil in die php Klasse geschrieben wurde, erfolgt jetzt eine strikte Trennung. Das macht Extensions deutlich übersichtlicher und vor allem wartbarer.


Fluid Templates begegnen uns an verschiedenen Stellen:

- zur Ausgabe von Controller Funktionen
- als Seitentemplate im pageObject
- als standalone View zum Beispiel für e-mail Templates.


Die Funktionalität von Fluid is unabhängig des Einsatzbereiches immer die gleiche.
Die Daten werden an das Template übergeben und sind dort in {geschweiften Klammern} abrufbar.

Innerhalb eines Fluid Templates können wiederkehrende Bereiche in Layouts und Partials ausgelagert werden und Daten mit sogenannten viewHelpern manipuliert werden. ViewHelper sind nichts anderes als php Funktionen, die aus dem Template Daten beziehen, verarbeiten und wieder zurück geben.


Template - Layouts - Partials

Es wird immer zunächst das Template angesprochen. Dieses enthält dann optional Verweise auf ein übergeordnetes Layout und/oder inkuldiert verschiedene Partials.

Innerhalb einer Extbase Extension wird das Template von TYPO3 an folgender Stelle erwartet:

--my_extension_folder
---- Resources
------ Private
-------- Templates
---------- MyCotrollerFolder
------------ MyTemplate.html

-------- Partials
---------- Partial 1.html

-------- Layouts
---------- Layout1.html

Dazu müssen folgende Schreibweisen beachtet werden:

  • Templates, Partials und Layouts beginnen immer mit einem Großbuchstaben
  • Für jeden Controller wird im Templates Verzeichnis ein Ordner mit dem Controllernamen (ohne "Controller") benötigt.
  • Der Templatename entspricht der Action (ohne "Action").

Die Verzeichniseinstellungen können bei Bedarf über das Setup konfiguriert werden.

Im einfachen Fluid Template könnt ihr direkt mit html Code beginnen. Da muss werder ein Header, Namespaces noch sonst was rein.

Layouts

Wenn wir die zum Beispiel die Ausgabe unserer Extension standardmäßig mit einer Klasse wrappen wollen, bietet sich ein Layout an, das diese Klasse enthält.

Im Fluid Template wird das Layout mit folgenden Zeilen aufgerufen:

<f:layout name="Default" />
<f:section name="Main">
    <!-- Template code inside f:section-->
</f:section>

Das passende Layout dazu: Resources/Private/Layouts/Default.html

<div class="myext">
    <f:render section="Main" />
</div>

Innerhalb des Layouts stehen alle Variabeln die auch im Template enthalten sind zur Verfügung.

Partials

Wiederkehrende Codeblöcke können mit folgender Syntax in Partials ausgelagert werden:

<f:render partial="MyPartial.html" arguments="{_all}" />

<f:render partial="MyPartial2.html" arguments="{name: objects, name2: objects2}" />

Mit arguments={_all} werden alle Variablen an das Partial übergeben. In der zweiten Version werden nur bestimmte Objekte übergeben. Diese sind dann im Partial über {name} und {name2} erreichbar.


ViewHelpers

ViewHelper sind kleine php Klassen an die Werte aus dem Template übergeben werden können. Innerhalb des viewHelpers kann optional die komplette Konfiguration geladen, die Daten manipuliert, und das Ergebnis an das Template zurückgegeben werden.

Ein einfaches Beispiel:
Nehemen wir an wir haben zwei Zahlen im Html Code die wir addieren wollen. Mit reinem HTML Code kommen wir da nicht weiter. Wir schicken beide Zahlen an den viewHelper, dieser macht die Addition und sendet das Ergbenis an das Template zurück.

In Fluid gibt es eine Vielzahl an vorgefertigten viewHelpern, eine Übersicht findet ihr hier: standard ViewHelper. Diese können direkt in Fluid Templates verwendet werden.

Zusätzlich ist es aber auch relativ simple eigene viewHelper zu schreiben. Ein Artikel dazu findet ihr hier: viewHelper selbst erstellen.

Meiner Ansicht nach sollten view Helper immer das sein was sie ursprünglich sind, nämlich helper Funktionen. Echte business Logik hat da für mich nichts drin zu suchen und sollte im Controller stehen.


Datenherkunft

Im Extension Context ist die normale Datenherkunft über den Controller.
Nehmen wir wieder ein einfaches Beispiel:

$test['banane'] = 'krumm';
$test['orange] = 'rund';

$this->view->assign('obst', $test);

Damit könnenwir im Template über {obst.banane} bzw. {obst.orange} auf unsere Werte zugreifen.

Zusätzlich stehen aber auch alle settings der Extension im Fluid Template zur Verfügung.
Diese werden direkt ausgegeben über:

{settings.myvalue}

Die Settings könnt ihr an verschiedenen Stellen setzten, im EXT Template, im Seitentemplate, selbst im Controller.

Spezialfall:
Wenn das Plugin Bestandteil eures Seitensetups ist, könnt ihr auch auf die Variablen zugreifen die ihr im page.FLUIDTEMPLATE unter variables definiert habt.

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

Schrödinger lernt HTML5, CSS3 ...

Die Buchfigur Schrödinger lernt hier auf sehr unterhaltsameweise html, CSS und Javascript. Da er dabei nahezu bei null beginnt, holt er auch Einsteiger punktgenau ab. Selbst "Alte Hasen",  für die html 5 und CSS3 zum Tagesgeschäft gehören, werden das ein oder andere Neue erfahren oder einfach nur perfekt von der Story unterhaten. Fazit: überaus lesenswert.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.