ViewHelper

Mit reinem HTML wird wiederkehrender Quellcode sehr schnell sehr unübersichtlich. Im Hinblick auf TYPO3, wo Seiten verschoben und umbenannt werden können, müssten Links und URLs im HTML Quelltext immer wieder erneut angepasst werden. Abhilfe schaffen hier besondere HTML-Tags, die von Fluid, dem Core und anderen Extensions mitgeliefert werden. Mit diesen sogenannten “ViewHelper” können direkt im HTML Quelltext Schleifen, Verlinkungen zu TYPO3 Seiten, Abfragen und das Ausliefern von per TypoScript generiertem Inhalt realisiert werden. Dank “Layouts”, “Partials” und “Templates” können die Fluid-Templates sehr gut strukturiert werden.

Im Folgenden eine Auflistung der zur Verfügung stehenden ViewHelper.

f:alias

TYPO3 4.3 typo3fluid/fluid 1.0.6

Mit diesem ViewHelper könnt ihr eigene Variablen innerhalb des öffnenden und schließenden Tags zur Verfügung stellen. Das ist sinnvoll, wenn ihr einen bestimmten Wert z.B. aus Objekten oder eine etwas längere ViewHelper Aneinanderreihung in eurem Template mehrfach wieder verwenden wollt.

Parameter

Beispiel: Einfacher Text

<f:alias map="{vorname: 'Stefan', nachname: 'Froemken'}">
    <p>Hallo zusammen,<br>mein Name ist {vorname} {nachname}</p>
</f:alias>

Beispiel: Verschachtelte Arrays

Dieses Beispiel ist vielleicht wenig sinnvoll, aber es zeigt sehr gut, wie man innerhalb von Fluid mehrdimensionale Arrays erstellen kann.

<f:alias map="{company: {name: 'Mueller und Co.', mitarbeiter: {0: {name: 'Stefan'}, 1: {name: 'Petra'}}}}">
    <p>Wir, die Firma {company.name}, haben folgende Mitarbeiter:</p>
    <ul>
        <f:for each="{company.mitarbeiter}" as="mitarbeiter">
            <li>{mitarbeiter.name}</li>
        </f:for>
    </ul>
</f:alias>

Beispiel: Nutzung von Objekteigenschaften

Dieses Beispiel funktioniert nur, wenn ihr das feUser Objekt in eurer Extension per $this->view->assign() verfügbar gemacht habt.

<f:alias map="{vorname: feUser.firstName, nachname: feUser.lastName}">
    <p>Hallo zusammen,<br />mein Name ist {vorname} {nachname}</p>
</f:alias>

f:base

TYPO3 4.3 TYPO3 11.3 TYPO3 12.0

Erstellt den base Tag. Mit diesem HTML Tag wird ein Pfad angegeben, der die Grundlage aller anderen Pfade wie Links und Bilder vorgibt. Diesen Basispfad holt sich der ViewHelper vorzugweise aus der Site-Konfiguration. In älteren TYPO3 Versionen wurden die TypoScript Eigenschaften config.baseURL und config.absRefPrefix dafür ausgelesen.

<f:base />

Die Ausgabe im Quelltext:

<base href="https://www.typo3lexikon.de/" />

f:case

TYPO3 6.2 typo3fluid/fluid 1.0.6

Parameter

Ein Beispiel findet ihr beim f:switch ViewHelper

f:cObject

Dieser ViewHelper nutzt den angegeben typoscriptObjectPath, um das dahinterliegende TypoScript auszuführen und das Resultat im Template auszugeben.

Parameter

Beispiel mit Array

Sofern mittels assign zur Verfügung gestellt, wird der aktuelle tt_content Datensatz als Array dem TypoScript unter lib.content zur weiteren Verarbeitung durchgereicht. Mittels field kann das TypoScript auf alle Eigenschaften des tt_content Datensatzes zugreifen. Über current kann das TypoScript auf die Überschrift des tt_content Datensatzen direkt zugreifen.

<f:cObject typoscriptObjectPath="lib.content" data="{ttContentRecord}" currentValueKey="header" />

Beispiel mit Text

