Vorheriger Artikel Nächster Artikel

TYPO3: Zehn Tipps & Tricks für Extbase und Fluid

Aus dem
t3n Magazin Nr. 24

06/2011 - 08/2011

Immer mehr TYPO3-Entwickler setzen auf die Kombination aus Extbase (MVC) und (Templating). Wer von dieser Art zu programmieren infiziert ist, kommt so schnell nicht mehr davon los. Wir leisten mit zehn Praxistipps Entwicklungshilfe.

Fluid-Snippets in Netbeans

Mag. Artikel Heft 24

Bei der Arbeit mit fallen zwei Dinge sofort auf: Es ist sehr viel nötig, und durch die zunächst ungewöhnliche Notation entstehen immer wieder Fehler, die man schwer findet. Da wäre eine Art Snippet-Verzeichnis praktisch, mit dem man oft benötigte Code-Fragmente auf Knopfdruck einfügen kann. Zumindest für die beliebte IDE Netbeans [1] gibt es nun etwas Derartiges – so genannte Code Templates [2]. Eine überarbeitete und erweiterte Version der Datei findet sich außerdem bei Typovision [3].

Code Code-Fragment
alias <f:alias map="{key:value}">
base <f:base />
ts bzw. cobject <f:cObject typoscriptObjectPath="path"></f:cObject>
count <f:count subject="{objects}" />
cycle <f:cycle values="{array}" as="value"></f:cycle>
debug <f:debug title="debugname">{debug_var}</f:debug>
esc bzw. escape <f:escape>text</f:escape>
flash <f:renderFlashMessages />
for <f:for each="{array}" as="value" key="key"></f:for>
crop <f:format.crop maxCharacters="15" append="&nbsp;[...]"></f:format.crop>
currency <f:format.currency currencySign="sign" decimalSeparator="dsep" thousandsSeparator="tsep"></f:format.currency>
date <f:format.date format="d.m.Y-H:i:s"></f:format.date>
html <f:format.html parseFuncTSPath="lib.parseFunc"></f:format.html>
nl2br <f:format.nl2br></f:format.nl2br>
number <f:format.number decimals="decimals" decimalSeparator="dsep" thousandsSeparator="tsep"></f:format.number>
padding <f:format.padding padLength="length" padString="string"></f:format.padding>
printf <f:format.printf arguments="arguments"></f:format.printf>
form <f:form action="action" controller="controller" object="{object}" name="name" arguments="arguments" ></f:form>
checkbox <f:form.checkbox property="property" checked="{condition}" />
errors <f:form.errors for="for">{error.propertyName} {error.message} {error.code}</f:form.errors>
hidden <f:form.hidden name="name" value="value" />
password <f:form.password property="property" />
radio <f:form.radio property="property" checked="{condition}" />
select <f:form.select property="property" options="{key:value}" optionLabelField="labelfield" optionValueField="valuefield" />
submit <f:form.submit value="value" />
textarea <f:form.textarea property="property" rows="rows" cols="cols" />
textfield bzw. input <f:form.textfield property="property" />
upload <f:form.upload property="property" />
group <f:groupedFor each="{array}" as="items" groupBy="group_by" groupKey="group_key">{group_key}:<f:for each="{items}" as="value" key="key"></f:for> </f:groupedFor>
if <f:if condition="{condition}"></f:if>
ife <f:if condition="{condition}"> <f:then></f:then><f:else></f:else></f:if>
img bzw. image <f:image src="source" alt="alt" />
layout <f:layout name="name" />
section <f:section name="name"></f:section>
render <f:render partial="name" arguments="arguments" />
link <f:link.action action="action" controller="controller"></f:link.action>
linka <f:link.action action="action" controller="controller" arguments="{key:value}"></f:link.action>
extlink <f:link.external uri="url" ></f:link.external>
email <f:link.email email="email" />
page <f:link.page pageUid="uid"></f:link.page>
securityifa <f:security.ifAuthenticated"><f:then></f:then></f:security.ifAuthenticated">
securityifh <f:security.ifHasRole" role="role"> <f:then></f:then></f:security.ifHasRole">
trans bzw. translate <f:translate key="key" />

