Official TYPO3 Extbase and Fluid Guide

Extbase and Fluid Guide

Table of Contents

Extbase Guide

o Erstellen einer Extbase Extension

o Erweitern der Extbase Extension

o Step 1 - Einführung

o Schritt 2 - Systemcheck

o Schritt 3 - Dokumentation

Fluid Guide

o ViewHelper

o Things to know

o Bewährte Vorgehensweisen

Index: Labels for Crossreferencing

What is Extbase?

Extbase is a framework for TYPO3 extension development. It was introduced with TYPO 4.3 in 2009

and is bound to entirely replace the classic way of writing TYPO3 extension (pibase). Most important

it is a gateway for TYPO3 4.x/6.x to version Phoenix as it is a backport of FLOW3 technology.

Should I use Extbase?

If you develop an extension for TYPO3 you should most definitely use Extbase. The days of piBased

extensions are numbered. Extbase gives you the benefit of a modern, clear and highly structured

way of PHP development with a hidden bonus: If you know Extbase, getting into FLOW3 will be

much, much easier for you. Another bonus: Porting Extbase extensions to Phoenix will be a walk in

the park, whereas porting a piBased extension to Phoenix will be incredibly laborious if possible at

all, and pobably a very bad experience for everyone involved.

How do I get started with Extbase?

You should definitively check out the Extbase documentation section.

The TYPO3 extension repository (TER) already holds lots of extensions based on Extbase, inspect

the code.

Also check out how to get Extbase support.

Want to contribute?

Do you want to take part in making Extbase, TYPO3, and the world an even better place/project?

We would love to welcome you to the team if you want to contribute in a substantial way. Click here

for more info.

Erstellen einer Extbase Extension

Die erste Extension - Schritt fuer Schritt

Ihr müsst Euch zu aller erst von dem Gedanken der alten piBase-Programmierung lösen und

begreifen, dass die Programmierung auf Extbase nicht direkt mit Quellcode beginnt, sondern schon

während dem Gespräch mit dem Kunden. Als Programmierer muss klar sein, was der Kunde will. Je

besser Ihr ihn versteht, desto besser könnt Ihr planen und Planung ist für Extbaseprogrammierung

das A und O.

Im folgenden Verlauf werdet Ihr eine Produktübersicht erstellen, bei der auf der ersten Seite die

Produkte als Liste dargestellt werden und nach einem Klick auf den Produkttitel in die Detailansicht

gewechselt wird. Da die Anzahl der Produkte stark variieren kann, wird es eine Seitennavigation

geben, mit der der Webseitenbesucher durch die Produkte navigieren kann.

Tip

Auf Grund von Mehrsprachigkeit solltet Ihr alle Datenbankspalten in englischer Sprache anlegen.

Spalten wie ist_gefraessig sind einfach sehr schlecht zu lesen.

Den Extension Builder installieren

Um eine Extension auf Basis von Extbase zu erstellen, müsst Ihr den Extension Builder

(extension_builder) über den Extension Manager installieren. Ihr erhaltet nach der Aktivierung dieser

Extension einen neuen Eintrag Extension Builder in der linken Menüleiste des TYPO3-Backends.

Nach einem Klick auf diesen neuen Eintrag landet Ihr auf der Einstiegsseite des Extension Builders,

die Euch erst mal ein paar grundsätzliche Dinge erklärt. Über die Selectbox oben könnt Ihr zwischen

der Einstiegsseite und dem Domain Modelling wechseln.

Informationen zur Extension eingeben

Nach der Auswahl von Domain Modelling aus der Selectbox, erscheint nun ein Formular in dem Ihr

weitere Informationen zu der Extension angeben könnt und eine weiße karierte Fläche.

Tragt nun folgende Daten in das Formular ein:

Name: Product Overview

Key: productoverview

description: This extension shows a paginated product overview including a simple single view

persons: Tragt hier Eure Daten ein.

Frontend Plugin:

o Name: Products

o Key: products

Den Pluginnamem findet Ihr später in der Selectbox für die Plugins innerhalb der Seiteninhalte

wieder. Der Pluginkey wird von Extbase mit dem Extensionkey zusammengesetzt und bildet so

einen TYPO3 weiten eindeutigen Bezeichner: productoverview_products

Domain Modelle anlegen

Das Formular für die Extensionkonfiguration könnt Ihr mit dem kleinen Pfeil oben rechts im Formular

schließen. Nun steht Euch die komplette karierte Fläche zur weiteren Bearbeitung zur Verfügung.

Per Drag and Drop könnt Ihr nun aus dem Kasten "New Model Object" ein eigenes Domainmodel

herausziehen und auf der weißen Fläche platzieren. Dieses Model nennt Ihr "Product". Nach dem

Aufklappen der Domain Object Settings aktiviert Ihr die Checkbox Is Aggregate Root und setzt die

Beschreibung auf "Product".

Aktiviert bei den Default Actions" die beiden Checkboxen: *list und show

Legt 2 Eigenschaften vom Typ String an: title und price

Für die Verknüpfung zu den Kategorien müsst Ihr noch eine Relation anlegen. Klickt auf Add und

tragt als name "categories" ein. Da mehrere Kategorien möglich sein sollen wählt Ihr auf der

Selectbox "1:N" aus.

Legt nun ein weiteres Domainmodel an und benennt es "Category". Im Bereich der "Domain Object

Settings" vergebt Ihr diesmal nur eine description aber lasst die Checkbox "Aggregate Root"

unmarkiert. Auch Actions werden für dieses Domainmodel nicht benötigt.

Legt 1 Eigenschaft vom Typ String an: category

Im Domainmodel Product könnt Ihr nun von der Relation category eine Linie zu dem

Model Category ziehen.

Extension aktivieren

Geht nun in den Extension Manager und aktiviert die Extension productoverview. Bei diesem

Vorgang werden auch die fehlenden Datenbanktabellen erstellt.

Plugin einbinden

Legt eine neue Seite an und bindet das neu erstellte Plugin mit dem Namen "Product" auf Eurer

Seite ein. Wenn alles geklappt hat, dann erscheint im Frontend eine leere Tabelle mit den beiden

Tabellen-Überschriften title und price.

Datensätze anlegen

Legt im TYPO3-Seitenbaum eine neue Seite vom Typ Ordner an. Auf dieser Seite könnt Ihr nun

neue Datensätze vom Typ Product erstellen. Damit diese Daten in Eurem Plugin angezeigt werden,

müsst Ihr diesem mitteilen, wo sich die Daten befinden. Geht dazu in Euer Plugin auf den

Tab Verhalten. Tragt im Bereich Datensatzsammlungdie uid der Seite mit den Product-Datensätze

ein. Nun erscheinen die Datensätze auch im Frontend

Designanpassungen

Jede Extension, die über den Extension Builder erstellt wurde bringt ein kleines CSS mit. Derzeit

sind die Tabellenspalten extremst eng beieinander. Erstellt nun ein +extTemplate für Eure Seite und

bindet das Extension Template von Eurer Extension ein. Danach erscheint Eure Tabelle ein wenig

aufgeräumter.

Viel Spaß mit Eurer ersten Extbase Extension

Erweitern der Extbase Extension

Dieses Tutorial baut auf das Tutorial zum Erstellen der ersten Extbase Extension auf.

Anzeigen der Kategorien in der Detailansicht

Das Template für die Detailansicht findet Ihr hier:

typo3conf/ext/productoverview/Resources/Private/Partials/Product/

Properties.html

Ihr seht, dass nur title und price ausgegeben werden. Die Verknüpfungen von Domainmodellen kann

der Extension Builder derzeit nicht darstellen, deshalb müsst Ihr das selber nach holen. Fügt nun die

Zeile für die category ein. Das Template sollte nun so aussehen:

<table class="tx-productoverview" >

<tr>

<td>

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

</td>

<td>

{product.title}

</td>

</tr>

<tr>

<td>

<f:translate key="tx_productoverview_domain_model_product.price" />

</td>

<td>

{product.price}

</td>

</tr>

<tr>

<td>

<f:translate

key="tx_productoverview_domain_model_product.categories" />

</td>

<td>

<ul>

<f:for each="{product.categories}" as="category">

<li>{category.category}</li>

</f:for>

</ul>

</td>

</tr>

</table>

Ihr seht, dass vom Product per Punktnotation auf das verknüpfte Domainmodel Category zugegriffen

werden kann. Das ist das Prinzip eines Aggregate Root. Da Ihr pro Produkt mehrere Kategorien

anlegen könnt, müssen diese Kategorien mit Hilfe einer Schleife durch laufen werden. Pro Durchlauf

wird dann die Eigenschaft category in einer Liste ausgegeben.

Speichert dieses Template ab, leert den Cache und ladet Euer Plugin nochmal neu. Die Kategorien

zu den Produkten werden nun in einer Liste aufgeführt.

Mehrfachverwendung von Kategorien

Derzeit könnt Ihr zwar pro Produkt ein oder mehrere Kategorien zuordnen, aber es ist nicht möglich

eine bereits vorhandene Kategorie einem Produkt zuzuordnen. Um dieses Verhalten zu ändern geht

Ihr in diese Datei:

typo3conf/ext/productoverview/Configuration/Tca/Product.php

ersetzt diesen Eintrag hier:

'categories' => array(

'exclude' => 0,

'label' =>

'LLL:EXT:productoverview/Resources/Private/Language/locallang_db

.xml:tx_productoverview_domain_model_product.categories',

'config' => array(

'type' => 'inline',

'foreign_table' => 'tx_productoverview_domain_model_category',

'foreign_field' => 'product',

'maxitems' => 9999,

'appearance' => array(

'collapseAll' => 0,

'levelLinksPosition' => 'top',

'showSynchronizationLink' => 1,

'showPossibleLocalizationRecords' => 1,

'showAllLocalizationLink' => 1

),

),

),

mit diesem:

'categories' => array(

'exclude' => 0,

'label' =>

'LLL:EXT:productoverview/Resources/Private/Language/locallang_db.xml:tx_pr

oductoverview_domain_model_product.categories',

'config' => array(

'type' => 'select',

'foreign_table' => 'tx_productoverview_domain_model_category',

'foreign_field' => 'product',

'maxitems' => 9999,

),

),

Step 1 - Einführung

Table of Contents

Einführung

Domain Driven Design

Dependency Injection

Einführung

Da die TYPO3-Programmierung auf Basis der piBase immer undurchsichtiger wird und keine klare

Struktur bei der Programmierung zu erkennen ist, haben sich die TYPO3-Entwickler auf die Suche

gemacht und überlegt welches System sie in Zukunft für TYPO3 einsetzen können. Die Entwickler

haben sich viele Frameworks angeschaut, aber überall Defizite gefunden und entschieden ein

eigenes Framework aufzubauen und so ist FLOW3 entstanden.

Dieses FLOW3 wird bzw. ist schon die Basis des neuen TYPO3 5, welches derzeit unter dem

Namen Phoenix durch die TYPO3-Gemeinde wandert. Da FLOW3 eine völlig neue Basis und auch

völlig anders aufgebaut ist, kann FLOW3 nicht von jetzt auf gleich den derzeitigen TYPO3 4.3 Core

ersetzten. Damit aber schon heute Extensions auf Basis des neuen Systems programmiert werden

können, hat man Teile des FLOW3-Systems als Sysextension. So entstanden die Extensions

extbase und fluid. Auf extbase basierende Extensions laufen auf TYPO3-Versionen ab 4.3 und

können später mit nur wenig Änderungen auf das TYPO3 5 System portiert werden.


Ohne Struktur kann der Quellcode einer Software echt wüst aussehen. Wir haben Extensions

gesehen die insgesamt 3 PDF-Generatoren beinhaltet haben. Wusste der Programmierer nicht

mehr, dass er einen PDF-Generator implementiert hatte? Oder musste der PDF-Generator in einem

Teilbereich etwas anderes arbeiten/interagieren? Wir wissen es nicht. Aber wenn dieser

Programmierer irgendwann einmal wieder an seinem PDF-Generator arbeitet und einen Fehler

behebt, wird er diesen dann auch für die beiden anderen PDF-Generatoren entfernen?

Viele Programmierer haben schon sehr früh erkannt, dass es zwingend nötig ist Quellcode zu

strukturieren bzw. die Teilbereiche einer Software wie z.B. die PDF-Generierung, die Anbindung an

eine Datenbanktabelle, das Schreiben von Logdateien oder dem Versand einer E-Mail in eigene

Objekt den sogenannten Domainmodellen zu kapseln.

Dieses Prinzip der Planung und Programmierung nennt man Domain Driven Design. Dies hat den

Vorteil, dass sich der Programmierer immer auf ein spezielles Problem konzentrieren kann.

Programmiert er gerade an dem PDF-Generator, dann werden ihm keine Teilbereiche aus der

Logging-Domain oder aus der Datenbankanbindung in die Quere kommen. Auch Extbase selbst

arbeitet nach diesem Prinzip. So brauchen Sie sich als Programmierer keine Gedanken darüber zu

machen, wie Sie an die benötigten Daten für eine Ausgabe kommen. Mit Hilfe von Validatoren

innerhalb des Domainmodels können Sie das Model anweisen sich selbst zu überprüfen. Wird das

Model wo auch immer im Quellcode z.B. ungültig wird es nicht weiter verarbeitet bzw. wird nicht in

der Datenbank abgespeichert.

Domain Driven Design sollte schon während dem Gespräch mit dem Kunden angewendet werden.

Erst dadurch können die jeweiligen Problemfälle, die der Kunde durch Ihr Programm gelöst haben

will, visuell dargestellt werden. Alle Eigenschaften und Methoden werden mit dem Kunden

besprochen und es wird eine einheitliche Sprache zwischen Ihnen und dem Kunden erstellt

(Ubiquitous Language). Entscheiden Sie sich also bei der Debitorennummer für das Kürzel dNr,

dann ist das IMMER die Debitorennummer und wenn der Kunde auf einmal mit debNr oder

dNummer ankommt, dann ist dies für das aktuelle Projekt eine völlig neue Eigenschaft. Beim Bilden

dieser gemeinsamen Sprache sollten Sie sich auf die englische Sprache einigen, da viele

Fremdsprachen mit ihren Umlauten häufig zu Problemen führen.


Sehr häufig kommt es vor, dass Objekte von anderen Objekten abhängig sind. So sind z.B. Objekte,

die für Inhaltselemente zuständig sind abhängig von Seitenobjekten. Also immer wenn wir ein

Inhaltsobjekt instanziieren, muss auch das abhängige Seitenobjekt instanziiert werden. Innerhalb

des abhängigen Objektes, in unserem Fall das Seitenobjekt, sieht man immer wieder einen

Konstruktor, der das Objekt initialisiert. Nicht selten wurden in solchen Konstruktoren weitere

abhängige Objekte eingebunden. Solch ein Objekt könnte zum Beispiel ein Seitenbaumobjekte oder

eine Art Rootlineobjekt sein.

Egal wie Ihr diese abhängigen Objekte nun einbindet, sei es mit new oder t3lib_div::makeInstance(),

spätestens beim Testen Eurer Software werdet Ihr auf Probleme stoßen. Wollt Ihr innerhalb des

Seitenobjektes eine Methode testen, dann seit Ihr schon bei der Instanziierung diesen Objektes

dazu gezwungen auch ein Seitenbaumobjekt und ein Rootlineobjekt einzubinden, weil diese fest im

Konstruktor verankert sind.

Dieses Problem lässt sich mit Hilfe von Dependency Injections lösen. Innerhalb von Extbase wurden

sämtliche Konstruktore entfernt bzw. überarbeitet und die Einbindung von abhängigen Klassen

wurde in eigene kleine Methoden ausgelagert. Ab jetzt konnte man das aktuelle Objekt instanziieren

OHNE eine Abhängigkeit zu anderen Objekten herstellen zu müssen.

In Bezug auf phpUnit gibt es sogar noch einen weiteren Vorteil: Ihr könnt nun ein völlig fremdes

Objekt als abhängiges Objekt für Euer Seitenbaumobjekt einbinden. Hier noch ein besseres

Beispiel: Falls Euer abhängiges Objekt ein Datenbankobjekt ist, könntet Ihr nun phpUnit anweisen

z.B. ein Datenbankobjekt einzubinden, dass sich die Daten aus einer RAM-Tabelle zieht und auch

dort wieder zurückschreiben kann. Auf diese Weise würdet Ihr nicht in die Versuchung kommen