Wenn statt Array oder Objekt nur Text übergeben wird, dann wird dieser Text automatisch dem TypoScript über current zur Verfügung gestellt.

<!-- Beliebig viel Text mit öffnendem und schließendem Tag -->
<f:cObject typoscriptObjectPath="lib.content">
Stefan heisst Euch willkommen
</f:cObject>

<!-- Ein Einzeiler an Text mittels data Attribut -->
<f:cObject typoscriptObjectPath="lib.content" data="Stefan heisst Euch willkommen" />

f:comment

TYPO3 4.6 typo3fluid/fluid 1.0.6

Während HTML Kommentare auch im Quellcode ausgegeben werden, können mit f:comment ganze Bereiche vom Quellcode ausgeschlossen werden. Diese kommen somit im HTML Quellcode nicht mehr vor und die enthaltenen ViewHelper werden auch nicht ausgeführt. Sehr nützlich im Rahmen von Debugging.

Beispiel

Alles zwischen den f:comment Tags wird nicht ausgegeben und enthaltene ViewHelper nicht verarbeitet.

<f:comment><!--
<p>Dieser Text wird nicht angezeigt</p>
<p>Mein Name ist: {vorname}</p>
ViewHelper wird nicht verarbeitet: <f:alias map="{}"></f:alias>
--></f:comment>

f:count

TYPO3 4.3 typo3fluid/fluid 1.0.6

Dieser ViewHelper zählt die Elemente im übergebenen Array oder die enthaltenen Objekte eines zählbaren Objektes wie \SplObjectStorage oder dem Extbase ObjectStorage.

Parameter

Beispiel mit subject

<f:alias map="{mitarbeiter: {0: 'Stefan',1: 'Petra',2: 'Sascha'}}">
    <p>Bei uns arbeiten <f:count subject="{mitarbeiter}" /> Mitarbeiter</p>
</f:alias>

Beispiel mit Inhalt

<f:alias map="{mitarbeiter: {0: 'Stefan', 1: 'Petra', 2: 'Sascha'}}">
    <p>Bei uns arbeiten <f:count>{mitarbeiter}</f:count> Mitarbeiter</p>
</f:alias>

Beispiel Inlinenotation

<f:alias map="{mitarbeiter: {0: 'Stefan',1: 'Petra',2: 'Sascha'}}">
    <p>Bei uns arbeiten {f:count(subject: mitarbeiter)} Mitarbeiter</p>
</f:alias>

Beispiel mit renderChildren

<f:alias map="{mitarbeiter: {0: 'Stefan',1: 'Petra',2: 'Sascha'}}">
    <p>Bei uns arbeiten {mitarbeiter -> f:count()} Mitarbeiter</p>
</f:alias>

f:cycle

TYPO3 4.3 typo3fluid/fluid 1.0.6

f:cycle wird im Rahmen von Schleifen wie f:for verwendet, um für jedes xte Element in der Schleife eine Sonderbehandlung durchführen zu können. Gerade odd und even Operationen, um abwechselnde Hintergrundfarben in Tabellen zu erzeugen sinnvoll.

Parameter

Beispiel

f:for durchläuft alle 5 Mitarbeiter. f:cycle spring mit jedem Durchlauf von f:for ein Element aus values weiter. Somit bekommt der erste Mitarbeiter einen grünen, der zweiter Mitarbeiter einen roten und der dritte Mitarbeiter einen blauen Hintergrund. Ab dem vierten Mitarbeiter geht es wieder mit einem grünen Hintergrund weiter.

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'}, 1: {vorname: 'Petra', stadt: 'Lindlar'}, 2: {vorname: 'Sascha', stadt: 'Remscheid'}, 3: {vorname: 'Patrick', stadt: 'Bonn'}, 4: {vorname: 'Sven', stadt: 'Gummersbach'}, 5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <table cellpadding="5" cellspacing="0" border="2">
        <f:for each="{mitarbeiter}" as="kollege">
            <f:cycle values="{0: 'green', 1: 'red', 2: 'blue'}" as="color">
                <tr>
                    <td style="color: {color}">{kollege.vorname}</td>
                    <td style="color: {color}">{kollege.stadt}</td>
                </tr>
            </f:cycle>
        </f:for>
    </table>
