Die einfache Erweiterbarkeit durch Extensions steht in TYPO3 seit Version 3.5.x zur Verfügung. In diesem Artikel wird zunächst gezeigt, wie sich Extensions installieren und aktualisieren lassen. Der zweite Teil stellt mit der News-Extension eine der wichtigsten Erweiterungen vor und zeigt, wie diese konfiguriert wird. Zum Abschluss geht es darum, wie eigene Extensions programmiert werden und was dabei zu beachten ist.

Zunächst ein paar grundlegende Worte zu den Extensions: Wenn Sie sich näher mit den TYPO3-Erweiterungen beschäftigen, werden Sie merken, dass beinahe für alle Zwecke Extensions existieren. Bevor Sie sich also an die Erstellung einer eigenen Erweiterung machen, sollten Sie zunächst überprüfen, ob es nicht bereits eine entsprechende Extension gibt. Die Installation der Extension erfolgt denkbar einfach über den Extension-Manager. Das gesamte Extension-System ist in TYPO3 sehr ausgereift und setzt sich aus folgenden Komponenten zusammen:

Extensions installieren

Einen Überblick über alle auf Ihrem System vorhandenen Erweiterungen bekommen Sie unter dem Menüpunkt „Available extensions to install“ des Extension Managers im TYPO3-Backend. Die Installation einer Extension ist denkbar einfach: Sie zeigen auf das „+“-Symbol in der ersten Spalte. Auf den Folgeseiten erscheint eine Kontrollabfrage, in der nachgefragt wird, ob die Datenbank aktualisiert und der Zwischenspeicher (Cache) geleert werden soll – beides sollten Sie bestätigen. Wenn eine Extension noch nicht in Ihrer TYPO3-Installation vorhanden ist, haben Sie die Möglichkeit, diese aus dem Extension Repository herunterzuladen. Im Extension Repository stehen viele für TYPO3 verfügbare Extensions zur Integration in die eigene TYPO3-Installation bereit. Um eine Extension zu laden, klicken Sie auf den Menüpunkt „Import extensions from online repository“. Hier gibt es zwei Optionen: Entweder laden Sie eine Extension vom Extension Repository herunter oder Sie laden ein Extension-Paket (t3x-Datei) direkt auf den Server. Um eine Extension manuell zu installieren – weil zum Beispiel keine Verbindung vom Webserver auf das TER möglich ist – müssen Sie diese zunächst von www.typo3.org herunterladen und über „Upload Extension File Directly“ in Ihr TYPO3-System integrieren. Mit einem Klick auf „Upload extension file“ wird die Datei auf den Server geladen und entpackt. Die endgültige Installation nehmen Sie anschließend unter „Available extensions to install“ vor. Über „Import extensions from online repository“ und „Connect to online repository“ erfolgt der Download einer Liste mit den verfügbaren Extensions. Über das rote beziehungsweise grüne Symbol in der ersten Spalte können Sie die Erweiterungen herunterladen oder aktualisieren.

Besonders die Möglichkeit, im TER Extensions über die Update-Funktion auf dem Laufenden zu halten, wird selten benutzt. Dabei hilft gerade sie, Probleme bei Versionssprüngen zu vermeiden. Sie sollten regelmäßig kontrollieren, ob für eine Extension ein Update vorliegt. Vor dem Download kann man sich durch Anklicken des Extension-Titels ausführliche Informationen anzeigen lassen. Hier besteht die Möglichkeit, nicht nur die gewünschte Extension-Version auszuwählen, sondern auch eine Pfadangabe zu machen. Wurde die Option „allowGlobalInstall“ in den „$TYPO3_CONF_VARS“ Ihrer TYPO3-Installation gewählt, lässt sich der Pfad zu den globalen Extensions unter „typo3/ext/“ für die Installation angeben. Die Schritte zur endgültigen Installation sind bei den jeweiligen Extensions unterschiedlich: Während bei einigen Erweiterungen neue Datenbanktabellen angelegt und der Cache geleert werden muss, erfolgt bei anderen die Installation durch einen einfachen Klick.

Die Extension tt_news