Nach dem Download lassen sich die Templates in Netbeans über „Einstellungen, Import“ laden. In den Import-Optionen reicht ein „All“ und „OK“. Nach einem Neustart stehen die Code-Templates zur Verfügung. Um nun ein Code-Template zu verwenden, reicht in einer Fluid-Datei (Typ: HTML) ein Code-Schnipsel aus der abgedruckten Tabelle. Ein anschließender Klick auf Tab fügt das zugehörige Fragment ein.

String-Vergleiche in Fluid

Im If-ViewHelper von Fluid kann man über die Eigenschaft „condition“ nahezu alles vergleichen – Zahlen (kleiner, größer, gleich), Booleans (TRUE, FALSE) etc. – nicht jedoch auf Gleichheit mit einem String. Einem Bugtracker-Eintrag zufolge sei das schwierig zu implementieren.

Aber gerade eine solche Abfrage braucht man in der Praxis relativ oft. Man kann nun anfangen, über den Alias-ViewHelper eben einen Alias für den abzufragenden String zu erstellen und gegen diesen zu prüfen. Das bringt allerdings zwei Nachteile mit sich: Für jeden abzufragenden String müsste der in Frage kommende Programmteil mit einem Alias-ViewHelper ummantelt werden. Außerdem wird der Code unübersichtlich, da an der Stelle der Überprüfung nun nicht mehr der Prüfstring selbst, sondern der Alias verwendet wird – beides also suboptimal. Auch das Schreiben eines eigenen ViewHelper scheint nicht adäquat.

Aber es geht auch einfacher: Die beiden Operatoren müssen dazu lediglich in ein Array verwandelt werden und schon funktioniert der Vergleich wie gewünscht.

String-Vergleich in Fluid

<f:if condition="{0:blog.title} == {0:'Testtitel'}">
	Funktioniert: Der Titel lautet 'Testtitel'.
</f:if>

Listing 1

Kommentare im ViewHelper

Um im anfänglichen Code-Gewusel der Views den Überblick nicht zu verlieren, eignen sich Kommentare zur Strukturierung. Da man sich aber letztlich in HTML befindet, ist es eben nur möglich, HTML-Kommentare zu verwenden. Diese allerdings sind im Quellcode selbst sichtbar.

Eine andere Lösung muss also her. Hier bietet es sich an, einen eigenen ViewHelper zu erstellen, der nichts anderes macht, als Kommentare nicht anzuzeigen: Nach der Installation der Extension „efempty“ – diese enthält ein Extbase/Fluid-Grundgerüst – wird der ViewHelper um eine Klasse erweitert. Im Verzeichnis Classes/ViewHelpers/ genügt dafür eine Datei CommentViewHelper.php mit folgendem Inhalt:

CommentViewHelper.php

<?php
class Tx_Efempty_ViewHelpers_CommentViewHelper extends Tx_Fluid_Core_ViewHelper_AbstractViewHelper {
	public function render() {
		return '';
	}
}
?>

Listing 2

Anschließend reicht überall dort, wo der ViewHelper verwendet wird, eine Namespace-Anweisung am Anfang der Datei.

Namespace im View

{namespace tv = Tx_Efempty_ViewHelpers}
...
<tv:comment> Hier können Sie nun beliebig kommentieren. Sie können sogar andere ViewHelper auskommentieren! :-)</tv:comment>

Listing 3

Übersetzte Fehlermeldungen

Wer mittels „<f:form.errors>{error.propertyName} {error.message} {error.code}</f:form.errors>“ Fehlermeldungen ausgibt, wird schnell feststellen, dass diese lediglich in englischer Sprache erscheinen. Übersetzen lassen sich die Ausgaben nicht, denn bislang sind sie hart kodiert (dies soll sich zukünftig ändern).