beim Testen Eures Programmes mit den Echtdaten in Kontakt zu kommen.


Ohne Struktur kann der Quellcode einer Software echt wüst aussehen. Wir haben Extensions

gesehen die insgesamt 3 PDF-Generatoren beinhaltet haben. Wusste der Programmierer nicht

mehr, dass er einen PDF-Generator implementiert hatte? Oder musste der PDF-Generator in einem

Teilbereich etwas anderes arbeiten/interagieren? Wir wissen es nicht. Aber wenn dieser

Programmierer irgendwann einmal wieder an seinem PDF-Generator arbeitet und einen Fehler

behebt, wird er diesen dann auch für die beiden anderen PDF-Generatoren entfernen?

Viele Programmierer haben schon sehr früh erkannt, dass es zwingend nötig ist Quellcode zu

strukturieren bzw. die Teilbereiche einer Software wie z.B. die PDF-Generierung, die Anbindung an

eine Datenbanktabelle, das Schreiben von Logdateien oder dem Versand einer E-Mail in eigene

Objekt den sogenannten Domainmodellen zu kapseln.

Dieses Prinzip der Planung und Programmierung nennt man Domain Driven Design. Dies hat den

Vorteil, dass sich der Programmierer immer auf ein spezielles Problem konzentrieren kann.

Programmiert er gerade an dem PDF-Generator, dann werden ihm keine Teilbereiche aus der

Logging-Domain oder aus der Datenbankanbindung in die Quere kommen. Auch Extbase selbst

arbeitet nach diesem Prinzip. So brauchen Sie sich als Programmierer keine Gedanken darüber zu

machen, wie Sie an die benötigten Daten für eine Ausgabe kommen. Mit Hilfe von Validatoren

innerhalb des Domainmodels können Sie das Model anweisen sich selbst zu überprüfen. Wird das

Model wo auch immer im Quellcode z.B. ungültig wird es nicht weiter verarbeitet bzw. wird nicht in

der Datenbank abgespeichert.

Domain Driven Design sollte schon während dem Gespräch mit dem Kunden angewendet werden.

Erst dadurch können die jeweiligen Problemfälle, die der Kunde durch Ihr Programm gelöst haben

will, visuell dargestellt werden. Alle Eigenschaften und Methoden werden mit dem Kunden

besprochen und es wird eine einheitliche Sprache zwischen Ihnen und dem Kunden erstellt

(Ubiquitous Language). Entscheiden Sie sich also bei der Debitorennummer für das Kürzel dNr,

dann ist das IMMER die Debitorennummer und wenn der Kunde auf einmal mit debNr oder

dNummer ankommt, dann ist dies für das aktuelle Projekt eine völlig neue Eigenschaft. Beim Bilden

dieser gemeinsamen Sprache sollten Sie sich auf die englische Sprache einigen, da viele

Fremdsprachen mit ihren Umlauten häufig zu Problemen führen.


Sehr häufig kommt es vor, dass Objekte von anderen Objekten abhängig sind. So sind z.B. Objekte,

die für Inhaltselemente zuständig sind abhängig von Seitenobjekten. Also immer wenn wir ein

Inhaltsobjekt instanziieren, muss auch das abhängige Seitenobjekt instanziiert werden. Innerhalb

des abhängigen Objektes, in unserem Fall das Seitenobjekt, sieht man immer wieder einen

Konstruktor, der das Objekt initialisiert. Nicht selten wurden in solchen Konstruktoren weitere

abhängige Objekte eingebunden. Solch ein Objekt könnte zum Beispiel ein Seitenbaumobjekte oder

eine Art Rootlineobjekt sein.

Egal wie Ihr diese abhängigen Objekte nun einbindet, sei es mit new oder t3lib_div::makeInstance(),

spätestens beim Testen Eurer Software werdet Ihr auf Probleme stoßen. Wollt Ihr innerhalb des

Seitenobjektes eine Methode testen, dann seit Ihr schon bei der Instanziierung diesen Objektes

dazu gezwungen auch ein Seitenbaumobjekt und ein Rootlineobjekt einzubinden, weil diese fest im

Konstruktor verankert sind.

Dieses Problem lässt sich mit Hilfe von Dependency Injections lösen. Innerhalb von Extbase wurden

sämtliche Konstruktore entfernt bzw. überarbeitet und die Einbindung von abhängigen Klassen

wurde in eigene kleine Methoden ausgelagert. Ab jetzt konnte man das aktuelle Objekt instanziieren

OHNE eine Abhängigkeit zu anderen Objekten herstellen zu müssen.

In Bezug auf phpUnit gibt es sogar noch einen weiteren Vorteil: Ihr könnt nun ein völlig fremdes

Objekt als abhängiges Objekt für Euer Seitenbaumobjekt einbinden. Hier noch ein besseres

Beispiel: Falls Euer abhängiges Objekt ein Datenbankobjekt ist, könntet Ihr nun phpUnit anweisen

z.B. ein Datenbankobjekt einzubinden, dass sich die Daten aus einer RAM-Tabelle zieht und auch

dort wieder zurückschreiben kann. Auf diese Weise würdet Ihr nicht in die Versuchung kommen

beim Testen Eures Programmes mit den Echtdaten in Kontakt zu kommen.

Schritt 2 - Systemcheck

Inhaltsverzeichnis

TYPO3

Extbase wird seit TYPO3 4.3.0 als Systemextension mitgeliefert und wird parallel zur Entwicklung

von FLOW3 weiterentwickelt. Seit TYPO3 4.6.0 wurden die Versionsnummern von Extbase und

Fluid an die Versionsnummer von TYPO3 angepasst.

Auch wenn Extbase seit 4.3.0 on board ist, so empfehlen wir für den professionellen Einsatz

mindestens TYPO3 4.5. Sollte für Sie Geschwindigkeit sehr wichtig sein, dann verwenden Sie bitte

mindestens TYPO3 4.6. Seit dieser Version werden die Fluidtemplates in PHP-Dateien kompiliert

und können dadurch einen Geschwindigkeitsvorteil von 2 - 5x erziehlen.

PHP

Auch wenn TYPO3 4.5 noch mit PHP 5.2.* klar kommt, so sollten Sie bei der Entwicklung von

Extbase-Extensions mindestens eine PHP-Version größer 5.3.2 einsetzen.

Seit TYPO3 6.0 gibt es den Support von Namespacing. Da es mit früheren PHP-Versionen zu

Problemen beim Namespacing kommen kann empfehlen wir Ihnen eine PHP-Version größer 5.3.8

zu installieren.

Während TYPO3 4.5 sich noch mit einem memory_limit von 64MB begnügt, sollten es bei neueren

TYPO3-Versionen schon besser 128MB sein.

Falls Sie mit Hilfe von xdebug unterwegs sind, dann kann es Ihnen passieren, dass Sie ab einer

bestimmten Anzahl von verschachtelten Partials folgender Fehler auftaucht:

Maximum function nesting level of '100' reached, aborting!

Editieren Sie in diesem Fall Ihre php.ini und erhöhen Sie den Wert für die Verschachtelungen. Die

500 ist ein Vorschlag. Falls es nicht ausreicht, dann setzen Sie den Wert noch höher (1000):

xdebug.max_nesting_level = 500

Schritt 3 - Dokumentation

Inhaltsverzeichnis

Architektur

Diese Referenz beschreibt all Features die Extbase von Haus aus mitbringt.

Systemteile

Das Extbase Framework besteht aus den folgenden Unterm:

Der TYPO3 Extbase Bootstrap kümmert sich um die Konfiguration und dem Einrichten des

kompletten Extbase Frmaworks. Der Objektmanager erstellt, cached und verbindet Objekte. Das

Konfigurationsframework liest und verschachtelt die unterschiedlichen Konfigurationen.

The Resource module contains functions for publishing, caching, securing and retrieving resources.

The HTTP component is a standards-compliant implementation of a number of RFCs around HTTP,

Cookies, content negotiation and more. The MVC framework takes care of requests and responses

and provides you with a powerful, easy-to use Model-View-Controller implementation. The Cache

framework provides different kinds of caches with can be combined with a selection of cache

backends. The Error module handles errors and exceptions and provides utility classes for this

purpose. The Log module provides simple but powerful means to log any kind of event or signal into

different types of backends. The Signal Slot module implements the event-driven concept of signals

and slots through AOP aspects. The Validation module provides a validation and filtering framework

with built-in rules as well as support for custom validation of any object. The Property module

implements the concept of property editors and is used for setting and retrieving object properties.

The Reflection API complements PHP's built-in reflection support by advanced annotation handling

and a cached reflection service. The Persistence module allows you to transparently persist your

objects following principles of Domain Driven Design. The Security framework enforces security

policies and provides an API for managing those. The Session framework takes care of session

handling and storing session information in different backends The I18n service manages languages

and other regional settings and makes them accessible to other packages and TYPO3 Flow sub

packages. The Utility module is a library of useful general-purpose functions for file handling,

algorithms, environment abstraction and more. If you are overwhelmed by the amount of information

in this reference, just keep in mind that you don't need to know all of it to write your own TYPO3

Flow packages. You can always come back and look up a specific topic once you need to know

about it - that's what references are for.

But even if you don't need to know everything, we recommend that you get familiar with the

concepts of each module and read the whole manual. This way you make sure that you don't miss

any of the great features TYPO3 Flow provides and hopefully feel inspired to produce clean and

easy-maintainable code.

Arguments

Bootstrap

Der Bootstrap Mechanismus kümmert sich darum, die Konfiguration auszulesen, die

Reflectionklassen zu laden, die Caches aufzuwärmen und die Persistenzschicht zu aktivieren.

Dieser Initiierungsprozess wird über die ext_localconf.php vorbereitet:

Tx_Extbase_Utility_Extension::configurePlugin(

$_EXTKEY,

'Products',

array(

'Product' => 'list, show',

),

// non-cacheable actions

array(

'Product' => '',

)

);

Die Methode configurePlugin fügt dann mit Hilfe von t3lib_extMgm::addTypoScript dieses TypoScript

in das globale TS-Template ein:

# Setting Productoverview plugin TypoScript

tt_content.list.20.productoverview_products = USER

tt_content.list.20.productoverview_products {

userFunc = tx_extbase_core_bootstrap->run

extensionName = Productoverview

pluginName = Products

}

Sobald Ihr nun dieses Extbaseplugin auf einer Seite einbindet, wird die Methode run aus der

Klasse tx_extbase_core_bootstrap aufgerufen. Damit die weiß, um welche Extension und Plugin es

sich handelt, werden diese Informationen mit extensionName und pluginName an die run-Methode

übergeben. Hier findet der eigentliche Bootstrap statt:

$this->initializeObjectManager();

$this->initializeConfiguration($configuration);

$this->configureObjectManager();

$this->initializeCache();

$this->initializeReflection();

$this->initializePersistence();

$this->initializeBackwardsCompatibility();

Die letzte Aufgabe des Bootsraps ist die Übergabe der gesammelten Daten an den Dispatcher

Dispatcher

Der Dispatcher kümmert sich darum für die aktuelle Anfrage an eine Webseite eine Klasse zu

finden, die diesen Webseitenaufruf verarbeiten kann. Hat er eine Klasse gefunden, ruft der

Dispatcher die Methode handleRequest der gefundenen Klasse auf und erhält den Inhalt als

Ergebnis wieder zurück. Dieses Ergebnis wird dann als Webseiteninhalt ausgegeben.

Hier nun der Weg bis zum Dispatcher Schritt für Schritt:

RequestHandler

Extbase bringt von Haus aus ein paar Klassen für die unterschiedlichen Webseitenaufrufe mit und

stellt diese über die ext_typoscript_setup.txt zur Verfügung:

config.tx_extbase {

mvc {

requestHandlers {

Tx_Extbase_MVC_Web_FrontendRequestHandler =

Tx_Extbase_MVC_Web_FrontendRequestHandler

Tx_Extbase_MVC_Web_BackendRequestHandler =

Tx_Extbase_MVC_Web_BackendRequestHandler

Tx_Extbase_MVC_CLI_RequestHandler =

Tx_Extbase_MVC_CLI_RequestHandler

}

}

}

Somit stellt Extbase sogenannte RequestHandler für Anfragen aus dem Frontend, dem Backend

und Anfragen, die über die Shell/CLI kommen bereit.

Dank dieser TypoScript Konfiguration habt Ihr die Möglichkeit auch eigene RequestHandler zu

registrieren. So könnt Ihr zum Beispiel einen RequestHandler für AJAX-Anfragen erstellen und hier

bekannt machen.

Welcher RequestHandler nun den aktuellen Webseitenaufruf verarbeiten kann entscheidet sich über

die Methode canHandleRequest innerhalb eines jedenRequestHandlers. Dieser schaut beim

BackendRequestHandler so aus:

canHandleRequest*() {

return TYPO3_MODE === 'BE';

}

Bei der Angabe eigener RequestHandler kann es aber durchaus vorkommen, dass sowohl

Euer RequestHandler als auch der RequestHandler von Extbase für das Frontend zuständig sind.

Also 2 RequestHandler kommen für den aktuellen Webseitenaufruf in Frage. Da aber nur

EIN RequestHandler erlaubt ist, gibt es für dieses Dilemma die Möglichkeit

jedem RequestHandler eine Priorität zuzuordnen. Für den Front- und Backend-

RequestHandler setzt Extbase diese Priorität auf 100. 90 ist die Priorität für CLI-Anfragen. Setzt also

eine höhere Priorität, wenn Euer eigener RequestHandler Vorrang erhalten soll.

RequestBuilder

Jetzt nachdem nur noch ein RequestHandler übrig geblieben ist, wird die enthaltene

Methode handleRequest ausgeführt. Diese Methode erstellt mit Hilfe desRequestBuilders ein

Objekt, das alle benötigten Daten für den Webseitenaufruf zusammen stellt. Er durchsucht die

Pluginkonfiguration in der ext_localconf.php, um heraus zu finden welcher Controller und welche

Action als Standard verwendet werden sollen (Methode: loadDefaultValues). Ebenso liest

der RequestBuilder die Webseiten-Uri aus, um zu prüfen, ob evtl. ein anderer Controller/eine andere

Action statt den Angaben aus der ext_localconf.php geladen werden sollen.

Sämtliche Daten des Webseitenaufrufes werden nun zusammen gestellt und stehen anschließend in

dem Objekt $request zur späteren Verfügung:

$request = $this->objectManager->create('Tx_Extbase_MVC_Web_Request');

$request->setPluginName($this->pluginName);

$request->setControllerExtensionName($this->extensionName);

$request->setControllerName($controllerName);

$request->setControllerActionName($actionName);

$request->setRequestUri(t3lib_div::getIndpEnv('TYPO3_REQUEST_URL'));

$request->setBaseUri(t3lib_div::getIndpEnv('TYPO3_SITE_URL'));

$request->setMethod((isset($_SERVER['REQUEST_METHOD'])) ?

$_SERVER['REQUEST_METHOD'] : NULL);

Abschließend werden die Parameter, die nur für dieses eine Plugin gültig sind, dem $request-Objekt

als Argumente hinzugefügt:

foreach ($parameters as $argumentName => $argumentValue) {

$request->setArgument($argumentName, $argumentValue);

}

RequestHashService

Alle Daten für den aktuellen Webseitenaufruf wurden im Request-Objekt hinterlegt. Zeit zu

überprüfen, ob die Daten sauber sind. Der RequestHashService prüft, ob sich imRequest-Object ein

__hmac-Argument befindet. Das ist immer dann der Fall, wenn Formulardaten übertragen wurden.

Extbase weiß, welche Formulardaten auf der Webseite angezeigt werden. Hat sich die Anzahl der

Felder beim Übertragen der Daten verändert, dann wurde möglicherweise das Formular

kompromitiert und das Verarbeiten der Daten wird gestoppt. Ist das hmac-Argument nicht enthalten

handelt es sich um ganz normale Webseitenaufrufe und die Inhaltsgenerierung kann gestartet

werden

Response

Es wird nun ein Antwort-Objekt erstellt, das die Headerdaten beinhaltet. Das sind zum einen die

Statuscodes wie Fehler 404 und für die Inhaltsausgabe benötigte JavaScript und CSS-Dateien.

Dieses Objekt ist derzeit noch leer, wird aber im nächsten Schritt, dem

sogenannten Dispatching befüllt.

Der Dispatcher

Der Dispatcher holt sich aus dem Request-Objekt den Controllernamen und erstellt über die

