Typo3 Extensions mit Extbase und Fluid – Die erste Extension

Nachdem wir den Aufbau von Extbase Extensions kennen, fangen wir nun ganz einfach mit einem Thema an, dass leider wenig beleuchtet ist, aber oft Anwendung findet. Zusätzlich bietet es einen optimalen Einstieg in die Extbase Entwicklung, um die Grundlagen Schritt für Schritt zu verstehen. Wir entwickeln ein Typo3 Template innerhalb einer Extension.

„Warum denn das Template in eine Extension auslagern und nicht wie üblich mein TypoScript über include in den Template Datensatz einfügen?“

Es gibt viele Möglichkeiten ein Typo3 Template in das System zu integrieren. Welchen Weg man hier wählt, wird durch die Anforderungen des Templates bestimmt. Wenn wir es mit einer sehr komplexen Vorgabe zu tun haben, die z.B. eigene Custom Content Types oder zusätzliche Funktionen verlangt, kann es sehr hilfreich sein, das Template als Extension zu installieren.

Also jetzt auf Start. Wir nennen das ganze Projekt zufallsmäßig ‚tut23template‘. Als erstes legen wir unsere Extension Ordner Struktur an und beginnen mit den wesentlichen Grundeinstellungen. Da es ein Template sein soll, benötigen wir, wie schon angekündigt, erstmal nicht das ganze Extbase Extension Gebäude, sondern können uns auf die wesentlichen Elemente beschränken.

  • tut23template
    • Classes
      • ViewHelpers
    • Configuration
      • TypoScript
    • Resources
      • Private
      • Public
    • ext_emconf.php
    • ext_localconf.php
    • ext_tables.php
    • ext_icon.gif

Wir legen als erstes die ext_emconf.php an. Hier müssen wir nur alle wissenswerten Daten zur Extension eintragen, da die Datei als Informations-Pool für den Extension Manager dient. Eigentlich ist alles selbst erklärend.

<?php
$EM_CONF[$_EXTKEY] = array(
    'title' => 'Tutorial Basic Template',
    'description' => 'Tutorial Basic Template',
    'category' => 'templates',
    'author' => 'YOUR_NAME',
    'author_email' => 'YOU@YOUR_COMPANY.com',
    'author_company' => 'YOUR_COMPANY',
    'shy' => '',
    'priority' => '',
    'module' => '',
    'state' => 'stable',
    'internal' => '',
    'uploadfolder' => '0',
    'createDirs' => '',
    'modify_tables' => '',
    'clearCacheOnLoad' => 0,
    'lockType' => '',
    'version' => '',
    'constraints' => array(
        'depends' => array(
            'typo3' => '6.2',
        ),
        'conflicts' => array(
        ),
        'suggests' => array(
        ),
    ),
);
?>

Wichtig ist der Parameter ‚category‘, mit dem wir die Extension eindeutig einer Typo3 System Kategorie zuweisen. Daneben sollte hier auch der Parameter ‚constraints‘ hervorgehoben werden, in dem wir Typo3 die Abhängikeiten und Konflikte mit anderen Extensions mitteilen. Alle anderen wichtigen Informationen über die Parameter findet man in der Typo3 Dokumentation.

Die nächsten Einstellungen, die wir brauchen, müssen in die ext_tables.php eingetragen werden.
Nicht wundern, das Erste was man hier einfügt ist eine einfache Sicherheitsabfrage, die den Abbruch des Scriptes einleitet, sollte ein Zugriff von außen stattfinden.

if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}

Als nächstes und schon fast Letztes für diesen Moment fügen wir das statische TS Template in die Extension ein.

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'Tutorial Basic Template');

Was passiert hier? Eigentlich nicht viel. Die Funktion ‚addStaticFile‘ ermöglicht uns die Einbindung von Extension Files in das Typo3 Gefüge. Mit ‚Configuration/TypoScript‘ legen wir den Pfad zu unserem TS setup und unserer TS config fest und mit ‚Tutorial Basic Template‘ geben wir dem Kind im Template Datensatz einen Namen. Ein Blick in die ExtensionManagementUtility erklärt da einiges.

Hier sollte man nicht über den Typo3 Funktions-Aufruf verwundert sein, denn alle Typo3 Klassen werden seit 6.0 endgültig via PHP Namespaces angesprochen. Also wer das genau wissen möchte, darf gerne einen Blick in die PHP Dokumentation zum Thema Namespaces wagen und die Typo3 Dokumentation durchforsten.