Als Beispiel für die Extension-Verwaltung soll hier die News-Erweiterung (tt_news) dienen. Über sie lassen sich auf einfachste Weise aktuelle Meldungen veröffentlichen. Nachrichten können in Form einer Überschrift, den ersten Zeilen des Meldungstextes und mit Datum versehen angezeigt werden. Um den vollständigen Text aufzurufen, wird zudem ein entsprechender Link auf die „Komplettansicht“ bereitgestellt. Die News-Extension ist trotz ihrer einfachen Bedienbarkeit sehr komplex – lässt aber deshalb auch kaum Wünsche offen. Die News-Erweiterung ist bereits fester Bestandteil von TYPO3 und muss nicht über das Extension Repository heruntergeladen werden. Sie müssen aber im Extension Manager auf „Available extensions to install“ gehen und die Extension „tt_news“ installieren. Im Seitenbaum befindet sich anschließend die Seite News. Weisen Sie ihr zunächst unter „Include static“ das Template „table-based tmpl“ (tt_news) zu. Eingebunden werden die News über einen SysOrdner, der als Container für die News dient. Um einen SysOrdner anzulegen, generieren Sie im Seitenbaum eine neue Seite und wählen als Typ „SysOrdner“. Der Übersicht halber können Sie der Seite den Namen „News“ zuweisen. Unter „Enthält Erweiterung“ erhält News eine Markierung. Nach dem Anlegen des Ordners „News“ wird er im Seitenbaum mit einem speziellen Symbol gekennzeichnet. Über das Kontextmenü des Ordners „News“ erzeugen Sie neue News-Beiträge. Wählen Sie dazu „Neu“ und „News“. Zunächst wird festgelegt, von welchem Typ der News-Beitrag sein soll.

Alle News werden in der Seitenansicht des Ordners „News“ angezeigt. Hier dürfen Sie die News jederzeit bearbeiten. Jetzt sind die News zwar angelegt, eine Ausgabe im Frontend ist aber leider noch nicht möglich. Dazu müssen zuerst die entsprechenden Verknüpfungen mit der News-Extension existieren. Rufen Sie dazu im Seitenbaum die Seite (nicht den SysOrdner) „News“ auf und legen Sie einen neuen Seiteninhalt vom Typ „Plugin“ an. Im Feld „Erweiterung“ wählen Sie „News“.

Die Konfiguration des neuen Inhaltselements.

Über das Feld „Objekte“ bestimmen Sie, wie die News über das Frontend-Plugin ausgegeben werden sollen. Dafür stehen verschiedene Varianten zur Verfügung:

• LIST: Alle News sind aufgelistet. Die Anzahl der angezeigten News kann über die limit-Eigenschaft begrenzt werden.
• LATEST: Listet die aktuellsten, aber noch nicht archivierten News auf. Die maximale Anzahl der Einträge kann über die Eigenschaft „latestLimit“ festgelegt werden.
• SINGLE: Eine bestimmte Nachricht wird vollständig angezeigt. AMENU: Ein Menü der archivierten News wird erzeugt, das in bestimmte Zeiträume unterteilt ist.
• SEARCH: Suchfunktion innerhalb der News

Im aktuellen Beispiel wird „LIST“ verwendet. Über „Ausgangspunkt“ definieren Sie, von wo die News entnommen werden sollen. Da Sie die News innerhalb des SysOrdners definiert haben, wird dieser hier angegeben. Das waren schon die Grundeinstellungen, Sie können die News jetzt im Frontend aufrufen. Um die Ausgabe der News-Erweiterung anzupassen, wird eine Template-Datei mitgeliefert. Zu finden ist sie im Verzeichnis „typo3/typo3/ext/tt_news/pi“ unter dem Namen „news_template.tmpl“. Informationen dazu, wie Sie die News anpassen können, folgen später.

Um die Anzeige der News genauer zu bestimmen, klicken Sie in der Seite „News“ im Bereich Plugin auf „Bearbeiten“ und wechseln in den Reiter „Template“. An dieser Stelle kann unter anderem die Bildbreite der Grafiken innerhalb von News-Beiträgen und die Länge der Untertitel konfiguriert werden. Die News-Konfiguration ist damit aber noch nicht abgeschlossen. Sobald Sie die Seite „News“ im Frontend aufrufen, werden lediglich der Untertitel oder, falls kein Untertitel vorhanden, jeweils die ersten 300 Zeichen des Textes angezeigt. Ein Klick auf die Überschrift oder den Link „[more]“ bringt nicht das gewünschte Ergebnis, der vollständige Text erscheint nicht. Um das zu realisieren, müssen Sie zunächst im Menü eine neue Seite anlegen. Diese nennen Sie beispielsweise „Einzelansicht“ und wählen als Typ „Nicht im Menü“. Achten Sie hierbei darauf, die Seite nicht zu verstecken und legen Sie als Inhaltselement ebenfalls das Plugin „News“ an. Als „Objekt“ wählen Sie dieses Mal den Typ „Single“. Der Ausgangspunkt ist der Sysfolder mit den News. Zu guter Letzt fügen Sie dem TypoScript-Template der News-Seite noch Folgendes hinzu:

plugin.tt_news { PIDitemDisplay = 40 }

Vergessen Sie nicht, als PID der Seite „Einzelansicht“ einzutragen. Der Aufruf der Seite im Frontend liefert das gewünschte Ergebnis.

Die Ausgabe anpassen

Die Ausgabe der News funktioniert jetzt, aber es mangelt noch am Feinschliff. Als Erstes fällt das englische Datumsformat auf. Um es in ein deutsches Format umzuwandeln, geben Sie im Setup Folgendes an:

plugin.tt_news {
	displayList.date_stdWrap.strftime= %d.%m.%Y 
	displaySingle.date_stdWrap.strftime= %d.%m.%Y
}

Durch diese Syntax wird das Datum im Format „dd.mm.yyyy“ ausgegeben. Ein zweites Problem stellen eventuell die englischen Beschreibungstexte wie „more“ und Ähnliches dar. Auch sie lassen sich ganz einfach umstellen, indem Sie das Setup ergänzen:

config.sys_language_uid = 1
config.language = de
config.locale_all = de_DE
config.locale_all = german
config.locale_all = de_DE.ISO8859-1

Dadurch werden die deutschen Beschreibungen geladen. Bleibt die Frage, wie sich die Standardtexte, also „mehr“ und andere ändern lassen. Öffnen Sie dazu die Datei „typo3/typo3conf/ext/tt_news/pi/locallang.php“, in der die Standardtexte für alle Sprachen enthalten sind. Suchen Sie hier nach dem betreffenden Abschnitt und ändern Sie die Werte entsprechend ab:

'de' => Array (
'latestHeader' => 'Aktuelles:',
'textCatLatest' => 'Kat:',
'textCat' => 'Kategorie:',
'textNewsAge' => 'Alter:',
'more' => '[mehr]',
[...]
'noNewsIdMsg' => 'Keine news_id übergeben.',
'searchButtonLabel' => 'Suchen',
'altTextCatSelector' => 'Nur diese Kategorie anzeigen:',
'altTextCatShortcut' => 'Gehe zu:',
),

Bevor Sie Änderungen an dieser Datei vornehmen, sollten Sie eine Sicherheitskopie machen. Falls Probleme mit der „locallang.php“ auftreten, kann die Datei bequem wiederhergestellt werden. Die Designvorlage dürfen Sie selbstverständlich auch anpassen. Kopieren Sie dazu die News-Designvorlage „typo3/ext/tt_news/pi/news_template.tmpl“ nach „fileadmin/_temp_/“. Um diese Datei zu laden, muss das Setup entsprechend erweitert werden:

plugin.tt_news {
	templateFile = fileadmin/_temp_/news_template.tmpl
}

Durch die Verwendung der mitgelieferten Designvorlage ersparen Sie sich eine Menge Arbeit und bekommen eine Übersicht über die verwendeten Marker. Der Quelltext der Designvorlage wirkt auf den ersten Blick etwas unübersichtlich, macht in dieser Form jedoch durchaus Sinn. Im ersten Bereich wird man über die möglichen Marker informiert. Im weiteren Verlauf der Datei finden Sie diverse Teilbereiche, die die einzelnen Objekte bzw. Codes wie „LATEST“, „LIST“ usw. beschreiben. Für „LIST“ sieht das HTML-Template wie folgt aus:

<!-- ###TEMPLATE_LIST### begin --> 
	<!-- ###CONTENT### begin -->
		<!-- ###NEWS### begin -->
			###GW1B###
			<strong>
			<!--###LINK_ITEM###-->
			###NEWS_TITLE###
			<!--###LINK_ITEM###-->
			</strong>
			###GW1E### ###GW2B### - ###NEWS_DATE### ###GW2E###
			###GW1B### ###NEWS_SUBHEADER### ###GW1E###<br />
			###GW2B###By ###NEWS_AUTHOR###, ###NEWS_TIME### <br />
			Category: ###NEWS_CATEGORY### 
			###GW2E### 
			###NEWS_IMAGE###
			###NEWS### 
			###CONTENT###
			###GW2B###
			<!--###LINK_PREV###-->
			Prev
			<!--###LINK_PREV###-->
			###BROWSE_LINKS###
			<!--###LINK_NEXT###-->
			Next
			<!--###LINK_NEXT###-->
			###GW2E###
<!-- ###TEMPLATE_LIST### end -->

Diesen Code können Sie ganz nach Belieben anpassen. Wer mag, kann die etwas schwerfällige Tabellenstruktur „CSS-like“ umwandeln oder überflüssige Marker löschen. Eine weitere Möglichkeit zur Anpassung der News-Ausgabe bietet der „Constant Editor“. Rufen Sie ihn auf und wählen Sie unter „Category“ „PLUGIN.TT_NEWS“. Hier können Sie Werte wie Hintergrundfarbe oder Bildbreite anpassen.