Methode resolveController das zum Controller gehörende Objekt. In der

Beispielextension productoverview ist das die

Klasse Tx_Productoverview_Controller_ProductController.

Das Objekt $request und das noch leere Objekt $response wird nun an die

Methode processRequest des Controllers übergeben. Ab hier endet die Aufgabe des Dispatchers.

Er wartet nur noch darauf aus dem Controllerobjekt die Daten zurück zu bekommen, setzt dann die

HTTP-Header, die während des Prozesses im $response-Objekt gesetzt wurden und liefert den

generierten Inhalt zurück an das Inhaltsobjekt USER vom TypoScript, welches den Inhalt

schlussendlich ausgibt.

Der Controller

Der Controller steht zwischen den Modellen und dem View (MVC-Prinzip). Über die Informationen

darüber, wie die Modelle mit ein ander verschachtelt sind, kann eine Datenbankabfrage generiert

werden, die die benötigten Daten an den Controller ausliefern kann. Der Controller schiebt diese

Daten dann 1zu1 oder in leicht veränderter Form an den View (Fluid) weiter, der sich dann um die

eigentliche Ausgabe kümmert. Seine Hauptaufgabe besteht also nur darin, den Datenfluss

zwischen Modellen undView zu koordinieren.

Der ActionController

In dem ActionController befinden sich eine oder mehrere Methoden die mit "action" beginnen. Je

nach Konfiguration in der ext_localconf.php oder auch Uri-Parameter wird eine

andere Action ausgeführt, die die Inhaltsausgabe verändert. So kann es z.B. eine Action geben, die

für eine Listenansicht während eine andere Action für die Detailansicht zuständig ist. Es gibt aber

auch Actions, die nur für das Erstellen oder auch Bearbeiten und Löschen von Datensätzen

zuständig sind.

Der Weg bis zum Aufruf einer Action

Welche Action aufgerufen wird, entscheiden die Informationen im $request-Objekt, das über den

Dispatcher an den ActionController übergeben wurde:

$controller->processRequest($request, $response);

Jeder Request will verarbeitet werden. Denn nur wenn ein Request verarbeitet wurde, geht es im

Dispatcher weiter. Der folgende Codeschnipsel zeigt eine Endlosschleife, die solange wiederholt

wird, bis das $request-Objekt als "verarbeitet" markiert wurde. Im Normalfall reicht ein Durchlauf und

das $request-Objekt wird innerhalb derprocessRequest Methode als "verarbeitet" markiert. Aber es

gibt bestimmte Situationen, die diese Information wieder auf "unverarbeitet" setzen. Sowas passiert

z.B. wenn Ihr von einer Action zu einer anderen Action weiterleitet. Einige Actions erwarten ganz

bestimmte Parameter, die zwingend gesetzt sein oder einem ganz bestimmten Datentyp

entsprechen müssen. Ist dies nicht der Fall, spring Extbase wieder zurück zur vorherigen Action und

führt sie erneut aus. Sollte eine Weiterleitung bestehen, wird die fehlerhafte Action von gerade

erneut aufgerufen. Es ist eine Endlosschleife entstanden. Um solche Fälle zu verhindern dürfen pro

Webseitenaufruf und Extension nur 99 Weiterleitungen durchgeführt werden. Ist dieser Wert

erreicht, wird die weitere Ausführung des Scriptes verhindert und eine Fehlermeldung präsentiert:

while (!$request->isDispatched()) {

if ($dispatchLoopCount++ > 99) throw new

Tx_Extbase_MVC_Exception_InfiniteLoop('Could not ultimately dispatch the

request after ' . $dispatchLoopCount . ' iterations. Most probably, a

@dontvalidate annotation is missing on re-displaying a form with

validation errors.', 1217839467);

$controller = $this->resolveController($request);

try {

$controller->processRequest($request, $response);

} catch (Tx_Extbase_MVC_Exception_StopAction $ignoredException) {

}

}

UriBuilder

Der UriBuilder bietet Euch die Möglichkeit an Links zu erzeugen. Sämtliche Einstellungen, die Ihr in

TypoScript hinterlegt habt, werden beim Erstellen von Links berücksichtig. So auch die Konfiguration

der Extension RealUrl, falls installiert.

Der ActionController benötigt den UriBuilder zum Verlinken auf eine andere Action, die über eine

veränderte Uri geladen werden soll: $this->redirect();

Die Action

In der ext_localconf.php werden alle erlaubten Actions registriert und nur mit ihrem Namen

angesprochen. Zum Beispiel: list, detail, update, edit, delete. Auch in der Uri werden die Actions mit

diesem Namen versehen. Innerhalb des ActionControllers werden jedoch Methodennamen in

lowerCamelCase-Schreibweise erwartet, denen ein "Action" angehangen wurde:

Die Action "list" muss demnach in den Methodennamen: "listAction" umgewandelt werden:

$actionMethodName = $this->request->getControllerActionName() . 'Action';

initializeActionMethodArguments

Diese Methode liest die Parameter der aufzurufenden Action Methode aus und stellt diese als

Argumente für die Action zur Verfügung. Hier ein Beispiel anhand der showAction:

/**

* action show

*

* @param Tx_Productoverview_Domain_Model_Product $product

* @return void

*/

public function showAction(Tx_Productoverview_Domain_Model_Product

$product) {

$this->view->assign('product', $product);

}

Noch bevor diese Methode aufgerufen wird liest initializeActionMethodArguments mit Hilfe

der ReflectionServices alle Methodenparameter aus. In diesem Fall $product. Dieser Parameter wird

analysiert und unter anderem wird heraus gefunden, um was für einen Datentyp es sich bei diesem

Parameter handelt. Zum Beispiel: String, Integer, Array aber auf Objekttypen wie "DateTime"

werden in diesem Prozess erkannt.

Dieser Parameter wird mit seinen Datentypinformationen in einem

Sammelobjekt Tx_Extbase_MVC_Controller_Arguments abgespeichert und steht innerhalb des

Controllers als $this->arguments zur Verfügung.

Note

Die enthaltenen Arguments beinhalten bis hierhin noch keine Werte! Es sind nur Parametername

und Datentyp gespeichert.

initializeActionMethodValidators

Für jeden Parameter innerhalb einer Action Methode habt Ihr die Möglichkeit

sogenannte Validators zu aktivieren. Auf diese Weise könnt Ihr Extbase anweisen, den Parameter x

dahingehend zu testen, ob es sich um einen Parameter vom Datentyp y handelt. Ist das nicht der

Fall wird die Action nicht ausgeführt. Im Folgenden eine Beispiel Action mit einem

gesetzten Validator:

/**

* action show

*


* @param String $autoMarke

* @validate $autoMarke String, StringLength(minimum=3,maximum=20)

* @return void

*/


$product, $autoMarke) {


}

Mit Hilfe der PHPDoc-Annotation "@validate" wurde Extbase nun mitgeteilt, dass der Parameter

$autoMarke geprüft werden soll, ob es sich dabei um einen String handelt und dieser String

zwischen 3 und 20 Zeichen lang ist.

Alle definierten Validatoren werden hier an dieser Stelle noch nicht ausgeführt, sondern nur die

Information, dass dieser Parameter gegen diesen Validator geprüft werden soll, den gefundenen

Argumenten in $this->arguments hinzugefügt.

initializeAction

Diese Action gehört Euch. Alles was Ihr hier rein schreibt, wird VOR dem Aufrufen

irgendeiner Action ausgeführt.

initializeXXXAction

Auch diese Action gehört Euch. Als Platzhalter für XXX könnt Ihr eine Action angeben. Eine Beispiel

Methode könnte so aussehen: initializeDetailAction.

Der Inhalt diese Methode wird nur dann ausgeführt, wenn die angegebene Action geladen werden

soll.

mapRequestArgumentsToControllerArguments

Egal ob alter oder neuer PropertyMapper. Hier in dieser Methode erhalten die ausgelesenen Action

Methodenparameter die Werte aus dem $request-Objekt:

foreach ($this->arguments as $argument) {

$argumentName = $argument->getName();

if ($this->request->hasArgument($argumentName)) {

$argument->setValue($this->request->getArgument($argumentName));

} elseif ($argument->isRequired()) {

throw new

Tx_Extbase_MVC_Controller_Exception_RequiredArgumentMissingExceptio

n('Required argument "' . $argumentName . '" is not set.', 1298012500);

}

}

Innerhalb von setValue geschieht eine ganze Menge Magic. Schaut Euch nochmal diese Action hier

an:

/**

* action show

*


* @return void

*/


$product) {


}

Egal was Ihr per Formular oder per Uri übergebt: Ihr könnt keine Objekte übertragen! Um trotzdem

eine Möglichkeit zu schaffen, werden entweder die Eigenschaften des Objektes als Array oder, falls

das Objekt schon existiert und eine eindeutige UID aufweisen kann, die UID als Integerwert

übertragen. Die Methode setValue geht nun her und prüft, welcher Datentyp vom Formular oder Uri

ankommt und in welchen Datentyp der Wert konvertiert werden muss.

Datentyp: Integer

Wenn eine Zahl für den Parameter $product übergeben wird, wird in der Datenbank nach einem

Eintrag mit dieser UID gesucht und die Spalten mit Hilfe des DataMappersauf die Eigenschaften des

angegebenen Datentyps (Tx_Productoverview_Domain_Model_Product) übertragen.

Datentyp: Array

Beim Anlegen eines neuen Produktes gibt es noch keine UID. Es kommen also alle Eigenschaften

als Array an. Auch hier wird wieder der DataMapper aktiv und portiert alle Arrayeinträge auf die

Eigenschaften des benötigten Objektes.

Egal, was für ein Datentyp übergeben wurde, der PropertyMapper wird versuchen diese Datentypen

in den vorgegebenen Datentyp zu konvertieren. Das hat den Vorteil, dass Ihr als Programmierer ein

fertig eingerichtetes Objekt innerhalb Eurer Action zur Verfügung stehen habt.

resolveView

Für jede Action kann ein eigener View definiert werden. Dazu müsst Ihr einen View mit einem

Klassennamen im folgenden Format erstellen:

Tx_@extension_View_@controller_@action@format

Ein Klassenname könnte zum Beispiel so aussehen: Tx_Productoverview_View_Product_ShowHtml

Wenn eine solche Klasse jedoch nicht angelegt wurde, dann wird der

Standard View: Tx_Fluid_View_TemplateView geladen. Kurz: Keine Klasse anzugeben ist das

Standardverhalten und läd somit völlig automatisch Fluidtemplates als Templateengine.

callActionMethod

In dieser letzten Methode wird überprüft, ob die Validatoren (siehe weiter oben) Fehler verursacht

haben. Wenn ja, dann wird ein ErrorHandling ausgeführt, dass die verursachten Fehler auf der

Webseite darstellen. Wurden keine Fehler gefunden wird die Action Methode aufgerufen. Wenn die

Methode einen Wert zurück gibt, wird dieser Wert 1zu1 auf der Webseite ausgegeben. Wird kein

Wert mit return zurückgeliefert, dann wird völlig automatisch $this->view->render aufgerufen also

die Fluid Templates gestartet und geparst. Es wird dann das Ergebnis aus den Templates an den

Dispatcher zurück gegeben.

Fluid Guide

This Guide demonstrates the usage of Fluid to render output. Fluid is a template engine that is

designed to be flexible and extendable, but easy to use. It is part of TYPO3 Flow and TYPO3 CMS.

ViewHelper

The power of Fluid is the usage of ViewHelpers. There are many of them, for all kind of tasks. What

is available and how to use it can be found on the following pages.

ViewHelper: Buttons

f:be.buttons.csh

This ViewHelper is rarely used, but very helpful nonetheless. It enables to include hints into Backend

forms. TYPO3 uses this functionality all over the backend, and it is noticeable by the small question

mark images. When hovered it reveals the helptext in a little tooltip. It can be activated by mouse

click and then display the help text in a popup window. There is a setting in the user configuration

whether to show the popup or not.

Features

Property Datatype Description

table String table name

field String the key from locallang file to use

iconOnly Boolean display the icon, but not the text

styleAttributes String additional style attribute, added to the containing table

Hinweis zu einem Sonderfall bei der Eigenschaft "table"

Es gibt einen Sonderfall bei dem die Eigenschaft "table" überhaupt nicht angegeben werden muss.

Dieser tritt dann ein, wenn es in dem Modul zwar Formularfelder gibt, die aber keine 1zu1-Spalte in

der Datenbank besitzen. So werden beim scheduler z.B. alle Formularfelder serialisiert in einem DB-

Feld abgespeichert (kein 1zu1-Abbild der Felder) oder z.B. Textfelder, die für Suchanfragen benötigt

werden (keine DB-Speicherung). Diesen besonderen Felder kann mit Hilfe eines Eintrages in der

ext_tables.php ein csh-Icon zugewiesen werden:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addLLrefForTCAdescr(

'_MOD_VollständigerModulname',

'PfadZuEinerSprachdatei'

);

Beachtet bitte, dass es sich bei dem Modulnamen um den vollständig ausgeschriebenen

Modulnamen handelt. Dieser besteht aus Kategorie (z.B. web), Extensionname (upper camel case)

und Modulname (upper camel case). In meiner Beispielextension "sfextbase" mit dem Modulnamen

"extbase" würde der vollständige Name so lauten:

web_SfextbaseExtbase

Hier eine Möglichkeit, wie es bei Euch aussehen könnte:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addLLrefForTCAdescr(

'_MOD_web_SfextbaseExtbase',

'EXT:' . $_EXTKEY . '/Resources/Private/Language/locallang_extbase.xlf'

);

Der Eintrag für die E-Mail-Adresse sieht in meiner xlf-Datei so aus:

<trans-unit id="email.alttitle" xml:space="preserve">

<source>E-Mail</source>

</trans-unit>

<trans-unit id="email.description" xml:space="preserve">

<source>Tragen Sie hier Ihre E-Mail-Adresse ein</source>

</trans-unit>

<trans-unit id="email.details" xml:space="preserve">

<source>Ich bin eine ewig lange Beschreibung, die Ihnen on Detail

erklärt, wobei es sich um eine

E-Mail-Adress handelt, wo Sie eine her bekommen und was zu beachten ist,

um eine valide Adresse in dieses Feld einzutragen</source>

</trans-unit>

Beispiele

Caution

Im Quellcode der csh-API befindet sich eine Abfrage auf die BE-User-Option: edit_showFieldHelp.

Diese ist per Default nicht gesetzt und verhindert somit grundsätzlich die Ausgabe dieser csh-

Hilfetexte. Um diesen ViewHelper in Aktion sehen zu können, müsst Ihr entweder in den Benutzer-

oder Gruppenoptionen folgende Einstellung in die UserTSconfig setzen:

setup.override.edit_showFieldHelp = text

Beispiel: Datenbankfelder

Usually in the most TYPO3 tables the language file key is the same as the column name:

<f:be.buttons.csh table="tt_content" field="header" />

Beispiel mit Stil

<f:be.buttons.csh table="tt_content" field="header"

styleAttributes="background-color: red;" />

Beispiel: Icons für Formularfelder ohne 1zu1-Abbild in der Datenbank

Hier ein Beispiel für den oben beschriebenen Soderfall, bei dem der Tabellenname nicht angegeben

werden darf:

<f:be.buttons.csh field="email" />

f:be.buttons.icon

With this ViewHelper you can generate these little linked icons like f.e. edit, delete, new and many

other more.

Features

Property Dataype Description Standard

uri String target url. Can be created by a f:uri.*-ViewHelper

NULL

icon String the name to use actions-document-close

title String title attribute for the link empty string

There is a predefined set of possible values for the icon parameter. In case of not knowing what they

are, insert something definitely wrong. The answer contains all valid parameter values:

"foo" is no valid icon. Allowed are: "add", "add_workspace", "button_down", "button_hide",

"button_left", "button_unhide", "button_right", "button_up", "clear_cache", "clip_copy", "clip_cut",

"clip_pasteafter", "closedok", "datepicker", "deletedok", "edit2", "helpbubble", "icon_fatalerror",

"icon_note", "icon_ok", "icon_warning", "new_el", "options", "perm", "refresh_n", "saveandclosedok",

"savedok", "savedoknew", "savedokshow", "viewdok", "zoom".

Example

in combination with an f:uri.action viewhelper providing the target url

<f:be.buttons.icon uri="{f:uri.action(action:'new')}" icon="button_unhide"

/>