Nun wird von Typo3 im Ordner ‚Configuration/TypoScript‘ die Dateien setup.txt und constants.txt erwartet. Diese können wir dann dementsprechend, wie in der Template Entwicklung gewohnt, bearbeiten und alle Details eintragen. Da ich ein Freund von Übersichtlichkeit bin, lagere ich gerne alle wichtigen Komponenten der Typo3 Template Config in Unterdateien aus, um einen schnellen Zugriff auf relevante Daten zu haben. Somit würde eine setup.txt z.B. wie folgt aussehen:

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:tut23template/Configuration/TypoScript/Config/Config.ts">
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:tut23template/Configuration/TypoScript/Content/Content.ts">
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:tut23template/Configuration/TypoScript/Content/Navigation.ts">
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:tut23template/Configuration/TypoScript/Config/Page.ts">

Neu ist hier, dass wir in der Extension die Pfade anders beschreiben müssen: Mit dem Schlüsselwort ‚FILE‘ wird auf eine Datei verwiesen, die den Pfad ‚EXT‘ zu den Extensions hat, also zu typo3conf/ext/. Danach folgt der Extension Ordner und der direkte Pfad zur Datei.

Da ich davon ausgehe, dass das TypoScript Templating allen soweit bekannt ist, möchte ich hier kurz noch die zum Setup gehörige Page.ts in verkürzter Form vorstellen. In dieser Datei wird ein exemplarisches Fluid-Template für unsere Template Extension definiert.

page = PAGE
page {
    typeNum = 0
    10 = FLUIDTEMPLATE
    10 {
        template = FILE
        template.file = {$pathToPrivateResources}/Templates/index.html
        variables {
            header_content < temp.header_content
            navigation < temp.navigation
            content < temp.content
            sidebar_content < temp.sidebar_content
        }
        settings {
            copyrightYear = {$year}
        }
    }
}

Auffällig ist hier wieder der Pfad zur Template HTML Datei ‚{$pathToPrivateResources }‘. Dieser wird in der constants.txt neben anderen Werten und Pfaden, die wir in der Extension benötigen, als Konstanten festgelegt, die wir dann wie gewohnt mit {$KONSTANTE} ansprechen können.

pathToPrivateResources = typo3conf/ext/tut23template/Resources/Private
pathToPublicResources = typo3conf/ext/tut23template/Resources/Public

Nun fehlt eigentlich nur noch die Template HTML Datei index.html, die laut unserer Pfad Angabe in einen Unterordner Templates im Verzeichnis Resources/Private/Templates angelegt werden muss.

<header>
	<f:format.html>{header_content}</f:format.html>
	<nav>
		<f:format.html>{navigation}</f:format.html>
	</nav>
</header>
<aside><f:format.raw>{sidebar_content}</f:format.raw></aside>
<section id="content">
	<!--TYPO3SEARCH_begin-->
	<f:format.html>{content}</f:format.html>
	<!--TYPO3SEARCH_end-->
</section>
<footer>
&copy; Copyright 2014 All Rights Reserved.
</footer>

Es ist eine einfache Template Datei, die aber für Neulinge in FLUID schon ziemlich seltsam aussieht. Das klären wie dann im nächsten Schritt bei der Einführung in FLUID.

Es ist Zeit das Ganze zu installieren. Wir laden nun unsere kleine Extension in das System unter typo3conf/ext/ und installieren sie im Extension Manager.

install-extension

Alles was wir jetzt noch machen müssen, ist im Template Datensatz unser Statisches Template einzufügen, Cache leeren und Voila, da ist es.

Custom-Content-Element-Template

„Da bleibt aber noch die Page TS Config und RTE Conifg? Sollen die denn weiter über die Seiten Einstellungen eingetragen werden?“

Jetzt ist es Zeit unsere ext_tables.php zu erweitern, um eine neue Funktion aus der ‚ExtensionManagementUtility‘ kennen zu lernen: ‚addPageTSConfig‘.
Also ergänzen wir noch in unserem Script

<br />
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:tut23template/Configuration/TypoScript/Config/PageTsConfig.ts">');

Mit dieser Zeile haben wir es geschafft, dass unser Template auch alle wichtigen Page TS Config Daten steuern kann. Die Funktion macht nichts anderes als durch den Template Datensatz PageTsConfig.ts die Page TS Config ins System einzupflegen und somit alle gewohnten Daten wie die RTE Konfiguration zu implementieren.

Im nächsten Schritt beschäftigen wir uns dann mit einer kleinen Einführung in das Fluid Templating.