</f:alias>

f:debug

TYPO3 4.3 typo3fluid/fluid 1.0.6

Zeigt den Inhalt einer Variable oben am Rand des Browsers an. Verschachtelte Elemente können mittels dem + Icon weiter aufgeklappt werden.

Parameter

Beispiel

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'}, 1: {vorname: 'Petra', stadt: 'Lindlar'}, 2: {vorname: 'Sascha', stadt: 'Remscheid'}, 3: {vorname: 'Patrick', stadt: 'Bonn'}, 4: {vorname: 'Sven', stadt: 'Gummersbach'}, 5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <f:debug title="Mitarbeiter">{mitarbeiter}</f:debug>
</f:alias>

f:defaultCase

TYPO3 8.0.0 typo3fluid/fluid 1.0.6

Der Inhalt dieses ViewHelpers wird angezeigt, wenn kein value anderer f:case ViewHelper mit dem expression Parameter des f:switch ViewHelpers übereinstimmt.

Beispiele zu diesem ViewHelper findet ihr unter f:switch.

f:else

TYPO3 4.3 typo3fluid/fluid 1.0.6

Diesen ViewHelper erkläre ich im ViewHelper f:if, da er nur dort verwendet werden kann.

Parameter

f:escape

TYPO3 4.4 TYPO3 4.6 TYPO3 6.0

Dieser ViewHelper konnte Werte je nach Typ (html, entities oder url) escapen. Zur besseren Wartbarkeit wurde seine Funktionsweise in individuelle ViewHelper, zu finden im Unterordner format, aufgeteilt.

Diesen ViewHelper gibt es nicht mehr. Bitte verwendet einen der f:format.* ViewHelper.

f:flashMessages

Dieser ViewHelper macht nur im Bereich selbstprogrammierter Extensions Sinn. Denn nur hier können Fehler auftauchen, die dem Webseitenbesucher mitgeteilt werden müssen. Hat der User z.B. bei einem Loginformular seinen Usernamen vergessen anzugeben und die dafür zuständige Action-Methode wurde so programmiert, dass der Username eine Pflichtangabe ist, dann wird dies dem Validator gemeldet, der daraufhin eine errorAction-Methode aufruft, die dann wiederum Fehlermeldungen zuerst sammelt und dann als “Bündel” an der Stelle ausgibt, an der ihr diesen ViewHelper platziert habt.

Parameter

Beispiel: Resolver

Hier spring der FlashMessageRenderResolver ein und rendert im Frontend Kontext eine Liste auf Basis von div Tags.

<f:flashMessages />

Beispiel: Eigenes Rendering

<f:flashMessages as="flashMessages">
    <f:for each="{flashMessages}" as="flashMessage">
        {flashMessage.code}
        {flashMessage.message}
    </f:for>
</f:flashMessages>

f:for

TYPO3 4.3 typo3fluid/fluid 1.0.6

Erzeugt eine Schleife. Jedes Element des übergebenen Arrays oder ObjectStorages wird durchlaufen und kann als Datenbasis des zugrunde liegenden Templates verwendet werden.

Parameter

Beispiel

Ich weise der Variable mitarbeiter 6 Einträge zu, die dann eins nach dem Anderen von f:for durchlaufen werden. Mit jedem Durchlauf wird eine weitere Tabellenzeile erstellt.

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'}, 1: {vorname: 'Petra', stadt: 'Lindlar'}, 2: {vorname: 'Sascha', stadt: 'Remscheid'}, 3: {vorname: 'Patrick', stadt: 'Bonn'}, 4: {vorname: 'Sven', stadt: 'Gummersbach'}, 5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <table cellpadding="5" cellspacing="0" border="2">
        <f:for each="{mitarbeiter}" as="kollege">
            <tr>
                <td>{kollege.vorname}</td>
                <td>{kollege.stadt}</td>
            </tr>
        </f:for>
    </table>
</f:alias>

Beispiel für rückwärts

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'}, 1: {vorname: 'Petra', stadt: 'Lindlar'}, 2: {vorname: 'Sascha', stadt: 'Remscheid'}, 3: {vorname: 'Patrick', stadt: 'Bonn'}, 4: {vorname: 'Sven', stadt: 'Gummersbach'}, 5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <table cellpadding="5" cellspacing="0" border="2">
        <f:for each="{mitarbeiter}" as="kollege" reverse="1">
            <tr>
                <td>{kollege.vorname}</td>
                <td>{kollege.stadt}</td>
            </tr>
        </f:for>
    </table>
</f:alias>

Beispiel mit Array-Key

Ich weiß, das ist jetzt nicht das beste Beispiel, aber ihr seht, wie ich mithilfe des key Attributes auf die Array-Keys der jeweiligen Einträge zugreifen kann.

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'},1: {vorname: 'Petra', stadt: 'Lindlar'},2: {vorname: 'Sascha', stadt: 'Remscheid'},3: {vorname: 'Patrick', stadt: 'Bonn'},4: {vorname: 'Sven', stadt: 'Gummersbach'},5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <table cellpadding="5" cellspacing="0" border="2">
        <f:for each="{mitarbeiter}" as="kollege" reverse="1" key="eintrag">
            <tr>
                <th colspan="2">Eintrag: {eintrag}</th>
            </tr>
            <tr>
                <td>{kollege.vorname}</td>
                <td>{kollege.stadt}</td>
            </tr>
        </f:for>
    </table>
</f:alias>

Beispiel mit Durchlaufinformationen

iterator.cycle ist genau wie iterator.index einfach nur ein Zähler und hat nichts mit dem ViewHelper f:cycle zu tun. Dieses Beispiel zeigt die Verwendung aller Durchlaufinformationen. Auch wenn ihr den f:if ViewHelper noch nicht kennengelernt haben solltet, so sollte dieses Beispiel selbsterklärend sein.

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'}, 1: {vorname: 'Petra', stadt: 'Lindlar'}, 2: {vorname: 'Sascha', stadt: 'Remscheid'}, 3: {vorname: 'Patrick', stadt: 'Bonn'}, 4: {vorname: 'Sven', stadt: 'Gummersbach'}, 5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <table cellpadding="5" cellspacing="0" border="2">
        <f:for each="{mitarbeiter}" as="kollege" iteration="iterator">
            <f:if condition="{iterator.isFirst}">
                <tr><th colspan="2">Los gehts</th></tr>
            </f:if>
            <tr>
                <td>Durchlauf beginnend bei 0: {iterator.index}</td>
                <td>Durchlauf beginnend bei 1: {iterator.cycle}</td>
                <td{f:if(condition:iterator.isOdd, then: ' style="color: green;"')}>{kollege.vorname}</td>
                <td{f:if(condition:iterator.isEven, then: ' style="color: red;"')}>{kollege.stadt}</td>
            </tr>
            <f:if condition="{iterator.isLast}">
                <tr><th colspan="2">Eintraege: {iterator.total}</th></tr>
            </f:if>
        </f:for>
    </table>
</f:alias>

f:form

Dieser ViewHelper ist für die Erstellung von HTML Formularen zuständig und bildet die zentrale Schnittstelle für alle anderen f:form.* ViewHelper.

Globale Tag Attribute

Universelle Tag Attribute

Parameter

Beispiel

Fluid Template:

<f:form object="{feUser}" objectName="newFeUser">
    <f:form.textarea property="firstName" rows="5" cols="50" />
</f:form>

HTML Ausgabe:

<form action="/typo3_46/index.php?id=6&amp;tx__%5Bcontroller%5D=Standard&amp;cHash=d1469ddb628871564f3257920c1f6ee8" method="post">
    <div style="display: none">
        <input type="hidden" name="__referrer[extensionName]" value="" />
        <input type="hidden" name="__referrer[controllerName]" value="Standard" />
        <input type="hidden" name="__referrer[actionName]" value="index" />
        <input type="hidden" name="__hmac" value="a:2:{s:9:&quot;newFeUser&quot;;a:1:{s:9:&quot;firstName&quot;;i:1;}s:4:&quot;tx__&quot;;a:1:{s:10:&quot;controller&quot;;i:1;}}ff5ff9b62f7b5c49a696d3f7b1009991853d6533" /> 
    </div>
    <textarea rows="5" cols="50" name="newFeUser[firstName]"></textarea>