Eine eigene Extension entwerfen

Am besten lässt sich die Entwicklung einer Extension anhand eines Frontend-Plugins zeigen. Wie Sie ein solches Plugin erstellen, wird im Folgenden Schritt für Schritt demonstriert. Rufen Sie zunächst den Extension Manager auf und gehen Sie im oberen Listenfeld auf „Make new extension“. Als Extension Key tragen Sie „user_neufeld“ ein. Über „General info“ werden allgemeine Daten zur Extension hinterlegt:

Allgemeine Angaben zur Extension.

Titel, Beschreibung, Name und Ähnliches können Sie beliebig angeben. Wichtig ist lediglich, dass Sie unter „Category“ die Frontend Plugins einstellen. Mit „Update“ speichern Sie schließlich die Daten. Jetzt geht es zur Kategorie „Extend existing Tables“. Wie der Name unschwer erkennen lässt, können Sie mit ihr eine bestehende Datenbanktabelle durch zusätzliche Felder erweitern. Bei „Which table“ stellen Sie „Content“ (tt_news) ein. Zunächst soll ein neues Feld, das einen Rich-Text-Editor enthält, angelegt werden. Über „field name“ bestimmen Sie den Namen des Datenbankfeldes; geben Sie hier „meinrte“ ein. Bei der Bezeichnung des Feldes sollten Sie ausschließlich Kleinbuchstaben und keine Sonderzeichen verwenden. Über „Field title“ legen Sie den Text fest, der vor dem Formularfeld angezeigt wird. Im aktuellen Beispiel kommt hier „Mein RTE“ zum Einsatz (normalerweise wird an dieser Stelle ein englischer Bezeichner verwendet; wer möchte, kann also auch „My RTE“ notieren). Als „Field type“ stellen Sie „Text area with RTE“ ein.

Über Update generieren Sie das neue Feld. Das führt zu einer erweiterten Ansicht, in der unter „Rich Text Editor Mode“ der Wert „Typical basic setup“ (new „Bodytext“ field based on CSS stylesheets) eingestellt wird. Im unteren Bereich dürfen Sie jetzt ein weiteres Formularfeld anlegen, über das sich später Grafiken einfügen lassen. Als „Field name“ wählen Sie „meinbild“, als „Field title“ dann „Mein Bild“ und zuletzt als „Field type“ „Files“. Unter „Extensions“ stellen Sie „Web-imagefiles“ ein. Über „Number of files“ entscheiden Sie, wie viele Dateien später maximal geladen werden können. Stellen Sie hier „4“ ein. Der gleiche Wert wird bei „Size of selected box“ eingestellt. Jetzt aktivieren Sie noch „Show thumbnails“ und Sie erhalten automatisch die Vorschaugrafiken der ausgewählten Grafiken im Backend angezeigt. Mit „Update“ wird auch dieses Feld angelegt.

Im nächsten Schritt sollen Sie das Frontend-Plugin erzeugen. Zeigen Sie dazu im oberen Fensterbereich auf das Plus-Symbol neben Frontend-Plugins. Den Titel des Plugins dürfen Sie frei wählen; angezeigt wird er später im Backend. Im aktuellen Beispiel ist „Neue Felder“ als Titel eingestellt. Unter „Apply a set of extended fields“ markieren Sie „Content“ (tt_content) (3 fields).

Im nächsten Schritt legen Sie fest, wie das Plugin nutzbar sein soll. Als Option wählen Sie hier das bereits voreingestellte „Add to Insert Plug-in list in Content Elements“. Damit beim Anlegen eines neuen Seitenelements das Plugin im Assistenten angezeigt wird, müssen Sie zusätzlich die Checkbox „Add icon to New Content Element wizard“ aktivieren. Mit „Update“, „View result“ und „Write“ werden die Änderungen gespeichert. Die angelegte Extension ist jetzt im Extension Manager verfügbar. Rufen Sie ihn auf, zeigen Sie auf „Available extensions to install“ und Sie sehen im Bereich „Frontend Plugin“ die eben erstellte Erweiterung. Allzu viel ist mit der Erweiterung bislang nicht anzufangen, sie muss erst installiert werden. Nach der Installation dürfen Sie die Extension testen. Rufen Sie dazu eine neue Seite auf und wählen Sie „Seiteninhalt anlegen“. Im Bereich „Plugins“ wird jetzt Ihre Erweiterung angezeigt:

Das neue Plugin erscheint.