f:be.buttons.shortcut

This ViewHelper provides the bookmark function used in backend.

Features

Property Datatype Description

getVars Array if empty, page-UID, module and module arguments to save with the bookmark

setVars Array see template::makeShortcutIcon(), usually not used for extbase extensions

Example

<f:be.buttons.shortcut />

ViewHelper: Menus

f:be.menus.actionMenuItem

Mit diesem ViewHelper könnt Ihr einen Menüeintrag für Euer BE-Modul erstellen. Damit das

funktioniert müssen sich diese ViewHelper innerhalb des f:be.menus.actionMenu-ViewHelper

befinden.

Eigenschaften

Eigenschaft Datentyp Beschreibung

label String Der anzuzeigende Name des Menüeintrages

controller String In welchem Controller liegt die aufzurufende Action

action String Welche Action soll nach Auswahl aufgerufen werden

arguments Array Welche Parameter sollen an die aufzurufende Action übergeben werden

Beispiel

Dieses Menü beinhaltet eine Selectbox mit 2 Menüeinträgen, die nach Auswahl die hinterlegte

Action des hinterlegten Controllers direkt aufrufen. Wie Ihr seht, könnt Ihr die Labels entweder direkt

oder noch besser als Sprach-ViewHelper realisieren.

<f:be.menus.actionMenu>

<f:be.menus.actionMenuItem label="Neu" controller="Fluid" action="new"

/>

<f:be.menus.actionMenuItem label="{f:translate(key='list')}"

controller="Fluid" action="list" />

</f:be.menus.actionMenu>

f:be.menus.actionMenuView

Dieser ViewHelper erstellt eine Selectbox. Mit Hilfe der actionMenuItem-ViewHelper könnt Ihr diese

Selectbox mit Optionen auffüllen, die dann nach Auswahl auf die gewünschte Action zugreifen.

Eigenschaften


defaultController String Gebt hier den Controllernamen ein auf den zurückgegriffen werden soll, falls im ActionMenuItem-ViewHelper kein Controller angegeben worden ist. Wenn ich mir den ViewHelper im Quellcode anschaue, würde ich diesen Parameter besser nicht verwenden. Erstens: Weil er im Quelltext überhaupt nicht weiter verwendet wird und Zweitens: Weil der Controller in den ActionMenuItems eh eine Pflichtangabe ist.

Beispiele findet Ihr bei den ActionMenuItem-ViewHelpern

ViewHelper: Security

f:be.security.ifAuthenticated

Dieser ViewHelper prüft, ob ein Backenduser sich authentifiziert hat oder nicht. Je nach dem wird

der Inhalt aus dem f:then oder f:else-ViewHelper geladen.

Dieser ViewHelper wird überwiegend aus dem Frontend heraus benötigt. So könnt Ihr bestimmen,

welche Inhalte nur angezeigt werden, wenn ein User im BE angemeldet ist.Ich denke Frontend-

Bearbeitung wäre eine gute Anlaufstelle für diesen ViewHelper.

Eigenschaften

Dieser ViewHelper besitzt keine Eigenschaften

Beispiel WENN->DANN->SONST

<f:be.security.ifAuthenticated>

<f:then>

Sie haben das Recht diesen Inhalt zu bearbeiten

</f:then>

<f:else>

Sie muessen sich zuvor anmelden

</f:else>

</f:be.security.ifAuthenticated>

Beispiel, wenn angemeldet

<f:be.security.ifAuthenticated>

Hier kommt der Inhalt hin, den nur angemeldete Backend-Benutzer sehen.

</f:be.security.ifAuthenticated>

f:be.security.ifHasRole

Dieser ViewHelper prüft, ob ein im Backend angemeldeter User der im Parameter role angegebenen

Benutzergruppe angehört. Wie schon bei dem f:if-ViewHelper wird bei Gültigkeit der Inhalt zwischen

den Tags oder, wenn vorhanden, der Inhalt aus dem f:then-ViewHelper angezeigt. Falls gewünscht,

kann auch der f:else-ViewHelper angegeben werden, der immer dann angezeigt werden soll, falls

der User nicht der angegebenen Benutzergruppe angehört.

Eigenschaften


role String Entweder der Gruppenname (Groß- und Kleinschreibung beachten) oder die Gruppen-UID

Beispiel WENN->DANN->SONST

<f:be.security.ifHasRole role="Administrator">

<f:then>

Sie dürfen diese Daten ändern

</f:then>

<f:else>

Du nix Admin

</f:else>

</f:be.security.ifHasRole>

Beispiel, wenn angemeldet

<f:be.security.ifHasRole role="2">

Willkommen in der Gruppe der BE-Administratoren

</f:be.security.ifHasRole>

ViewHelper: Widget

f:be.widget.paginate

Dieser ViewHelper hilft Euch dabei eine große Anzahl an Daten auf mehrere Seiten mit

Seitennavigation zu erstellen, dabei könnt Ihr selbst fest legen wo sich die Navigation befinden soll

und auch wie viele Datensätze pro Seite angezeigt werden sollen.

Eigenschaften


objects QueryResultInterface Hierbei handelt es sich nicht um die Ergebnisobjekte an sich, sondern um das Objekt aus dem Repository, dass Daten enthält, die für das Zusammenstellen des SQL-Befehls benötigt werden. Das SQL-Statementobjekt und SQL-Behle sind hier nicht erlaubt, da Extbase hier nicht weiß wie und wo es den LIMIT-Befehl einbauen soll.

as String Wie soll die Variable heißen, in der die reduzierten Objekte zur Verfügung gestellt werden sollen?


configuration Array Konfiguration der Seitennavigation

Konfiguration der Seitennavigation


itemsPerPage QueryResultInterface Wie viele Objekte sollen pro Seite angezeigt werden?

insertAbove Boolean Seitennavigator oberhalb anzeigen?

insertBelow Boolean Seitennavigator unterhalb anzeigen?

recordsLabel String Hier könnt Ihr einen eigenen Text einbinden, der den Schriftzug "Datensätze 1 - xy" überschreibt.

f:be.container

Zu allererst solltet Ihr Euch eine grundsätzliche Frage stellen: Willst Du etwas entwickeln ganz im

Stile von TYPO3 oder willst Du etwas völlig Eigenes bauen. Wenn Ihr Euch für etwas völlig Eigenes

entscheidet, dann braucht Ihr diesen ViewHelper überhaupt nicht. Bindet in diesem Falle Eure

benötigten StyleSheets und JavaScripte selbst ein.

Wenn Ihr allerdings etwas bauen wollt, dass sich an das TYPO3-Design anlehnt und möglichst

kompatibel sein soll, dann solltet Ihr diesen ViewHelper auf jeden Fall verwendet. Das was damals

zu Zeiten von MediumDoc und Co. eingebunden wurde, benötigt heute nur noch diesen Zweizeiler

mit knapp 10 Parametern.

Eigenschaften


pageTitle String BE-Module werden in einem Frame dargestellt, von daher macht ein Seitentitel wenig sind. Einfach leer lassen

enableJumpToUrl Boolean Lasst diesen Parameter eingeschaltet, wenn Ihr den ActionMenu-ViewHelper verwenden wollt, da dieser die entsprechenden JavaScripte dazu liefert.

enableClickMenu Boolean Wenn aktiviert, wird das JavaScript für die Contextmenüs eingebunden

loadPrototype Boolean Wenn aktiviert, wird das Prototype-JS-Framework eingebunden

loadScriptaculous Boolean Wenn aktiviert, wird das Zusatzpaket für Prototype eingebunden

scriptaculousModule String Ihr könnt hier noch weitere Module für das Scriptaculouspaket aktivieren


loadExtJs Boolean Wenn aktiviert, wird das ExtJS-Framework eingebunden

loadExtJsTheme Boolean Wenn aktiviert, werden Vorgaben für die Grafischen Elemente eingebunden.

extJsAdapter String Statt dem Standard ext-base kann hier ein anderer Adapter angegeben werden.

enableExtJsDebug Boolean Sollte nur aktiviert werden, wenn man auf Basis von ExtJS entwickelt.

addCssFile String Eine CSS-Datei einbinden

addJsFile String Eine JavaScript-Datei einbinden

loadJQuery Boolean Soll jQuery als JavaScript Framework eingebunden werden?

includeCssFiles Array Während addCssFile nur eine CSS-Datei einbinden kann, können mit dieser Eigenschaft mehrere CSS-Dateien eingebunden werden.

includeJsFiles Array Während addJsFile nur eine JS-Datei einbinden kann, können mit dieser Eigenschaft mehrere JS-Dateien eingebunden werden.

addJsInlineLabels Array Jeder Wert in diesem Array muss einem Key aus der locallang.xml/xlf entsprechen. Diese Übersetzung wird dann im Backend zur Verfügung gestellt.

f:be.pageInfo

Dieser ViewHelper zeigt das Icon der aktuellen Seite an mit der Information, um welche pid es sich

dabei handelt.

Eigenschaften


f:be.pagePath

Dieser ViewHelper zeigt den Pfad zur aktuell gewählten Seite an. Diese Information ist vor allem bei

sehr großen Webseiten nützlich, wenn Seiten eher über eine Suche gefunden werden. Dann ist es

schon mal schwierig herauszufinden, wo sich diese Seite im Wust der ganzen Navigationen und

Unterseiten im Seitenbaum überhaupt befindet.

Eigenschaften


f:be.tableList

Sehr geiles Teil. Was wir aus dem Modul Web->Liste kennen können wir nun selbst verwenden und

super einfach konfigurieren, wie die folgenden Beispiele zeigen.

Eigenschaften


tableName String Der Name der Tabelle

storagePid Integer Die Daten welcher Seite sollen angezeigt werden? Wenn nichts anderen angegeben wurde, werden die Datensätze der Seite angezeigt, die über persistence.storagePid angegeben wurde.

levels Integer Falls die Seite aus storagePid noch Unterordner enthält, könnt Ihr hier angeben wie viele Ebenen tiefer nach weiteren Datensätzen gesucht werden soll.

filter String Gebt hier ein Suchwort ein, nach dem Eure Datensätze gefiltert werden sollen.

recordsPerPage Integer Wie viele Datensätze dürfen maximal auf einer Seite angezeigt werden.

sortField String Nach welchem Feld sollen die gefundenen Datensätze sortiert werden

sortDescending Boolean Wenn aktiviert, dann werden die Datensätze rückwärts sortiert.

readOnly Boolean Wenn aktiviert, dann werden die Bearbeitungssymbole nicht mehr angezeigt.

enableClickMenu Boolean Wenn aktiviert, dann kann das Contextmenü verwendet werden

clickTitleMode String Auswahl von "edit", "info" und "show". Falls Ihr show auswählt, dann klappt das nur bei der Tabelle pages und tt_content. Normalerweise müsst Ihr immer erst über das Kontextmenü oder über ein anderes Modul in diese Bereich klicken. Nun reicht ein Klick auf den Titel des Datensatzes.

alternateBackgroundColors Boolean Wenn aktiviert, wechseln sich die Hintergrundfarben je Datenzeile ab.

Minimalistisches Beispiel

Dieses Beispiel zeigt die Tabelle tt_content mit den beiden Feldern header und bodytext. Die

Tabelle wird nur dann angezeigt wenn sich auf der Seite, die durch storagePid angegeben wurde

auch tatsächlich Datensätze dieser Tabelle befinden. Alle Backendmodule, die zumindest über den

extension_builder erzeugt wurden bringen ein Extensiontemplete mit, das auf der Rootseite

eingebunden werden sollte. Über den Konstanteneditor kann nun eine Seiten-UID eingetragen

werden, die als Fallback dienst, falls wie hier in unserem Beispiel keine storagePid angegeben

worden ist.

<f:be.tableList tableName="tt_content" fieldList="{0: 'header', 1:

'bodytext'}" />

Beispiel: Maximale Datensatzanzahl

Obwohl wir hier den Parameter recordsPerPage nicht angegeben haben, werden uns innerhalb des

Introductionpackage nur 100 Datensätz auf der ersten Seite angezeigt von etwas über 150. Denn

wenn dieser Parameter nicht angegeben wird, gilt erstens der Wert aus dem TCA

($TCA[TabellenName]['interface']['maxSingleDBListItems']) und wenn dieser nicht angegeben ist

100. Mit Hilfe von recordsPerPage ist es auch möglich mehr als 100 Datensätze anzeigen zu lassen.


'bodytext'}" storagePid="1" levels="5" />

Beispiel: Datensatz direkt anzeigen

Normalerweise muss man immer über das Modul Web->Anzeigen oder über das Kontextmenü

navigieren, um eine erste Preview seines gewählten Datensatzes zu erhalten. Viel einfacher geht

es, wenn man den Titel eines Datensatzes (Der Wert aus der ersten Spalte) mit dieser Möglichkeit

verlinkt. Hierfür gibt es den Parameter clickTitleMode, den Ihr auf "show" setzen müsst. Zusätzlich

habe ich in dieses Beispiel nach einen Wechselnden Hintergrund je Datenzeile implementiert.


'bodytext'}" storagePid="1" levels="5" alternateBackgroundColors="TRUE"

clickTitleMode="show" />

ViewHelper: Form

Link for german translation

http://docs.typo3.org/typo3cms/drafts/github/froemken/ExtbaseGuideDE/Fluid/ViewHelper/Form/

Button.html

f:form.button

Dieser ViewHelper erzeugt einen Button zum Absenden des Formulars.

http://docs.typo3.org/typo3cms/drafts/github/froemken/ExtbaseGuideDE/Fluid/ViewHelper/Form/Button.html

http://docs.typo3.org/typo3cms/drafts/github/froemken/ExtbaseGuideDE/Fluid/ViewHelper/Form/Button.html

Eigenschaften

Globale Eigenschaften für das HTML-Element


class String CSS-Klasse für dieses HTML-Element

dir String Die Textrichtung. Erlaubte Werte sind: ltr (links nach rechts) und rtl (rechts nach links)

id String Ein Bezeichner, der in dem Dokument ein HTML-Element eindeutig identifiziert

lang String Angabe der Sprache nach RFC 1766, die in diesem HTML-Element verwendet wird

style String Individuelle CSS-Stile, die nur für dieses HTML-Element gültig sein sollen

title String Ein Text, der beim berühren mit der Maus als Tooltip erscheinen soll

accesskey String Eine Tastenkombination, mit der dieses HTML-Element direkt angesprungen werden kann

tabindex Integer Gibt die TAB-Reihenfolge an

onclick String JavaScript Code, der bei Klick auf dieses HTML-Elemtent ausgeführt werden soll

Globale Eigenschaften für Formularelemente


name String Der Name für das Formularelement

value String Der Wert, der mit dem Abschicken des Formular übertragen werden soll


property String Anstatt mit name und value zu arbeiten, kann das Formularfeld mit einer Eigenschaft eines im f:form angegebenen Objektes verknüpft werden. Attribute name und value werden dann automatisch generiert.

Eigenschaften speziell für das HTML-Element


type String Gibt den Typ des Buttons an. Mögliche Werte sind: "button", "reset" oder "submit"

f:form.checkbox

Dieser ViewHelper erzeugt eine Checkbox.

Eigenschaften








title String Ein Text, der beim berühren mit der Maus als Tooltip


erscheinen soll










Eigenschaft Datentyp Beschreibung Standard

disabled String Die Checkbox wird deaktiviert angezeigt.

Eigenschaften speziell für diesen ViewHelper


checked Boolean Wenn aktiviert, dann gilt diese NULL


Checkbox als markiert.

Derzeit sind Checkboxen innerhalb von Fluid/Extbase noch eine echte Katastrophe. Es hat mich viel

Zeit gekostet eine Checkbox überhaupt ans Laufen zu bekommen, da sie ein leeres aber

vorhandenes Model erfordern, wenn sie mit Hilfe der Property-Eigenschaft an ein Objekt gebunden

werden:

No value found for key "Tx_Fluid_ViewHelpers_FormViewHelper->formObject"

Um diesen Fehler weg zu bekommen, darf das Objekt nicht NULL sein. In der entsprechenden

Action muss ein leeres Objekt erstellt werden. Könnte dann z.B. so aussehen (Auszug aus dem

extension_builder):

/**

* action new

*

* @param $newAuto

* @dontvalidate $newAuto

* @return void

*/