</form>

Hier seht Ihr das Thema Sicherheit. Fluid baut automatisch einen versteckten Bereich mit ein paar Werten in Euer Formular ein. Unteranderem befindet sich dort ein __hmac-Wert. Innerhalb dieses Wertes sind alle erlaubten Formularfelder nochmals enthalten. Wenn also über bestimmte Webseitenattacken Felder entfernt oder hinzugefügt werden, dann kann Extbase später feststellen, dass die Anzahl und/oder Feldnamen nicht übereinstimmen und wirft eine Fehlermeldung. Das Formular kann also nicht abgesendet werden.

Ich habe in meinem Beispiel noch einen Objektnamen angegeben newFeUser. Wie ihr seht, wurde dieser Wert jedem Feld in meinem Formular vorangestellt. Das hat den Vorteil, dass meine Formularfelder nicht einzeln, sondern gebündelt in einem Array an die Zielseite übertragen werden. Dort angekommen kann ich meiner Action mitteilen, dass der Inhalt diesen Arrays in ein Modell überführt werden soll. Bei dieser Überführung werden auch automatisch die enthaltenen Werte auf Gültigkeit überprüft, sofern ihr überhaupt Überprüfungsregeln in euren Modellen angegeben habt. Nur wenn alle Überprüfungen gültig waren, kann das Modell mit den Formulardaten an die Action übergeben werden und dort mit einem Einzeiler in der Datenbank gespeichert werden.

f:groupedFor

TYPO3 4.3 typo3fluid/fluid 1.0.6

Ein sehr mächtiger ViewHelper im Bereich der Listengenerierung. Übergebt dem ViewHelper ein Array und ein Gruppierungskriterium und ihr erhaltet mit jedem Durchlauf bzw. mit jeder gefundenen Gruppe ein Array mit den dazugehörigen Arrayelementen zurück. Zu kompliziert? Na dann schaut mal in die Beispiele.

Parameter

Beispiel

Ich hab hier wieder das Beispiel mit den 6 Mitarbeitern ausgepackt. Wie Ihr sehen könnt habe ich dem f:groupedBy ViewHelper gesagt, dass er diese Mitarbeiter anhand ihrer Städte gruppieren soll (groupBy). Das geübte Auge sieht evtl. sofort, dass die ersten beiden Arrayeinträge in Lindlar wohnen. Um innerhalb der f:groupedBy Tags auf diesen Städtenamen zugreifen zu können, verwende ich den Parameter groupKey. Der Wert aus groupBy und groupKey müssen nicht übereinstimmen. Innerhalb von groupKey hätte ich auch einfach city nehmen können.

Über die Variable, die ich unter “as” angegeben habe kann ich nun auf die Elemente der ersten gefundenen Gruppe zugreifen und mit f:for durchlaufen lassen.

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'},1: {vorname: 'Petra', stadt: 'Lindlar'},2: {vorname: 'Sascha', stadt: 'Remscheid'},3: {vorname: 'Patrick', stadt: 'Bonn'},4: {vorname: 'Sven', stadt: 'Gummersbach'},5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <table cellpadding="5" cellspacing="0" border="2">
        <f:groupedFor each="{mitarbeiter}" as="kollegen" groupBy="stadt" groupKey="stadt">
            <tr>
                <th colspan="2">{stadt}</th>
            </tr>
            <f:for each="{kollegen}" as="kollege">
                <tr>
                    <td style="color: {color}">{kollege.vorname}</td>
                    <td style="color: {color}">{kollege.stadt}</td>
                </tr>
            </f:for>
        </f:groupedFor>
    </table>
</f:alias>

f:if

TYPO3 4.3 typo3fluid/fluid 1.0.6

Ermöglicht Wenn-Dann-Sonst-Abfragen.

Parameter

Folgende Vergleiche sind erlaubt: ==, !=, <, <=, >, >= und %.

Ab TYPO3 8.0 können auch komplexere Operatoren wie && und || inkl. Gruppierungen mittels Klammern verwendet werden.

Verglichen werden können nur Variablen folgenden Typs: Zahlen, Objekteigenschaften, Arrays und Ergebnisse aus ViewHelpern.

Einfache Beispiele

<f:alias map="{wert1: 1, wert5: 5}">
    <f:if condition="{wert1}==1">
        <p>Der Wert ist 1</p>
    </f:if>
    <f:if condition="{wert5}==5">
        <f:then>
            <p>Der Wert ist 5</p>
        </f:then>
        <f:else>
            <p>Der Wert ist NICHT 5</p>
        </f:else>
    </f:if>
    <f:if condition="{wert5} % 2">
        <f:then>
            <p>Die Berechnung liefert einen Restwert von 1.</p>
        </f:then>
        <f:else>
            <p>Es konnte kein Restwert ermittelt werden</p>
        </f:else>
    </f:if>
    <f:if condition="{wert1}!={wert5}">
        <p>wert1 ist NICHT gleich wert5</p>
    </f:if>
    <f:if condition="{wert1}<{wert5}">
        <p>wert1 ist kleiner als wert5</p>
    </f:if>
    <f:if condition="{0:wert1,1:wert5}=={0:1,1:5}">
        <p>Der erste Array ist gleich mit allen Werten aus dem zweiten Zahlenarray</p>
    </f:if>
</f:alias>

<f:alias map="{elemente: {0: wert1, 1: wert2}}">
    <f:if condition="{elemente -> f:count()==2">
        <p>Vergleich mit ViewHelpern: Das Elementearray beinhaltet 2 Elemente</p>
    </f:if>
</f:alias>

<f:alias map="{wert1: 'hallo'}">
    <f:if condition="{0: wert1} == {0: 'hallo'}">
        <p>Stringvergleiche klappen nur als Array</p>
    </f:if>
</f:alias>

Wenn kein f:then oder f:else ViewHelper gefunden wurde, dann wird der Inhalt zwischen den f:if ViewHelpern immer nur dann ausgegeben, wenn die Bedingung wahr ist. Wenn komplette WENN->DANN->SONST-Konstrukte erzeugt werden müssen, dann müssen auch immer die f:then und f:else ViewHelper verwendet werden.

f:image

Ich war total begeistert, als ich von diesem ViewHelper das erstmal gelesen habe. Die Arbeit, die man sich normalerweise umständlich in einer Extension oder im TS machen musste gibt es nun fertig als ViewHelper und die Bilder werden nicht einfach nur verkleinert dargestellt. Nein! Sie werden mithilfe von PHP-GD und imagemagick auf die hier angegebene Größe verkleinert. Eine geniale Erfindung, die ich nicht mehr missen möchte.

Parameter

Beispiel in Originalgröße

<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" />

Beispiel: Beibehaltung der Proportionen

<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" width="50" />

Beispiel: Geschnittenes Bild

<f:image src="fileadmin/bilder/landschaft.jpg" alt="landschaft" width="100c" height="100c" />

Die kürzere Seite wird auf 100 Pixel gesetzt und bei der längeren Seite wird nach 100 Pixeln einfach abgeschnitten.

f:layout

TYPO3 4.3 typo3fluid/fluid 1.0.6

Doku kommt noch

f:media

Parameter

f:or

TYPO3 8.0.0 typo3fluid/fluid 1.0.6

Doku kommt noch

f:render

TYPO3 4.3 typo3fluid/fluid 1.0.6

Die Partials sind in Fluid wie die FCEs in TemplaVoila. Kurz: Wiederverwendbare Templates. Eine geniale Sache, solange ihr diese ViewHelper in Maßen einsetzt, denn das Laden eines Partials dauert ca. 5 Millisekunden. Wenn ihr also irgendwann mal auf die Idee kommen solltet, jede Zelle einer Tabelle mit Partials generieren zu wollen, dann kann das Laden der Webseite bei 700 Tabellenzeilen und 15 Spalten schonmal etwas dauern: 700 Zeilen * 15 Spalten * 5 Millisekunden = 52500 Millisekunden. Plus die Zeit, die TYPO3 selbst noch braucht sind wir bei knapp einer Minute.