Nach dem Einfügen des neuen Seiteninhalts werden die beiden Felder „Mein RTE“ und „Mein Bild“ präsentiert. Das ist aber nur ein erster Schritt, denn das Formular lässt sich noch weiter anpassen. Öffnen Sie dazu die Datei „typo3/typo3conf/ext/user_neufeld/ext_tables“.

"user_neufeld_meinrte" => Array (
	"exclude" => 1,
	"label" => "LLL:EXT:user_neufeld/locallang_db.php:tt_content.user_neufeld_meinrte",
	"config" => Array (
		"type" => "text",
		"cols" => "30",
		"rows" => "5",
		"wizards" => Array (
			"_PADDING" => 2,
			"RTE" => Array (
				"notNewRecords" => 1,
				"RTEonly" => 1, "type" => "script",
				"title" => "Full screen Rich Text Editing ",
				"icon" => "wizard_rte2.gif",
				"script" => "wizard_rte.php",
			),
		),
	)
	"user_neufeld_meinbild" => Array (
		"exclude" => 1,
		"label" => "LLL:EXT:user_neufeld/locallang_db.php:tt_content.user_neufeld_meinbild",
		"config" => Array (
			"type" => "group",
			"internal_type" => "file",
			"allowed" => "gif,png,jpeg,jpg"
			"max_size" => 500,
			"uploadfolder" => "uploads/tx_userneufeld",
			"show_thumbs" => 1,
			"size" => 4,
			"minitems" => 0,
			"maxitems" => 4,
		)
	),
);

Nun lassen sich die beiden Felder anpassen. Soll das Feld „Mein Bild“ eine Größe von 5 statt der eigentlich festgelegten Größe 4 haben, wird der Wert „size => 4“ in „size => 5“ geändert. Auf diese Weise gleichen Sie das grundlegende Erscheinungsbild der Felder an. Es sind allerdings nicht nur „kosmetische“ Korrekturen möglich. Fügen Sie in eine Seite das neue Inhaltselement ein und rufen die Seite im Frontend auf, bekommen Sie zunächst einmal wenig Spektakuläres zu Gesicht: Das Plugin funktioniert zwar, einsetzbar ist es aber noch nicht.

Das Einzige, was ausgegeben wird, ist eine Dummy-Seite, die natürlich nicht praxistauglich ist. Verantwortlich für diese Darstellung ist die Datei „type3/typo3conf/ext/user_neufeld/class.user_neufeld_pi1.php“:

function main($content,$conf){
$this->conf=$conf;
$this->pi_setPiVarDefaults();
$this->pi_loadLL();
$content='
	<strong>This is a few paragraphs:</strong><br />
	<p>This is line 1</p>
	<p>This is line 2</p>
	<h3>This is a form:</h3>
	<form action="'.$this->pi_getPageLink($GLOBALS['TSFE']->id).'" method="POST">
	<input type="hidden" name="no_cache" value="1">
	<input type="text" name="'.$this-> prefixId.'[input_field]" value="'.htmlspecialchars($this->piVars['input_field']).'">
	<input type="submit" name="'.$this-> prefixId.'[submit_button]" value="'.htmlspecialchars($this->pi_getLL('submit_button_label')).'">
	</form>
	<br />
	<p>You can click here to '.$this-> pi_linkToPage('get to this page again',$GLOBALS['TSFE']->id).'</p>';

Bevor Sie sich an das Abändern dieser Datei machen, werfen Sie einen Blick hinter die Kulissen: Die Funktion „main()“ übergibt den Inhalt der Variablen „$content“ an die Funktion „pi_wrapInBaseClass()“, die in der Datei „typo3/tslib/class.tslib_pibase.php“ definiert ist. Den Zweck dieser Funktion zeigt ein Blick in die entsprechende Datei:

function pi_wrapInBaseClass($str)
	{ return '<div class="'.str_replace('_','-',$this->prefixId).'">'.$str.' </div>';}

Die Funktion „pi_wrapInBaseClass()“ ist also dafür verantwortlich, den übergebenen HTML-Code in einem <div>-Tag zu wrappen.

Fazit

Sie haben gesehen, wie einfach sich eigene Extensions entwickeln beziehungsweise bestehende in die eigene TYPO3-Umgebung integrieren lassen. Da es mittlerweile zahlreiche und gute Extensions gibt, sollten Sie sich zunächst auf den einschlägigen Seiten informieren, ob nicht schon eine für Ihre Zwecke existiert. Denn eingebunden sind bestehende Erweiterungen schnell und unkompliziert. Die Eigenentwicklung ist hingegen aufwändig und damit meist sehr kostenintensiv.