public function newAction(Tx_Sffluid_Domain_Model_Auto $newAuto = NULL) {

if ($newAuto == NULL) { // workaround for fluid bug ##5636

$newAuto = t3lib_div::makeInstance('Tx_Sffluid_Domain_Model_Auto');

}

$this->view->assign('newAuto', $newAuto);

}

Erst nach dieser Änderung erscheint überhaupt mal eine Checkbox.

Beispiel ohne property

Das Problem bei dieser Variante: Ihr müsst Euch selbst darum kümmern zu prüfen, ob die Checkbox

markiert ist oder nicht. Ihr müsst die Werte schon innerhalb Eures Controllers gesetzt haben und mit

Hilfe des Checked-Attributes zuweisen. Erlaubt ist nur TRUE oder FALSE bzw. 1 oder 0. Ihr müsst

hier auch die leeren eckigen Klammern setzen, damit die markierten Werte später als Array

(Mehrfachauswahl) übergeben werden können.

<f:form.checkbox name="myExtName[pizza][]" checked="{data.salami}"

value="Salami" />

<f:form.checkbox name="myExtName[pizza][]" checked="{data.hawaii}"

value="Hawaii" />

<f:form.checkbox name="myExtName[pizza][]" checked="{data.tonno}"

value="Tonno" />

Beispiel mit property

Damit Ihr dem Problem von oben entgehen könnt, bindet die Checkboxen an eine

Objekteigenschaft, die Ihr im f:form-ViewHelper hinterlegt habt:

<f:form.checkbox property="pizza" value="Salami" />

<f:form.checkbox property="pizza" value="Hawaii" />

<f:form.checkbox property="pizza" value="Tonno" />

Schaut schon eine ganze Ecke kürzer aus.

Beispiel Multiselect

Der extension_builder kann bis lang nur EINE Checkbox erstellen. Nämlich dann, wenn der Typ

"Boolean" gewählt wurde. Wollt Ihr aber wie in den oberen Beispielen mehrere Checkboxen

gleichzeitig setzen, dann müsst Ihr Euch vom Typ "Boolean" verabschieden. Mit dem alten

kickstarter von TYPO3 können bis zu 10 gruppierte Checkboxen erstellt werden in dem die

Checkboxen binär in der Datenbank abgespeichert wurden. Jede Stelle dieser "Zahl" spiegelte eine

Checkbox wieder. 0 für deaktiviert. 1 für aktiviert. Ich will Euch heute eine Möglichkeit zeigen, wie Ihr

über 10 Checkboxen abspeichern könnt.

Innerhalb des extension_builder wählt Ihr nun den Typ "Text" aus. Damit wird in der Datenbank eine

Spalte erstellt, die etwas über 65.000 Zeichen abspeichern kann. Vergesst nicht über Database

Analyser den neuen Typ in die Datenbank zu schreiben.

Das Formular bleibt ähnlich den oberen Beispielen:

<f:form.checkbox property="farbe" value="gelb" />&nbsp:gelb<br />

<f:form.checkbox property="farbe" value="braun" />&nbsp:braun<br />

<f:form.checkbox property="farbe" value="blau" />&nbsp:blau<br />

Da Ihr ein Array nicht in der Datenbank abspeichern könnt, müsst Ihr das Array, das von den

Checkboxen kommt in einen String konvertieren. Das könnt Ihr zum Beispiel mit serialize() und

unserialize() realisieren. Bearbeitet dazu in Eurem Model den getter und setter für die Checkboxen:

/**

* @var string

*/

protected $farbe;

/**

* @return array $farbe

*/

public function getFarbe() {

return unserialize($this->farbe);

}

/**

* @param array $farbe

* @return void

*/

public function setFarbe(array $farbe) {

$this->farbe = serialize($farbe);

}

und fügt einen Konstruktor im Model hinzu:

/**

* initializes this object

*

* @param string $marke

* @param string $beschreibung

* @param boolean $unfall

* @param array $farbe

*/

public function __construct($marke = '', $beschreibung = '', $unfall =

false, array $farbe = array()) {

$this->setMarke($marke);

$this->setBeschreibung($beschreibung);

$this->setUnfall($unfall);

$this->setFarbe($farbe);

}

Nur mit diesem Konstruktor wird Eure Gruppe von Checkboxen überhaupt zur Mehrfachauswahl.

Schaut Euch auch den Quellcode an:

<input type="checkbox" name="tx_sffluid_sffluid[newAuto][farbe][]"

value="gelb" /><br /> <input type="checkbox"

name="tx_sffluid_sffluid[newAuto][farbe][]" value="braun" /><br /> <input

type="checkbox" name="tx_sffluid_sffluid[newAuto][farbe][]" value="blau"

/><br />

An Hand der leeren eckigen Klammern kann man schön erkennen, dass nun die Mehrfachauswahl

möglich ist. Auch das Bearbeiten vorhandener Datensätze klappt mit dieser Methode problemlos.

Einziger Nachteil: Im Backend lassen sich die Checkboxen nicht mehr setzen.

f:form.errors

Deprecated. Please use ValidationResults-ViewHelper instead.

f:form.hidden

Mit diesem ViewHelper erstellst Du ein verstecktes Feld. Das ist schonmal nützlich, um Datensatz-

UIDs abzulegen, die der Webseitenbesucher nicht zu sehen braucht, aber für Dich wichtig sind,

wenn es darum geht, die eingegebenen Daten einem Datensatz zuzuordnen, um ihn z.B. zu

speichern.

Eigenschaften
















property String Anstatt mit name und value zu arbeiten, kann das Formularfeld mit einer Eigenschaft eines im f:form angegebenen Objektes verknüpft werden.


Attribute name und value werden dann automatisch generiert.

Beispiel

<f:form.hidden name="myExtName[ttAddressUid]" value="15" />

oder

.<f:form.hidden property="ttAddressUid" value="15" />

f:form.password

Mit diesem ViewHelper erstellst Du ein Textfeld dessen Inhalt nicht lesbar ist. Alle Zeichen werden

sofort in Sternchen umgewandelt.

Eigenschaften







style String Individuelle CSS-Stile, die nur für dieses HTML-Element


gültig sein sollen










Beispiel

<f:form.password name="myExtName[password]" />

oder

<f:form.password property="password" />

f:form.radio

Mit diesem ViewHelper erstellst Du einen Radiobutton. Normalerweise tauchen diese immer in

Gruppen auf und bieten dem Besucher an sich für EINE Möglichkeit zu entscheiden. Eine

Mehrfachauswahl wie bei den Checkboxen ist hier nicht möglich.

Eigenschaften



















checked Boolean Wenn aktiviert, dann gilt diese Checkbox als markiert.

NULL

Beispiel

<f:form.radio name="myExtName[age]" value="1-10" />



oder

<f:form.radio property="age" value="1-10" />



f:form.select

Mit diesem ViewHelper erstellt Ihr eine Selectbox.

Eigenschaften




















multiple String Wenn aktiviert, dann können mehrere Optionen gleichzeitig gewählt werden. In diesem Falle macht es Sinn den Wert size auf >=3 zu setzen.

size String Die Größe der Selectbox. Wie viele Optionen sollen gleichzeit angezeigt werden?

disabled String Wenn aktiviert, dann ist die Selectbox beim Laen des Formulars deaktiviert.



options Array Welche Optionen sollen in der Auswahlliste erscheinen.

optionValueField String Wenn options Objekte enthält, dann könnt Ihr hier angeben welche Eigenschaft als zu übergebenden Wert verwendet werden soll

optionLabelField String Wenn options Objekte enthält, dann könnt Ihr hier angeben welche Eigenschaft als anzuzeigender Titel verwendet werden soll


sortByOptionLabel Boolean Soll nach dem anzuzeigenden Titel sortiert werden?

selectAllByDefault Boolean Damit alle Optionen direkt vorausgewählt sind, muss das Attribut multiple und die size größer 1 gesetzt sein.

errorClass String Eine CSS-Klasse, die gesetzt werden soll, wenn der Validator für dieses Feld einen Fehler gemeldet hat.

prependOptionLabel String Erzeugt eine weitere Option ganz am Anfang der Auflistung mit dem angegebenen Text.

prependOptionValue String Erzeugt eine weitere Option ganz am Anfang der Auflistung mit dem angegebenen Wert.

Tip

Die Eigenschaften optionValueField und optionLabelField funktionieren nur, wenn es sich bei den

Daten für eine Option, um ein Objekt handelt.

Tip

Die Eigenschaften selectAllByDefault klappt nur, wenn auch die Eigenschaft multiple gesetzt ist.

Beispiel

<f:form.select name="myExtName[country]" options="{data.countries}" />

oder

<f:form.select property="country" options="{data.countries}" />

f:form.submit

Dieser ViewHelper besitzt keine eigenen Parameter. Er bindet eine Schaltfläche ein die nach dem

Anklicken das Formular absendet und somit die eingegebenen Formulardaten an den Server

übermittelt

Eigenschaften



Beispiel

<f:form.submit value="Absenden" />

f:form.textarea

Mit diesem ViewHelper erstellst Du ein Memofeld. Memofelder könnt Ihr für die Eingabe mehrzeiliger

Texte verwenden. Gut geeignet z.B. für das Nachrichtenfeld im Kontaktformular.

Eigenschaften


















Beispiele:

<f:form.textarea name="myExtName[nachricht]" />

oder

<f:form.textarea property="nachricht" />

f:form.textfield

Mit diesem ViewHelper erstellt Ihr ein Textfeld.

Eigenschaften





required Boolean Wenn aktiviert, dann handelt es sich um ein Pflichtfeld

type String Als Alternative gibt es noch email, url

placeholder String Ein beliebiger Text, der verschwindet, sobald in dieses Feld reingeklickt wird.

Beispiel

<f:form.textfield name="myExtName[strasse]" />

oder

<f:form.textfield property="strasse" />

f:form.uploads

Mit diesem ViewHelper erstellst Du ein Uploadfeld, um Dateien an den Server zu senden.

Eigenschaften



Beispiel

<f:form.upload name="myExtName[image]" />

oder

<f:form.upload property="image" />

f:form.validationResults

ViewHelper: Format

f:format.bytes

Dieser ViewHelper wandelt eine Bytes-Angabe (Integer) in ein lesbares Format um.

Eigenschaften


value Integer Die Bytes als Integer, die konvertiert werden sollen

decimals Integer Die Anzahl Zahlen, die nach dem Dezimalpunkt noch angezeigt werden sollen

decimalSeparator String Das Zeichen, das als Dezimaltrenner verwendet werden soll

thousandsSeparator String Das Zeichen, das als Tausendertrenner verwendet werden soll

Beispiel mit Text:

<f:format.bytes>{fileSize}</f:format.bytes>

wird zu

123 KB

f:format.cdata

Dieser ViewHelper ummantelt einen Text oder eine Variable mit CDATA. Das wird gerade dann

interessant, wenn Ihr z.B. eine RSS-Ausgabe mit Hilfe von Extbase und Fluid programmiert. Da

solche Ausgaben auf XML basieren, ist es wichtig HTML-Tags innerhalb dieser XML-Ausgabe zu

maskieren.

Eigenschaften


value String Der Text, der mit CDATA ummantelt werden soll

NULL

Beispiel mit Text:

<f:format.cdata>Text, der ummantelt werden soll</f:format.cdata>

wird zu

<![CDATA[Text, der ummantelt werden soll]]>

Beispiel mit Variablen:

Als Beispiel übergeben wir etwas untypisch HTML und Text vom Controller aus:

$this->view->assign('variable', '<strong>Stefan</strong>');

Im Fluidtemplate wickeln wir die Variable in CDATA ein:

<f:format.cdata>{variable}, die ummantelt werden soll</f:format.cdata>

Als Ergebnis erhaltet ihr:

<![CDATA[<strong>Stefan</strong>, die ummantelt werden soll]]>

Important

Wie Ihr im Ergebnis sehen könnt, wird die Variable 1zu1 ausgegeben. Der Inhalt wird nicht durch

htmlspecialchars geschleust oder sonst in irgendeiner Form maskiert. Bitte beachtet diese

Vorgehensweise gerade in Hinblick auf XSS-Attacken.

f:format.crop

Schneidet Text zurecht

Eigenschaften


maxCharacters Integer Anzahl Zeichen nach denen abgeschnitten werden soll.

append String Ein Text oder eine Anzahl Zeichen, die dem Text angefügt werden soll.

respectWordBoundaries Boolean Solange dieser Wert aktiviert ist und ein Schnitt innerhalb eines Wortes geschehen würde, wird dieser Schnitt VOR dem Wort ausgeführt, um das Wort nicht zu stückeln. Mit FALSE zwingt man den ViewHelper zum Trennen IM Wort.

respectHtml Boolean Bei TRUE werden HTML-Tags berücksichtigt. Bei FALSE kann es vorkommen, dass die Trennung innerhalb des HTML-Tag statt findet.

Beispiel

<f:format.crop maxCharacters="14">Diesen Text werden wir jetzt

zerschnibbeln</f:format.crop>

Normalerweise würde dieser Befehl das Wort "werden" auftrennen. Aber dadurch dass

"respectWordBoundaries" per default gesetzt ist erhalten wir diese Ausgabe:

Diesen Text...

Beispiel: Trennung im Wort

<f:format.crop maxCharacters="14" respectWordBoundaries="FALSE">Diesen

Text werden wir jetzt zerschnibbeln</f:format.crop>

ergibt

Diesen Text we...

Beispiel mit respectHtml = FALSE

<f:format.crop maxCharacters="25" respectHtml="FALSE"><p>Diesen Text

<strong>werden</strong> wir jetzt zerschnibbeln</p></f:format.crop>

ergibt

Diesen Text...

Wie oben schon erwähnt, liegt das daran, dass nun auch alle Buchstaben der HTML-Tags

mitgezählt werden.

f:format.currency

Mit diesem ViewHelper könnt Ihr Zahlen als Währung darstellen lassen.

Eigenschaften


currencySign String Das Währungskennzeichen wie $ oder €. Dieses Zeichen wird immer hinter der Währung angezeigt.

decimalSeperator String Welcher Zeichen soll für die Trennung von Euro und Cent verwendet werden. Dezimaltrenner.

thousandsSeperator String Welches Zeichen soll als Tausendertrennzeichen verwendet werden.

prependCurrency Boolean Soll das Währungssymbol VOR die Währung gesetzt werden?

separateCurrency Boolean Soll das Währungssymbol durch ein Leerzeichen von


der Währung getrennt werden?

decimals Integer Wie viele Stellen nach dem Komma sollen angezeigt werden?

Zwei wichtige Informationen:

Übergebt Ihr an diesen ViewHelper einen leeren Text, dann benötigt die in diesem ViewHelper

befindliche Funktion number_format knapp 23 Millisekunden. Liefert Ihr dieser Funktion stattdessen

direkt ein 0.00 ist die Funktion in 1-2 Millisekunden durch. Wichtig wenn Ihr mit langen Listen

arbeitet.

Ihr dürft diesem ViewHelper keine Zahlen mit einem Komma als Dezimaltrenner mitgeben. Siehe

Beispiel.

Beispiel

<f:format.currency currencySign="$" decimalSeparator="."

thousandsSeparator=",">1122334455.66</f:format.currency>

ergibt: 1,122,334,455.66 $

Beispiel mit nicht float kompatiblen Zahlen

<f:format.currency currencySign="$" decimalSeparator="."

thousandsSeparator=",">1122334455,66</f:format.currency>

ergibt: 1,122,334,455.00 $

f:format.date

Konvertiert einen Timestamp in einen lesbaren Datumswert.

Eigenschaften


date Mixed Entweder ein Objekt vom Typ DateTime oder eine Text/Datum, das in ein DateTime-Objekt konvertiert werden kann. Z.B.


17.01.1979 geht. 17.01.79 geht nicht.

format String Wie soll das Datum ausgegeben werden?

So schön wie das mit den ganzen DateTime-Objekten ist, prüft die Wert bitte ganz genau. Besucht

Online-Timestamp-Konverter oder gleicht die Wert mit denen in Eurer Datenbank ab. So steht in der

Doku z.B. Wenn Ihr einen Timestamp in ein DateTime-Objekt konvertieren wollt, dann fügt einfach

ein @-Zeichen vorne an. Ich hoffe ich erzähl jetzt nichts Falsches, aber dieser Timestamp wird nach

dem RFC2822 konvertiert und das ist Zeitzone 0. In Deutschland würden wir dem resultierenden

DateTimewert also immer hinterherhinken. Die DateTime-Objekt sollten besser nach ISO8601

konvertiert werden. Dann klappts auch mit der richtigen Zeitzone. Ich für meinen Teil hab mir einen

eigenen ViewHelper geschrieben der sich daran hält und auch Extbase arbeitet intern mit diesem

ISO-Format. Siehe:

DataMapper->mapDateTime()

Zitat: return new DateTime(date('c', $timestamp));

Warum das in den ViewHelper noch nicht eingeflossen ist, kann ich mir nicht erklären.

Beispiel

<f:format.date date="17.01.1979" format="d/m/y" />

Beispiel Timestamp

<f:format.date format="d.m.Y">@1334439765</f:format.date>

Wie schon gesagt: Je nach Land/Kontinent bitte mit Vorsicht zu behandeln.

f:format.html

Wenn Ihr ein Modell für die Tabelle tt_content erstellt habt, dann erhaltet Ihr im Frontend die nackten

Daten, wie sie aus der Datenbank kommen. Damit die Daten wieder so aussehen, wie wenn Ihr sie

mit styles.content.get ausgebt, hilft Euch dieser ViewHelper weiter. Dieser schnappt sich das

Durcheinander und schleift es einmal komplett durch den TS-Objektpfad lib.parseFunc_RTE.

Danach sollten Eure Daten wieder wie frisch aufbereitet aussehen.

Eigenschaften


parseFuncTSPath String Formatiere einen Text anhand der TS-Konfiguration, die sich hinter dem angegebenen TS-Objektpfad befindet

Beispiel

<f:format.html>{content.bodytext}</f:format.html>

Beispiel/Trick mit abgeschalteten htmlspecialchars

<f:format.html parseFuncTSPath="lib.parseFunc">{variable}</f:format.html>

f:format.htmlentities

Mit diesem ViewHelper könnt Ihr die htmlentities Funktion von PHP auf einen Text anwenden.

Eigenschaften


value String Der Text der dekodiert werden soll

keepQuotes Boolean Sollen einfache und doppelte Anführungsstriche auch dekodiert werden?

encoding String Wir sind hier im Bereich TYPO3 und da sollte der Zeichensatz auf UTF-8 und nix anderes stehen. Sollte wiedererwartend ein anderer Zeichensatz gewünscht sein, kann dieser hier angegeben werden. Siehe auch Info auf php.net.

doubleEncode Boolean Bei TRUE (Standard) wird alles kodiert. Bei FALSE, werden bereits kodierte Werte nicht erneut kodiert.

Beispiel

<f:format.htmlentities>Müller & Breuer</f:format.htmlentities>

Müller & Breuer

f:format.htmlentitiesDecode

htmlEntityDecode

Eigenschaften


value String Der Text der dekodiert werden soll

keepQuotes Boolean Sollen einfache und doppelte Anführungsstriche auch dekodiert werden?

encoding String Wir sind hier im Bereich TYPO3 und da sollte der Zeichensatz auf UTF-8 und nix anderes stehen. Sollte wiedererwartend ein anderer Zeichensatz gewünscht sein, kann dieser hier angegeben werden. Siehe auch Info auf php.net.

Beispiel

<p><f:format.htmlentitiesDecode>Müller &

Breuer</f:format.htmlentitiesDecode>

Im Quelltext sieht man wieder ein richtig sauberes: "Müller & Breuer".

f:format.htmlspecialchars

Wenn Ihr mit Userdaten (Formulardaten) arbeitet, dann sollte dieser Inhalt zuallererst durch diesen

ViewHelper. Denn dieser wandelt alle spitzen Klammern von HTML-Tags in ein nicht mehr

interprtierbares Format um. Die HTML-Tags können also keinen Schaden mehr verursachen und

werden iom FE angezeigt statt verarbeitet.

Eigenschaften


value String Der Text der formatiert werden soll


keepQuotes Boolean Sollen einfache und doppelte Anführungszeichen auch formatiert werden

encoding String

doubleEncode Boolean Mit jedem Aufruf diesen ViewHelpers wird ein bereits htmlspecialchared Text immer und immer wieder gehtmlspecialchared. Auf & wird dann & dann &, dann &amp; und so weiter. Um das zu verhindert, kann dieser Parameter auf FALSE gesetzt werden.

Beispiel

<f:format.htmlspecialchars><p><strong>fetter</strong>

Text</p></f:format.htmlspecialchars>

f:format.nl2br

Dieser ViewHelper besitzt keine Parameter. Den umzuwandelnden Inhalt bezieht er sich aus dem

Text zwischen den Tags. Sinnvoll wird dieser ViewHelper beim Anzeigen von Inhalten aus

TEXTAREA-Tags. Denn hier wurden die Zeilenumbrüche mit ENTER (CHR(10)) realisiert. HTML

sind diese Umbrüche aber völlig egal und würde den Text einfach hintereinander weg anzeigen. Um

das zu verhindern könnt Ihr diesen ViewHelper verwender. Er konvertiert alle CHR(10)-

Zeilenumbrüche in <br />-Tags und so werden Zeilenumbrüche auch im Browser wieder richtig

dargestellt.

Eigenschaften


Beispiel

<f:format.nl2br>Text

mit

Zeilenumbrüchen</f:format.nl2br>

ergibt

Text<br />mit<br />Zeilenumbrüchen

f:format.number

Mit diesem ViewHelper könnt Ihr Zahlen formatieren. Er arbeitet ähnlich dem f:format.currency-

ViewHelper

Eigenschaften


decimals Integer Wie viele Nachkommastellen dürfen angezeigt werden.

decimalSeperator String Welcher Zeichen soll für die Trennung von Euro und Cent verwendet werden. Dezimaltrenner.

thousandsSeperator String Welches Zeichen soll als Tausendertrennzeichen verwendet werden.

Beispiel

<f:format.number decimals="3" decimalSeparator="."

thousandsSeparator=",">1122334455.667788</f:format.number>

ergibt: 1,122,334,455.668. Wie Ihr seht wird sogar automatisch aufgerundet.

f:format.padding

Padding

Eigenschaften


padLength Integer Wie viel Zeichen lang darf der Text inkl. der hinzugefügten Abstandszeichen maximal werden

padString String Welches Zeichen soll als Abstand dienen


padType String Wo sollen die Abstandszeichen eingefügt werden. Zur Auswahl steht right, left und both

Beispiel zur Funktionsweise

<p><f:format.padding padLength="10" padString="-

=">TYPO3</f:format.padding>ist cool</p>

<p><f:format.padding padLength="10"

padString="#">Stefan</f:format.padding>ist cool</p>

<p><f:format.padding padLength="10" padString="

">Ich</f:format.padding>bin cool</p>

In diesem Beispiel wird das angegebene Zeichen oder die Zeichen solange wiederholt, bis das

Maximum an Zeichen erfüllt ist. Je nach Zeichensatz macht diese Darstellung wenig Sinn. Denn wie

Ihr seht beginnen die letzten beiden Wörter je Zeile immer an einer unterschiedlichen Stelle.

Beispiel mit sinnvoller Einrückung

<pre><f:format.padding padLength="10" padString="

">TYPO3</f:format.padding>ist cool<br />

<f:format.padding padLength="10" padString="

">Stefan</f:format.padding>ist cool<br />

<f:format.padding padLength="10" padString=" ">Ich</f:format.padding>bin

cool</pre>

Hier nahezu das gleiche Beispiel wie oben. Allerdings fangen die letzten beiden Wörter je Zeile nun

immer an der gleichen Position an. Mit Hilfe diesen ViewHelpers könnte man also so eine Art

Tabulator erstellen.

f:format.printf

Mit diesem ViewHelper können Platzhalter in einem Text mit den Werten auf dem Array ersetzt

werden.

Eigenschaften


arguments Array Gib hier Werte in Arraynotation ein, die die Platzhalter in dem Text, der sich zwischen den Tags befindet, ersetzt.

Beispiel

<f:format.printf arguments="{0: 'Stefan', 1: 2, 2: '4'}">%1$s hat eine

%3$d-seitige Dokumentation geschrieben und %2$d Tage dafür

gebraucht.</f:format.printf>

Mit %1, %2 und %3 wird der jeweilige Wert aus dem Array geholt. Da es unterschiedliche

Datentypen gibt, müssen wir jedem Wert noch mitteilen, um was für einen Datentyp es sich handelt.

Dabei steht $s für string also Text. $d für einen Zahlenwert, der auch ein Vorzeichen enthalten darf

und wie Ihr evtl. schon gesehen habt, habe ich die Zahl 4 als Text deklariert, gebe sie aber als Typ

Integer an den Text weiter. Weitere Infos auf php.net

Wenn dieser ViewHelper überhaupt nicht angezeigt wird, dann habt Ihr entweder einen Fehler in

Eurem Array oder Ihr habe die Typdefinition der Variablen wie $s oder $d vergessen mit

anzugeben.Parameter

f:format.raw

f:format.rawworks since 1.4 Es gibt viele ViewHelper, die Inhalte vor der Ausgabe durch

htmlspecialchars und anderen Methoden und Funktionen schleusen. Dies zu verhindern stellt auf

jeden Fall ein Sicherheitsrisiko dar, kann aber mit diesem ViewHelper erreicht werden. Ich denke

gerade im Bereich von Formulardaten kann dieser ViewHelper evtl. Verwendung finden.

Eigenschaften


value Mixed Der Text, der unangetastet/unverändert ausgegeben werden soll

Beispiel

<f:format.raw value="{formData.nachricht}" />

f:format.stripTags

Dieser ViewHelper entfernt sämtliche HTML-Tags aus einem Text.

Eigenschaften


value String Der Text aus dem die HTML-Tags entfernt werden sollen

Beispiel

<f:format.stripTags>Ein <strong>fetter</strong> Text mit einigen <span

style="color: blue;">bunten</span> HTML-Tags.</f:format.stripTags>

f:format.urlencode

In Texten und Firmennamen kommen immer wieder Sonderzeichen wie @ & oder % vor. Diese

Zeichen sind nicht URL-sicher und sollten vor der Übermittlung durch diesen ViewHelper geschleust

werden.

Eigenschaften


value String Der Text, der für die Übergabe per Link vorbereitet werden soll

Beispiel

<f:format.urlencode>Text mit ein npaar Sonderzeichen, die für die URL

entsprechend maskiert werden müssen: @+%/</f:format.urlencode>

Ergebnis:

Text%20mit%20ein%20npaar%20Sonderzeichen%2C%20die%20f%C3%BCr%20die%20URL

%20entsprechend%20maskiert%20werden%20m%C3%BCssen%3A%20%40%2B%25%2F

ViewHelper: Link¶

f:link.action

Dieser ViewHelper erstellt einen Link zu einer anderen aufzurufenden Action

Eigenschaften











http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Link/Index.html#viewhelper-link





name String Der name des Links

rel String Gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an

rev String Gibt die Beziehung zwischen dem verknüpften Dokument und dem aktuellen Dokument an

target String In welchem Fenster soll der Link geöffnet werden?



action String Auf welche Actionmethode soll der Link zeigen

arguments Array Welche Argumente/Parameter sollen dem Link angehängt werden

controller String Auf welchen Controller soll der Link zeigen

extensionName String Auf welchen Controller und/oder Action welcher Extension soll der Link zeigen

pluginName String Auf welchen Controller und/oder Action welchen Plugins soll der Link zeigen

pageUid Integer Auf welche Seiten-UID soll verlinkt werden


pageType Integer Auf welche Seitentyp ID soll verlinkt werden.

noCache Boolean Verhindert das Caching der aufzurufenden Seite

noCacheHash Boolean Verhindert, dass der cHash-Parameter nicht mit an die URL angehangen wird.

section String Auf welchen Anker soll die Zielseite springen (#anker)

format String Gibt an um welches Format es sich bei der Zielseite handelt. Alternativ gibt es noch "xml"

linkAccessRestrictedPages Boolean Normalerweise werden Links auf geschützte Seiten nicht erzeugt. Hier mit kann man die Linkgeneration erzwingen.

additionalParams Array Fügt weitere Parameter der Zielseite an. Im Gegensatz zu arguments, können hiermit Variablen hinzugefügt werden die nicht mit dem Extensionnamen geprefixed werden.

absolute Boolean Nach Aktivierung wird der Zeilseite noch der Domainname und Pfad vorangestellt.

addQueryString Boolean Falls der aktuellen Seite bereits Parameter über die URL mitgegeben wurden, könnt Ihr hier nun entscheiden, ob diese Parameter auch mit auf die Zielseite übergeben werden.

argumentsToBeExcludedFromQueryString Array Falls Ihr addQueryString aktiviert habt, aber einen oder zwei bestimmte Parameter wieder entfernen wollt, dann tragt Ihr hier diese Parameter ein.

Beispiel

<f:link.action action="show">Zeige Details</f:link.action>

f:link.email

Mit diesem ViewHelper erstellt Ihr einen Link auf eine E-Mail-Adresse. Falls Ihr mit TypoScript im

Bereich "config" Angaben zum Verschlüsseln der E-Mail-Adresse gemacht habt, so werden diese

Einstellungen auch hier angewendet.

Eigenschaften
















rev String Gibt die Beziehung zwischen dem verknüpften Dokument und dem aktuellen Dokument an




email String Die zu verlinkende E-Mail-Adresse

Beispiel

<f:link.email email="[email protected]" />

f:link.external

Dieser ViewHelper erstellt einen Link zu einer externen Seite.

Tip

Wenn Ihr bei uri einen vollständigen Link angebt, also inkl. http:// oder ftp://, dann braucht Ihr

defaultScheme nicht zu setzen.

Eigenschaften
















rev String Gibt die Beziehung zwischen dem verknüpften


Dokument und dem aktuellen Dokument an




uri String Die URL zu der externen Zielseite

defaultScheme String Hier sind alle gültigen Schemas für Links erlaubt wie z.B. ftp oder https

Beispiel

<f:link.external uri="www.example.com">Externer Link zu meiner

Seite</f:link.external>

f:link.page

Dieser ViewHelper erstellt einen Link zu einer anderen Seiten-UID

Eigenschaften




dir String Die Textrichtung. Erlaubte Werte sind: ltr (links nach


rechts) und rtl (rechts nach links)














pageUid Integer|NULL Auf welche Seiten-UID soll verlinkt werden










argumentsToBeExcludedFromQueryString Array Falls Ihr addQueryString aktiviert habt, aber einen oder zwei bestimmte Parameter wieder entfernen wollt, dann tragt Ihr hier diese Parameter ein.

Beispiel

<f:link.page pageUid="134">Linkname für die Seite 134</f:link.page>

ViewHelper: Security¶

http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Security/Index.html#viewhelper-security

f:security.ifAuthenticated

Eigenschaften

f:security.ifHasRole

Eigenschaften

ViewHelper: Uri

f:uri.action

Dieser ViewHelper erstellt einen Link zu einer anderen aufzurufenden Action

Eigenschaften


action String Auf welche Actionmethode soll der Link zeigen

arguments Array Welche Argumente/Parameter sollen dem Link angehängt werden

controller String Auf welchen Controller soll der Link zeigen

extensionName String Auf welchen Controller und/oder Action welcher Extension soll der Link zeigen

pluginName String Auf welchen Controller und/oder Action welchen Plugins soll der Link zeigen

pageUid Integer Auf welche Seiten-UID soll verlinkt werden





format String Gibt an um welches Format es sich bei der Zielseite handelt. Alternativ gibt es noch "xml"






argumentsToBeExcludedFromQueryString

Array Falls Ihr addQueryString aktiviert habt, aber einen oder zwei bestimmte Parameter wieder entfernen wollt, dann tragt Ihr hier diese Parameter ein.

Beispiel

<f:link.action action="show">Zeige Details</f:link.action>

f:uri.email

Mit diesem ViewHelper erstellt Ihr einen Link auf eine E-Mail-Adresse. Falls Ihr mit TypoScript im

Bereich "config" Angaben zum Verschlüsseln der E-Mail-Adresse gemacht habt, so werden diese

Einstellungen auch hier angewendet.

Eigenschaften


email String Die zu verlinkende E-Mail-Adresse

Beispiel

<f:link.email email="[email protected]" />

f:uri.external

Dieser ViewHelper erstellt einen Link zu einer externen Seite.

Tip

Wenn Ihr bei uri einen vollständigen Link angebt, also inkl http:// oder ftp://, dann braucht Ihr

defaultScheme nicht zu setzen.

Eigenschaften


uri String Die URL zu der externen Zielseite

defaultScheme String Hier sind alle gültigen Schemas für Links erlaubt wie z.B. ftp oder https

Beispiel

<f:link.external uri="www.example.com">Externer Link zu meiner Seite</f:link.external>

f:uri.image

Eigenschaften


src String Pfad und Dateiname zum Bild. Der Pfad muss vom Webroot aus angegeben werden. Konstanten wie EXT: können verwendet werden.

width String Breite des Bildes. Neben einem numerischen Wert können hier auch Angaben mit "c" oder "m" verwendet werden, um das Bild entsprechend zu skalieren.

height String Höhe des Bildes. Neben einem numerischen Wert können hier auch Angaben mit "c" oder "m" verwendet werden, um das Bild entsprechend zu skalieren.

minWidth Integer Minimale Breite des Bildes. Falls das Bild kleiner ist, wird es automatisch auf diese Breite vergrößert. Hinweis: Falls Ihr im Installtool [GFX][im_noScaleUp] aktiviert habt, wird das Bild nicht vergrößert.

minHeight Integer Minimale Höhe des Bildes. Falls das Bild kleiner ist, wird es automatisch auf diese


Höhe vergrößert. Hinweis: Falls Ihr im Installtool [GFX][im_noScaleUp] aktiviert habt, wird das Bild nicht vergrößert.

maxWidth Integer Maximale Breite des Bildes. Falls das Bild größer ist, wird es automatisch auf diese Breite verkleinert.

maxHeight Integer Maximale Höhe des Bildes. Falls das Bild größer ist, wird es automatisch auf diese Breite verkleinert.

treatIdAsReference Boolean Wenn TRUE, dann wird die Angabe bei src als sys_file_reference interpretiert. FALSE als sys_file oder Dateipfad

f:uri.page

Eigenschaften


pageUid Integer|NULL Auf welche Seiten-UID soll verlinkt werden









argumentsToBeExcludedFromQueryString

Array Falls Ihr addQueryString aktiviert habt, aber einen oder zwei bestimmte Parameter wieder entfernen wollt, dann tragt Ihr hier diese Parameter ein.

f:uri.resource

Eigenschaften


path String Der Pfad inkl. Dateiname zu der Datei. Die Angabe erfolgt relativ zum Resource-Verzeichnis der aktuellen Extension.

extensionName String Falls eine Datei einer anderen Extension benötigt wird, kann hier der entsprechende Extensionname angegeben werden. Auch hier muss die Pfad relativ zum Resourceverzeichnis angegeben werden.

absolute Boolean Wenn dieser Wert auf TRUE gesetzt wird, wird ein absoluter Pfad zurück geliefert.

ViewHelper: Widgets¶

f:widget.autocomplete

f:widget.link

Eigenschaften









http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Widget/Index.html#viewhelper-widgets





f:widget.link

Eigenschaften













f:widget.paginate

f:widget.uri

f:alias

Dieser ViewHelper erstellt Variablen, die Ihr im weiteren Verlauf wieder verwenden könnt. Ihr könnt

den Variablen entweder einen eigenen statischen Wert oder aber dynamische Werte aus Objekten

und anderen ViewHelpern zuweisen.

Eigenschaften


map Array Der Key gibt den Namen der neuen Variable an, während der Value den Inhalt wieder spiegelt.

Beispiel für statische Werte

<f:alias map="{firstName: 'Stefan', lastName: 'Froemken'}">

<p>Hello, my name is {firstName} {lastName}</p>

</f:alias>

Ausgabe

<p>Hello, my name is Stefan Froemken</p>

Beispiel für Ergebnisse aus ViewHelpern

<f:alias map="{amount: '{addresses->f:count()}'}">

<p>There are {amount} records in database</p>

</f:alias>

Ausgabe

<p>There are 23 records in database</p>

Beispiel für Werte aus Objekten

<f:alias map="{firstName: address.firstName, lastName: address.lastName}">

<p>Hello, my name is {firstName} {lastName}</p>

</f:alias>

Ausgabe

<p>Hello, my name is Stefan Froemken</p>

f:base

Dieser ViewHelper bindet den base-Tag in Euer HTML-Template ein.

Eigenschaften


Beispiel

<f:base />

Ausgabe

<base href="http://introgit:8080/">

Tip

http://de.selfhtml.org/html/kopfdaten/basis.htm

Dieser ViewHelper macht nur dann Sinn, wenn Ihr Euer Webseitentemplate (inkl. Kopfbereich

<head>) mit Hilfe von Fluid aufbaut. Wenn kein <head>-Bereich vorhanden ist, wird dieser HTML-

Tag im Bodybereich der Webseite eingebunden, wo er nicht hingehört.

f:case

Dieser ViewHelper ist Bestandteil des f:switch.ViewHelpers. Wenn der Wert aus value dem Wert aus

f:switch übereinstimmt dann wird der enthaltene Text verarbeitet und ausgegeben.

Eigenschaften



value Mixed Gebt hier den Wert an, der vom f:switch ViewHelper als Entscheidungskriterium zur Vefügung gestellt werden könnte.

Beispiel

Beispiele zur Verwendung des f:case-ViewHelpers findet Ihr im f:switch-ViewHelper

f:cObject

Dieser ViewHelper stellt eine Verbindung zu TypoScript her. Übergebt einen TypoScript Objekt Pfad

(lib.*) und lasst TypoScript die Arbeit machen.

Eigenschaften


typoscriptObjectPath String Gebt hier den TypoScript Objektpfad an

data Mixed Gebt hier den TypoScript Objektpfad an

NULL

currentValueKey String Gebt hier den TypoScript Objektpfad an

NULL

Einfaches Beispiel

TypoScript

lib.fluidText = TEXT

lib.fluidText {

value = Text from TypoScript

}

Fluid-Template

<p><f:cObject typoscriptObjectPath="lib.fluidText" /></p>

Ausgabe

<p>Text from TypoScript</p>

Beispiel für lokalisierte Datumswerte

Der f:format.date ViewHelper arbeitet mit der PHP Funktion date() und kann somit nur englische

Monatsnamen ausgeben. Besser wäre da schon die Verwendung von strftime. TypoScript bietet

strftime formatierte Datumswerte an. Hier ein Beispiel unter Verwendung von current:

TypoScript

lib.formattedDate = TEXT

lib.formattedDate {

current = 1

strftime = %d. %B %Y

}

Fluid-Template

<p><f:cObject

typoscriptObjectPat

h="lib.formattedDate">{address.dayOfBirth}</f:cObject></p>

Ausgabe

<p>17. Januar 2013</p>

Beispiel mit einem Array/Objekt

TypoScript

lib.address = COA

lib.address {

10 = TEXT

10.value.current = 1

10.value.wrap = <p>First name: |</p>

20 = TEXT

20.value.dataWrap = <p>Full name: {field: firstName} {field: lastName}

}

Fluid-Template

<f:cObject typoscriptObjectPath="lib.address" data="{address}"

currentValueKey="firstName" />

Ausgabe

<p>First name: Stefan</p><p>Full name: Stefan Froemken</p>

Tip

Wie oben bereits erklärt, könnt Ihr mit currentValueKey angeben, welcher Wert aus dem Array oder

Objekt über current=1 zur Verfügung gestellt werden soll. Auf die anderen Werte eines Arrays oder

Objektes könnt Ihr dann wie hier im Beispiel mit "field" zugreifen.

f:comment

Alles was sich innerhalb des f:comment ViewHelpers befindet, wird schlichtweg entfernt. Evtl.

enthaltene ViewHelper werden nicht ausgeführt. Dieser ViewHelper ist gerade beim Debuggen von

Webseiten sinnvoll. So könnt Ihr damit z.B. f:for-Schleifen temporär ausblenden, um die Fehlersuche

auf das Wesentliche zu beschränken.

Eigenschaften


Beispiel

<f:comment>

<p>This text will not be displayed</p>

<p>My name is: {address.firstName}</p>

</f:comment>

<p>{address.firstName} lives in city xyz</p>

<![CDATA[<p>This text was made by {address.firstName} and will be

displayed but not processed.</p>]]>

Ausgabe

<p>Stefan lives in city xyz</p>

<p>This text was made by {address.firstName} and will be displayed but not

processed.</p>

Tip

Die letzte Zeile ist etwas Besonderes. Denn mit Hilfe dieser CDATA-Notation, könnt Ihr die

Verarbeitung der Platzhalter unterbrechen. Der Text wird zwar angezeigt, aber der Platzhalter

{address.firstName} wird nicht ersetzt. Dies hat gerade dann den Vorteil, wenn Ihr in Eurem

Template JavaScript verwendet.

f:count

Dieser ViewHelper zählt die Elemente in dem angegebenen Objekt oder Array.

Eigenschaften


subject Array Gebt hier das Array oder Objekt an, das gezählt werden soll. Wenn dieser Wert leergelassen wird, dann versucht der ViewHelper, den Inhalt zwischen den Tags als Array zu interpretieren und zählt diesen.

Beispiel: Array als renderChildren

<p>There are <f:count>{addresses}</f:count> records in our database</p>

Ausgabe

<p>There are 23 records in our database</p>

Beispiel: Array über subject

<p>There are <f:count subject="{addresses}" /> records in our database</p>

Ausgabe


Beispiel: Inlinenotation

<p>There are {f:count(subject: addresses)} records in our database</p>

Ausgabe


Beispiel: Die bessere Inlinenotation

<p>There are {addresses -> f:count()} records in our database</p>

Ausgabe


f:cycle

Mit diesem ViewHelper könnt Ihr die Ausgaben des f:for-ViewHelpers aufpeppen und zum Beispiel

odd/even-Tabellen erstellen. Zwar könnt Ihr mit dem f:for ViewHelper auf das erste und letzte

Element der Schleife zugreifen, aber um jeder zweiten oder dritten Zeile ein anderes Aussehen zu

verpassen, benötiget Ihr f:cycle.

Eigenschaften


values Array Eingabe als Arraynotation. Erläuterung im Beispiel

as String Gebt hier den Namen der neuen Variable für das Template an

Beispiel

<table cellpadding="5" cellspacing="0" border="2">

<f:for each="{addresses}" as="address">

<f:cycle values="{0: 'green', 1: 'red', 2: 'blue'}" as="color">

<tr>

<td style="color: {color}">{address.firstName}</td>

<td style="color: {color}">{address.lastName}</td>

</tr>

</f:cycle>

</f:for>

</table>

Ausgabe


<tr>

<td style="color: green">Stefan</td>

<td style="color: green">Froemken</td>

</tr>

<tr>

<td style="color: red">Bastian</td>

<td style="color: red">Krump</td>

</tr>

<tr>

<td style="color: blue">Thorsten</td>

<td style="color: blue">Ploemi</td>

</tr>

<tr>

<td style="color: green">Max</td>

<td style="color: green">Mustermann</td>

</tr>

</table>

f:debug

Falls eine eurer Variablen wieder erwarten nichts ausgeben sollte, könnt ihr mit Hilfe dieses

ViewHelpers die Inhalte eurer Variablen anzeigen lassen. In der Ausgabe seht ihr dann, ob euer

gewünschter Wert überhaupt gefüllt ist oder nicht.

Eigenschaften


title String Mit dieser Eigenschaft könnt ihr der Debug-Ausgabe einen Titel geben, um die Ausgabe zwischen eventuell weiteren vorhandenen Ausgaben schneller identifizieren zu können.

maxDepth Integer Zu Zeiten vor TYPO3 4.7 wurden Arrays und Objekte immer komplett dargestellt. Je nach Objektgröße und Verschachtelung brach diese Darstellung jedoch ab. Mit dieser Eigenschaft werden die Arrays und Objekte nur noch bis zu einer Tiefe von 8 Verschachtelungen dargestellt, um das Problem zu umgehen. Je nach Rechnerleistung und Ausführungszeitraum könnt ihr die Tiefe entsprechend anpassen.


plainText Boolean Für den CLI-Modus könnt ihr hier die Debug-Ausgabe als reinen Text ausgeben lassen.

ansiColors Boolean Bestimmte Shells unterstützen die farbliche Hervorhebung von Wörtern in einem Text. Nach Aktivierung werden der Debug-Ausgabe zusätzliche Steuerzeichen hinzugefügt, damit die Shell die Hervorhebung vornehmen kann. Dieses funktioniert nur zusammen mit 'plainText'.

inline Boolean Normalerweise erscheint die Debug-Ausgabe oberhalb der Webseite. Mit 'inline' erscheint die Ausgabe genau an der Stelle des f:debug-ViewHelpers.

blacklistedClassNames Array Hiermit können ausgewählte Klassen hervorgehoben werden. Funktioniert im Augenblick (?) nicht mit Namespaces.

blacklistedPropertyNames Array Hiermit können ausgewählte Objekteigenschaften hervorgehoben werden. Funktioniert im Augenblick (?) nicht mit Namespaces.

Tip

Das Debuggen von Aggregate-Root-Objekten führte in früheren Versionen immer wieder zu

Problemen. Viele Objekte sind sehr tief verschachtelt oder sind rekursiv aufrufbar. Dies führte in

vielen Fällen zur Überschreitung der in php.ini definierten memory_limit oder auch zur

Überschreitung der max_execution_time. In solchen Fällen hat es geholfen nur einen Teil des

Objektes zu debuggen oder das komplette Objekt in ein Array zu konvertieren.

Beispiele

<f:debug title="Results of customers">{customers}</f:debug>

{customers -> f:debug(title="Results of customers")}

{f:debug(subject: customers, title: "Results od customers")}

f:else

Dieser ViewHelper wird im Bereich f:if erklärt, da er nur dort verwendet werden kann.

Eigenschaften


f:escape

Veraltet seit Extbase 1.4.0. Wird mit der Extbaseversion 1.6.0 entfernt. Bitte verwendet statt dessen

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. vergessen bei einem Loginformular seinen Usernamen 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-Tag platziert habt.

Eigenschaften











onclick String JavaScript Code, der bei Klick auf dieses HTML-


Elemtent ausgeführt werden soll


renderMode String Sollen die Fehlermeldungen als Liste (ul) oder als Container (div) gerendert werden

Beispiel Standard

<f:flashMessages />

Beispiel als Container

<f:flashMessages renderMode="div" />

f:for

Der f:for-ViewHelper ist DER ViewHelper für die Listengeneration. Schaut Euch die Erläuterung in

den Beispielen an.

Eigenschaften


each Array Array oder Objekt, das durchlaufen werden soll

as String Ein Variablenname, der Daten des aktuellen Durchlaufs enthält

key String Falls Ihr den Key/Schlüssel des aktuellen Durchlaufes benötigt, könnt Ihr hiermit den Namen einer weiteren Variable definieren

reverse Boolean Der Durchlauf des Arrays oder Objektes geschieht rückwärts

iteration String Eine Arrayvariable, die Informationen darüber beinhaltet, ob man sich im ersten oder letzten Durchlauf befindet. Außerdem enthalten: index, cycle, total, isEven, isOdd

Einfaches 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">

<tr>

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

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

</tr>

</f:for>

</table>

</f:alias>

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.

Beispiel für rückwärts






<f:for each="{mitarbeiter}" as="kollege" reverse="1">

<tr>



</tr>

</f:for>

</table>

</f:alias>

Zu Info: Man könnte bei dem Parameter reverse auch TRUE statt 1 verwenden.

Beispiel mit key/Schlüssel






<f:for each="{mitarbeiter}" as="kollege" reverse="1" key="eintrag">

<tr>

<th colspan="2">Eintrag: {eintrag}</th>

</tr>

<tr>



</tr>

</f:for>

</table>

</f:alias>

Beispiel mit Durchlaufinformationen






<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>

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. Probierts mal aus.

f:form

Der f:form-ViewHelper schaut von seinen ganzen Parametern extremst gewaltig aus. Aber wenn

man mal bedenkt das allein 11 Parameter nur für die Generierung der Zielseiten-URL zuständig

sind, bleibt nur noch eine handvoll Parameter übrig. Der große Vorteil diesen ViewHelpers ist

Sicherheit und Arbeitserleichterung, die wir uns in den Beispielen mal näher anschauen.

Eigenschaften




dir String Die Textrichtung. Erlaubte Werte sind: ltr (links nach


rechts) und rtl (rechts nach links)










enctype String Mit welchem Encoding sollen die Daten des Formulars versendet werden?

method String Übertragungsmethode. Mögliche Werte sind GET oder POST

name String Name des Formulars

onreset String JavaScript, das ausgeführt werden soll, wenn der Reset-Button für das Formular gedrückt wurde

onsubmit String JavaScript, das ausgeführt werden soll, wenn der Submit-


Button für das Formular gedrückt wurde



action String Welche Actionmethode soll aufgerufen werden, wenn das Formular abgesendet wird

arguments Array Welche zusätzlichen Variablen sollen beim Absenden mit übergeben werden

controller String Falls sich die gewünschte Actionmethode nicht im gleichen Controller befindet, muss hier dieser entsprechende Controller angegeben werden

extensionName String Falls das Formular von einer anderen Extension abgearbeitet werden soll, dann muss hier der Extensionname ohne tx_ und ohne Unterstriche angegeben werden

pluginName String Falls das Formular von einem anderen Plugin abgearbeitet werden soll, dann muss hier der Pluginname angegeben werden

pageUid Integer Seiten-UID eintragen, wenn das Formular von einer anderen Seite aus abgearbeitet werden soll

object Mixed Übergebt hier ein Objekt mit Eigenschaften, die die Eingabefelder im Formular wiederspiegeln.

pageType Integer Gebt hier eine Seitentyp ID an, die das Formular abarbeiten soll. Könnte für AJAX interessant sein.

noCache Boolean Kann aktiviert werden, um das Caching für die Zielseite zu deaktivieren.

noCacheHash Boolean Nach Aktivierung wird dem generierten Link zur Zielseite kein cHash-Parameter angehangen


section String Definition eines Ankers zu dem auf der Zielseite gesprungen werden soll. Interessant wir Seiten auf denen viele Inhalte sind.

format String Gibt an um welches Format es sich bei der Zielseite handelt. Alternativ ginge auch "xml", obwohl das bei einer Formularzielseite wenig Sinn machen würde. Klappt nur wenn actionUri nicht gesetzt ist.

additionalParams Array Fügt weitere Variablen der Zielseite an. Im Gegensatz zu arguments, können hiermit Variablen hinzugefügt werden die nicht mit dem Extensionnamen geprefixed werden. Klappt nur wenn actionUri nicht gesetzt ist.

absolute Boolean Nach Aktivierung wird der Zeilseite noch der Domainname und Pfad vorangestellt. Klappt nur wenn actionUri nicht gesetzt ist.

addQueryString Boolean Falls dem Formular bereits Parameter über die URL mitgegeben wurden, könnt Ihr hier nun entscheiden, ob diese Parameter auch mit auf die Zielseite übergeben werden. Klappt nur wenn actionUri nicht gesetzt ist.

argumentsToBeExcludedFromQueryString Array Falls Ihr addQueryString aktiviert habt, aber einen oder zwei bestimmte Parameter wieder entfernen wollt, dann tragt Ihr hier diese Parameter ein. Klappt nur wenn actionUri nicht gesetzt ist.

fieldNamePrefix String Falls ein anderer Prefix gewünscht ist. Macht eigentlich nur Sinn, wenn die Formulardaten von einer anderen Extension abgearbeitet werden müssen.

actionUri String Gebt hier Eure ganz eigene individuelle Zielseiten-URL ein. Viele der oberen Parameter haben aber dann keinen Wirkung mehr.

objectName String Hier kommt ein Objekt- bzw. Modelname rein, in das die nach Absenden gesammelten Formulardaten gespeichert werden sollen. Hat den Vorteil, dass Ihr nicht in jeder Action die Formulardaten überprüfen, sondern die Überprüfung nur einmalig im Model vornehmen müsst.

Beispiel

<f:form object="{feUser}" objectName="newFeUser">

<f:form.textarea property="firstName" rows="5" cols="50" />

</f:form>

Hier eine üngefähre Ausgabe was nun im Seitenquelltext hinzugefügt wurde:

<form action="/typo3_46/index.php?id=6&tx__%5Bcontroller

%5D=Standard&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:"newFeUser";a:1:

{s:9:"firstName";i:1;}s:4:"tx__";a:1:

{s:10:"controller";i:1;}}ff5ff9b62f7b5c49a696d3f7b1009991853d653

3" />

</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 diesen

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.

Im Beispiel haben wir noch den Objektnamen "newFeUser" angegeben. Wie Ihr seht wurde dieser

Wert jedem Feld in meinem Formular vorangestellt. Das hat den Vorteil, dass Eure Formularfelder

nicht einzeln, sondern gebündelt in einem Array an die Zielseite übertragen werden. Dort

angekommen könnt Ihr Eurer Action mitteilen, dass der Inhalt diesen Arrays in ein Modell portiert

werden soll. Bei dieser Portierung 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

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.

Eigenschaften


each Array Array oder Objekt, das durchlaufen werden soll

as String Ein Variablenname, der die gruppierten Datensätze enthält

groupBy String anhand welcher Eigenschaft soll das Array gruppiert werden

groupKey String Innerhalb der f:groupedBy-Tags kann mit dieser Variable auf den gruppierten Wert zugegriffen werden.

Beispiel






<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>

Hier wieder das Beispiel mit den 6 Mitarbeitern. Wie Ihr sehen könnt gruppiert der f:groupedBy-

ViewHelper diese Mitarbeiter anhand ihrer Städte (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, verwendet Ihr den Parameter groupKey. Der Wert aus

groupBy und groupKey müssen nicht übereinstimmen. Innerhalb von groupKey könntet Ihr auch

einfach city nehmen.

Über die Variable "as" könnt Ihr nun auf die Elemente der ersten gefundenen Gruppe zugreifen und

mit f:for durchlaufen lassen.

f:if

Auch wenn dieser ViewHelper in seiner Ausführung noch etwas eingeschränkt ist gehört er trotzdem

zu den ViewHelpern, die Ihr auswendig kennen solltet. Wer sich mal den fed:if-ViewHelper aus der

fed-Extension angeschaut hat, weiß wovon wir reden.

Eigenschaften


condition Boolean Hier kommt die Vergleichtsabfrage rein (Siehe Beispiele)

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

Vergleicht 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

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 mit Hilfe von PHP-GD und/oder imagemagick auf die hier angegebene Größe

verkleinert.

Eigenschaften














alt String Wenn das Bild nicht geladen wird, wird dieser alternative Text stattdessen angezeigt.

ismap String Specifies an image as a server-side image-map


longdesc String Hier können Sie ein URI hinterlegen, die auf eine Seite verweist, auf der sich eine umfangreiche Erläuterung diesen Bildes befindet.

usemap String Specifies an image as a client-side image-map



src String Pfad zu der Datei. Hier kann auch mit EXT: gearbeitet werden, da es sich hier um ein IMG_RESOURCE handelt

width String Breite des Bildes. Hier kann z.B. mit einem angehangenen "c" gesagt werden, dass das Bild, falls die Proportionen nicht genau passen geschnitten wird. Z.B. 200c

height String Höhe des Bildes. Hier kann z.B. mit einem angehangenen "c" gesagt werden, dass das Bild, falls die Proportionen nicht genau passen geschnitten wird. Z.B. 100c

minWidth Integer Minimale Breite des Bildes. Falls das Bild kleiner ist, wird es automatisch auf diese Breite vergrößert. Hinweis: Falls Ihr im Installtool [GFX][im_noScaleUp] aktiviert habt, wird das Bild nicht vergrößert.

minHeight Integer Minimale Höhe des Bildes. Falls das Bild kleiner ist, wird es automatisch auf diese Höhe vergrößert. Hinweis: Falls Ihr im Installtool [GFX][im_noScaleUp] aktiviert habt, wird das Bild nicht vergrößert.

maxWidth Integer Maximale Breite des Bildes. Falls das Bild größer ist, wird es automatisch auf diese Breite verkleinert.

maxHeight Integer Maximale Höhe des Bildes. Falls das Bild größer ist, wird es automatisch auf diese Breite verkleinert.

treatIdAsReference Boolean Wenn TRUE, dann wird die Angabe bei src als sys_file_reference


interpretiert. Wenn FALSE als sys_file oder Dateipfad

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

Mit diesem ViewHelper könnt Ihr ein Layout wählen, dass für das aktuelle Template verwendet

werden soll.

Eigenschaften



name String Name des zu verwendenden Layouts. Wenn kein Name angegeben wurde, dann wird "Default" verwendet.

f:render

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.

Eigenschaften


section String Der Name einer Section, die gerendert werden soll.

partial String Pfad + Dateiname ohne .html-Endung ab dem Verzeichnis, das für Partials definiert wurde.

arguments Array Welche Variablen sollen in den Partial/das Layout übernommen werden.

optional Boolean Normalerweise hagelt es Fehlermeldungen, wenn Sections nicht auffindbar sind. Setzt man diesen Parameter aber auf TRUE, dann wird eben nichts ausgegeben.

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 mit Hilfe der TS-

Eigenschaft "partialRootPath" mit abschließendem / an.

Sections haben kein eigenes Verzeichnis, da diese immer innerhalb der aktuellen Templatedatei

definiert werden müssen. Außnahmen machen da die Layouts.

Beispiel für Partial

In unserem Fluidtemplate:







<f:render partial="TableRow" arguments="{kollege: kollege}"/>

</f:for>

</table>

</f:alias>

In der Partial Datei TableRow.html

<tr>



</tr>

f:renderChildren

f:renderFlashMessages

f:section

Sections sind ähnlich Partials mit dem Unterschied, dass Partials in Dateien ausgelagert werden und

Sections innerhalb des Templates definiert werden müssen.

Eigenschaften


name String Ein Name unter dem man den Inhalt zwischen den Tags wieder auffinden kann

Beispiel

<f:section name="TableRow">

<tr>



</tr>

</f:section>







<f:render section="TableRow" arguments="{kollege: kollege}"/>

</f:for>

</table>

</f:alias>

Wie Ihr seht wird hier erst das HTML für eine Tabellenzeile definiert und der Section der Name

"TableRow" gegeben. Später dann in der Schleife könnt Ihr mit Hilfe des f:render-ViewHelpers diese

Section wieder aufrufen.

f:then

Dieser ViewHelper wird im Bereich f:if erklärt, da er nur dort verwendet werden kann.

Eigenschaften


f:translate

Mit dem f:translate-ViewHelper greift Ihr auf eine beliebige Sprachdatei (meist locallang.xml) zu und

holt Euch die entsprechende Übersetzung mit Hilfe der Angabe im Parameter "key".

Eigenschaften


key String Der key, mit dem man die Übersetzung aus dem Sprachdateien auslesen kann

default String Wenn der Key in der Sprachdatei nicht gefunden werden kann, dann verwende diesen Text. Wenn default nicht gesetzt ist, wird der Inhalt zwischen den Tags verwendet.

htmlEscape Boolean Alle Übersetzungen aus den Sprachdateien werden durch htmlspecialchars geschleust, was es unmöglich macht, HTML-Tags in den Übersetzungen anzeigen zu lassen. Setzt diesen Wert auf FALSE, um dieses Vorgehen zu unterbinden.

arguments Array In den Übersetzungen können Platzhalter definiert werden, die dann mit den Inhalten diesen Arrays gefüllt werden.

Innerhalb von Extensions wird immer auf die locallang.xml im Verzeichnis

Resources/Private/Language/ zugegriffen. Im Bereich FLUIDTEMPLATE müsste Ihr hier die

Pfadsyntax verwenden:

LLL:fileadmin/templates/locallang.xml:domain_model_irgendwas.titel

bzw:

LLL:EXT:meineExtension/Resources/Private/Language/

locallang.xml:domain_model_irgendwas.titel

Diese "LLL:" Prefixe müssen bei der Pfadnotation immer gesetzt sein!!! Etwas einfacher machen es

sich die FLUIDTEMPLATE-User, wenn sie im TS zuvor angeben auf welche locallang.xml welcher

Extension sie zugreifen wollen:

extbase.pluginName = Pi1

extbase.controllerExtensionName = MeineExtension

Dann reicht es auch wieder nur den "key" anzugeben OHNE den ganzen Pfad

Beispiel

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

Beispiel mit Pfad

<f:translate key="LLL:fileadmin/lang/locallang.xml:domain_model.title" />

Beispiel mit Platzhaltern

In unserem Template:

<f:translate key="LLL:fileadmin/lang/locallang.xml:domain_model.title"

arguments="{0: 'Herr der Ringe'}" />

In der locallang.xml

<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 Arrayeintrag zugegriffen. Um das unabhängig von der Reihenfolge zu

machen empfehlen wir 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/Text interpretiert

werden soll ($s). Auf php.net findet Ihr heraus wofür diese ganzen Kürzel stehen.

Things to know

Here are some important informations around Fluid

Table of Contents

Arraynotation

JavaScript and Fluid Inline Syntax

Arraynotation

In TYPO3 6.1

Allow Fluid arrays only in ViewHelper arguments

Fluid arrays are a subset of the JavaScript object syntax, making it hard to work with them in mixed

HTML/JavaScript documents. For example the following JavaScript Object was parsed by Fluid:

var uris = {

endPoint1: '{f:uri.action(.)}',

endPoint2: '{f:uri.action(.)}',

};

With 6.1, Fluid now only parses arrays which are used inside ViewHelper arguments, such that an

array inside normal text is not converted anymore. This change is only breaking in very rare cases

where one relied on the inner contents of the ViewHelper being an array, eg. if one used the debug

ViewHelper as follows:

<f:debug>{key1: 'value1', key2: 'value2'}</f:debug>

ViewHelpers which were written like this should be re-written to take the array as ViewHelper

argument:

<f:debug value="{key1: 'value1', key2: 'value2'}" />

JavaScript and Fluid Inline Syntax

When Fluid ViewHelpers are used in mixed templates containing complex JavaScript blocks you

might come across the situation that a ViewHelper using inline syntax don't get interpreted. In this

case you can wake up the rendering by using a normal syntax ViewHelper or wrap the JavaScript

part in a CDATA block.

situation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-

latest.js"></script>

<![CDATA[

...

]]>

use the f:format.cdata viewHelper for the wrap:

<f:format.cdata>

<script type="text/javascript">

var myLayout; $(document).ready(function() {

myLayout = $('body').layout({

north__size: 27,

north__initClosed: false,

north__initHidden: false,

center__maskContents: true // IMPORTANT - enable iframe masking

});

});

</script>

</f:format.cdata>

Bewährte Vorgehensweisen

Statische Optionen für f:form.select

Der f:form.select-ViewHelper bringt einige coole Eigenschaften mit wie zum Beispiel

optionValueField und optionLabelField. Damit ist es möglich, auf bestimmte Eigenschaften eines

Objektes zuzugreifen, um diese als Value oder auch als Label für die zu generierenden Optionen

der Selectbox bereit zu stellen.

Diese beiden Eigenschaften haben aber ein Problem: sie funktionieren nur in Zusammenarbeit mit

Objekten. Selbst wenn ihr die Struktur in einem Array nachbaut, so scheitert der Versuch bereits hier

im f:form.select-ViewHelper:

if (is_object($value)) {

Denn nur dort werden diese beiden Eigenschaften verarbeitet.

Natürlich könnten wir uns auch ein kleines Mini-Domainmodel mit zwei Getter- und Setter-Methoden

bauen, um Label und Value hier abzuspeichern. Das erscheint jedoch als zu aufwändig, nur um

einige statische Werte bereit zu stellen.

Abhilfe schafft hier die PHP Standardklasse stdClass:

http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Format/Cdata.html#f-format-cdata

/**

* action list

*

* @return void

*/

public function listAction() {

$this->view->assign('categories', $this->getCategories());

}

/**

* prepare categories for select box

*

* @return array

*/

public function getCategories() {

$categories = array();

$entries = array('car', 'bike', 'train');

foreach ($entries as $entry) {

$category = new stdClass();

$category->key = $entry;

$category->value = LocalizationUtility::translate('category.' .

$entry, 'myExtName');

$categories[] = $category;

}

return $categories;

}

Im Fluid-Template könnt ihr dann wieder ganz normal die beiden Eigenschaften verwenden:

<f:form.select name="category" options="{categories}"

optionValueField="key" optionLabelField="value" />

Index: Labels for Crossreferencing

Index

[0032] :ref:`start`

Targets

[0033] :ref:`labels-for-crossreferencing`

Fluid/ViewHelper/Format/Cdata

[0031] :ref:`f-format-cdata`

Summary: 3 targets (3 with link text, 0 without).

Official TYPO3 Extbase and Fluid Guide

Documents

Transcript of Official TYPO3 Extbase and Fluid Guide