Die Dateien für Partials liegen immer in fest vorgegebenen Verzeichnissen. Innerhalb von Extensions ist dies: typo3conf/ext/[ExtensionKey]/Resources/Private/Partials/. Wenn Ihr allerdings mit FLUIDTEMPLATE arbeitet, dann gebt Euren gewünschten Verzeichnispfad mithilfe der TS-Eigenschaft partialRootPath mit abschließendem / an.

Sections haben kein eigenes Verzeichnis, da diese immer innerhalb der aktuellen Templatedatei definiert werden müssen. Ausnahmen machen da die Layouts.

Parameter

Beispiel für Partial

In unserem Fluidtemplate:

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'},1: {vorname: 'Petra', stadt: 'Lindlar'},2: {vorname: 'Sascha', stadt: 'Remscheid'},3: {vorname: 'Patrick', stadt: 'Bonn'},4: {vorname: 'Sven', stadt: 'Gummersbach'},5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <table cellpadding="5" cellspacing="0" border="2">
        <f:for each="{mitarbeiter}" as="kollege">
            <f:render partial="TableRow" arguments="{kollege: kollege}"/>
        </f:for>
    </table>
</f:alias>

In der Partial Datei TableRow.html

<tr>
    <td>{kollege.vorname}</td>
    <td>{kollege.stadt}</td>
</tr>

Weitere Beispiele folgen

f:renderChildren

Dieser ViewHelper findet nur innerhalb der Templates von Fluid Widgets Gebrauch. Gerade beim f:widget.paginate ViewHelper wird f:renderChildren benötigt, um den Inhalt zwischen dem öffnenden und schließenden f:widget.pageinate Tags zu rendern.

Parameter

f:renderFlashMessages

TYPO3 4.3 TYPO3 4.5 TYPO3 4.5

Veraltet. Bitte verwendet nun f:flashMessages.

f:section

TYPO3 4.3 typo3fluid/fluid 1.0.6

Sections arbeiten ähnlich wie Partials. Während Partials in eine eigene Datei ausgelagert werden und somit innerhalb der Extension von überall aufgerufen werden können, befinden sich Sections innerhalb der Templatedateien und können auch nur von dort und Layouts aufgerufen werden. Mit Hilfe von Sections lassen sich gerade große Templates hervorragend strukturieren.

Parameter

Beispiel

<f:alias map="{mitarbeiter: {0: {vorname: 'Stefan', stadt: 'Lindlar'}, 1: {vorname: 'Petra', stadt: 'Lindlar'}, 2: {vorname: 'Sascha', stadt: 'Remscheid'}, 3: {vorname: 'Patrick', stadt: 'Bonn'}, 4: {vorname: 'Sven', stadt: 'Gummersbach'}, 5: {vorname: 'Andrea', stadt: 'Wuppertal'}}}">
    <f:for each="{mitarbeiter}" as="kollege">
      <f:render section="TableRow" arguments="{kollege: kollege}"/>
    </f:for>
</f:alias>

<f:section name="TableRow">
    {kollege.vorname}
    {kollege.stadt}
</f:section>

f:spaceless

TYPO3 7.6.0 typo3fluid/fluid 1.0.6

Jedes Enter, jede Einrückung und jedes Leerzeichen in euren Fluid-Templates werden 1 zu 1 im Seiten-Quelltext eurer Webseite ausgegeben. Zwar reduziert der Browser überflüssigen Leerraum bei der Ausgabe auf ein Leerzeichen zusammen, aber trotzdem muss jedes Leerzeichen zum Browser übertragen werden und kostet somit zusätzlichen Traffic. Mit diesem ViewHelper können die überflüssigen Leerräume schon vor der Ausgabe entfernt werden.

Im folgenden Beispiel würde der HTML-Quelltext als eine lange Zeile zum Browser übertragen werden.

Es wird nur Leerraum zwischen den HTML-Tags entfernt. Nicht jedoch der Leerraum im Fließtext.

Beispiel

<f:spaceless>



        Hallo



</f:spaceless>

f:switch

TYPO3 6.2 typo3fluid/fluid 1.0.6

Mit dem f:switch ViewHelper könnt Ihr gleich mehrere Varianten eines Wertes überprüfen. Auf die Frage “Was bist Du?” könnte die Antwort Vater, Mutter, Tochter oder Sohn erfolgen. Diese 4 Antwortmöglichkeiten mittels dem f:if ViewHelper zu realisieren wäre schon sehr komplex und schwer zu warten. Mit jeder weiteren Variante würde der Quelltext ein bisschen weiter nach rechts rutschen. Nach ein paar Monaten weiß kein Mensch mehr, was da eigentlich gerade passiert.

Parameter

Beispiel

<f:switch expression="{whoAreYou}">
    <f:case value="Vater">Ich brauch Taschengeld</f:case>
    <f:case value="Mutter">Wann gibt's Mittach?</f:case>
    <f:case value="Tochter">Wo ist mein Lippenstift?</f:case>
    <f:case value="Sohn">Ich geh scaten</f:case>
    <f:defaultCase>Stell Dich vor</f:defaultCase>
</f:switch>

f:then

TYPO3 4.3 typo3fluid/fluid 1.0.6

Da dieser ViewHelper nur innerhalb des f:if ViewHelpers verwendet werden kann, erkläre ich diesen dort.

f:translate

Der f:translate ViewHelper stellt Übersetzungen im Fluid-Template zur Verfügung. Ohne Angabe eines Pfades werden Übersetzungen aus der locallang.xlf der aktuellen Extension bezogen.

Parameter

Beispiel: Simpel

<f:translate key="domain_model.title"/>

Beispiel: Vollständiger Pfad

<f:translate key="LLL:EXT:events2/Resources/Private/Language/ExtConf.xlf:domain_model.title" />

Beispiel: Platzhalter

<f:translate key="LLL:fileadmin/lang/locallang.xml:domain_model.title" arguments="{0: 'Herr der Ringe'}" />

<label index="domain_model.title">Title of: %s</label>

Mit %s wird auf den ersten Wert des übergebenen Arrays zugegriffen. Kommt %s nochmals vor, dann wird auf den zweiten Array-Eintrag zugegriffen. Um das unabhängig von der Reihenfolge zu machen, empfehle ich noch folgende Notation:

<label index="domain_model.title">Titel von: %1$s</label>

Mit %1 greift ihr auf den ersten Eintrag zu und sagt diesem, dass er als String $s interpretiert werden soll. Weitere Informationen zu dieser Syntax findet ihr in der Dokumentation der zugrundeliegenden PHP Funktion vsprintf.

f:variable

TYPO3 8.4 typo3fluid/fluid 2.2.0

Erstellt im Template eine Variable, die ab Verwendung bis Dateiende Gültigkeit hat. Sehr sinnvoll, um das Ergebnis eines ViewHelpers noch vor einer Schleife in eine Variable zu überführen, anstatt den ViewHelper innerhalb der Schleife 30 Mal aufrufen zu lassen.

Parameter

Beispiel: Einfache Wertzuweisung

Wenn der Parameter value nicht angegeben wird, wird automatisch der Inhalt zwischen öffnendem und schließenden Tag als value verwendet.

<f:variable name="fullName">{person.firstName} {person.lastName}</f:variable>
<p>Ich heiße {fullName}</p>

<p>Stefan Froemken</p>

Beispiel: Performance

Hier ein Beispiel, wie man mit f:variable das immer wiederkehrende Aufrufen von ViewHelper in einer Schleife unterbinden kann. Je nach ViewHelper lässt sich so richtig Zeit während dem ersten Parsen der Templates einsparen.

<f:variable name="productLabel" value="{f:translate(key: 'product')}"/>
<ul>
    <f:for each="{products}" as="product">
        <li>{productLabel}: {product.title}</li>
    </f:for>
</ul>

<ul>
    <li>Produktbezeichnung: TYP-03</li>
    <li>Produktbezeichnung: LI-E-BE</li>
    <li>Produktbezeichnung: Passierschein A38</li>
</ul>