Um dieses Problem zu lösen, ist etwas Fantasie nötig: Für jeden Fehler gibt es einen eindeutigen Code. Dieser besteht laut Vereinbarung aus dem Timestamp, an dem der Fehler „erfunden“ wurde. Daher kann davon ausgegangen werden, dass es in einem System nur einen Fehler mit eben dieser Meldung gibt. Somit kann über den Translate-ViewHelper und den Code als Schlüssel die Fehlermeldung übersetzt werden.

Resources/Private/Language/locallang.xml

<languageKey index="de" type="array">
	<label index="1221560718">Der Wert ist leer!</label>
</languageKey>

Listing 4

Im View

<f:translate key="{error.code}" />

Listing 5

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

1 3
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von Stefan am 22.05.2012 (16:20 Uhr)

    Schöne Übersicht, ein paar Punkte sind sehr hilfreich bei Problemen die bisher echt Nerven gekostet haben. Die verfügbaren Extbase/Fluid-Dokus sind ja insgesamt etwas mager und wiederholen sich auf einem bestimmten Niveau.
    Hier sind aber endlich mal ein paar neue Beispiele - vielen Dank!

    Antworten Teilen
  2. von Claus am 26.07.2012 (13:15 Uhr)

    Das Code Template von Typovision enthält einen Fehler. Das Image Tag hat kein Argument source, sondern src.

    Antworten Teilen
  3. von sabine.deeken am 05.11.2013 (13:11 Uhr)

    Settings-Zugriff im Viewhelper mit Namespaces (getestet in TYPO3 6.1):

    /**
    * @var \TYPO3\CMS\Extbase\Configuration\ConfigurationManagerInterface
    * @inject
    */
    protected $configurationManager;

    /**
    * Injects the configuration manager, retrieves the plugin settings from it
    *
    * @param \TYPO3\CMS\Extbase\Configuration\ConfigurationManagerInterface $configurationManager
    * @return void
    * @override \TYPO3\CMS\Extbase\Mvc\Controller\AbstractController
    **/
    public function injectConfigurationManager(\TYPO3\CMS\Extbase\Configuration\ConfigurationManagerInterface $configurationManager) {
    $this->configurationManager = $configurationManager;
    $settings = $this->configurationManager->getConfiguration(\TYPO3\CMS\Extbase\Configuration\ConfigurationManagerInterface::CONFIGURATION_TYPE_SETTINGS);
    $this->settings = $settings;
    }

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Fluid
TYPO3 CMS – Die wichtigsten Neuerungen von der T3CON
TYPO3 CMS – Die wichtigsten Neuerungen von der T3CON

TYPO3 CMS hat noch eine längere Zukunft vor sich, das wurde auf der diesjährigen T3CON 2014 in Berlin klar. Obwohl Vorträge zu Neuerungen in Neos auf der Konferenz insgesamt in der Mehrzahl waren, … » weiterlesen

TYPO3 Mask: Die Template-Alternative zu Templavoila
TYPO3 Mask: Die Template-Alternative zu Templavoila

Derzeit gibt es wenige Templating-Ansätze im TYPO3 CMS. Einige Erweiterungen sind veraltet und andere bieten einfach zu wenig Funktionalität. Genau das soll TYPO3 Mask ändern. » weiterlesen

TYPO3-Podcast T3Bits: Neue Episoden zu Responsive Webdesign und Fluid
TYPO3-Podcast T3Bits: Neue Episoden zu Responsive Webdesign und Fluid

Vor etwas mehr als einem Monat ist der TYPO3-Podcast T3Bits gestartet. Webentwickler Sebastian Michaelsen behandelt darin die Welt rund um das CM-System. Seit der ersten Episode sind inzwischen zwei … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen