Eigene Views und Layouts für TYPO3 Extensions

TYPO3 ist ein Content Management System, das sich bereits mit einer reichhaltigen Auswahl von Funktionen installieren lässt. Mit Hilfe einer großen Anzahl von TYPO3 Extensions lassen sich die Funktionen fast beliebig erweitern. Wie man dabei eine Extension mit geringem Aufwand auf ein eigenes Layout anpasst, schildern wir Ihnen in diesem Kapitel.

Funktion und Layout bei TYPO3 Extensions

Ein beliebtes Thema in der Welt der Content Management Systeme im Allgemeinen und bei TYPO3 im Speziellen ist, dass man eine Extension gefunden hat, mit der man eine Funktion auf einer Webseite realisiert. Denken wir uns dazu ein Beispiel aus der Praxis aus: Wir möchten Nachrichten in unserer Webseite in einer Listen- und Einzelansicht darstellen. Die Technik dazu haben wir mit Hilfe einer Extension gefunden. Aber das Layout der Extension passt nicht so ganz in unser Projekt. 

Was machen wir nun? Nehmen wir uns die Extension und programmieren sie um? Wie machen wir die Gestaltung? Müssen wir die Extension dazu umgestalten? Wie dies am Besten funktioniert, schildern wir Ihnen in den folgenden Absätzen. 

Aufbau und Anbindung eigener Views

Eine Extension in TYPO3 ist so aufgebaut, dass sie das MVC-Konzept umsetzt, also die Trennung von der Modellierung der Daten, deren Verarbeitung und deren Darstellung. Für den letzten Punkt der Darstellung setzen Extensions Fluid ein. Diese Dateien mit der Endung HTML bekommen Daten in vorbereiteter Form geliefert und erzeugen daraus, ggf. unter Anwendung einer Logik, HTML-Code zur Darstellung in einer TYPO3 Webseite. 

Diese Dateien liegen in einer TYPO3 Extension immer in einem bestimmten Verzeichnis. Unter myextension / Ressources / Private finden sich mehrere Verzeichnisse mit Dateien, die den HTML-Quelltext und damit das Layout einer Extension bereitstellen. Im Regelfall sind dies Fluid-Dateien. Diese sind in die Verzeichnisse 

  • Templates 
  • Layouts 
  • Partials 

geordnet. 

Wenn wir nun das Layout einer Extension auf unser eigenes Design anpassen wollen, dann ist unser erster Gedanke: An dieser Stelle müssen wir anpacken, um das Layout zu ändern. Dies ist jedoch nicht notwendig. 

TYPO3 bietet uns die Möglichkeit, eigene Dateien zu erzeugen und unserem System anzubieten. Die Vorteile dieses Verhaltens sind folgende: 

  • Wir können die Extension jederzeit updaten 
  • Die originalen Dateien bleiben unverändert 
  • Wir müssen nur die Dateien bearbeiten, deren Layout oder Funktion wir tatsächlich anpassen wollen 

Die nötigen Views identifizieren

Um einer Extension ein eigenes Layout zu geben, ist es nicht nötig, Kopien aller bereitgestellten Views anzulegen. Meist sind es nur zwei bis drei Views, die man bearbeiten muss, um eigene Designs in der Webseite umzusetzen. 

Oft sind dies Views, die als Standard in vielen Extensions verwendet werden. Man hat meist die List View für eine Übersicht und Show View für eine Einzelansicht. Um bei einer Extension die Views zu identifizieren, die man wirklich bearbeiten muss, bieten sich zwei Verhaltensweisen an. 

Link nutzen

Wenn man eine Extensions eingebaut hat und durch die unterschiedlichen Ansichten navigiert, geschieht durch meist durch Links. Diese folgen einer klaren Syntax, die von TYPO3 beim Aufruf des Links zerlegt und verarbeitet wird. In einem Teil des Links wird eine Action angesprochen, wie in diesem Beispiel: 

tx_extmodel_model%5Baction%5D=delete

Da dieser Link vercodet ist, um in der Adresseile des Browsers korrekt dargestellt zu werden, ergibt sich nach dem Decoding folgende Syntax: 

tx_extmodel_model[action]=delete

Hier wird also eine bestimmte Action angesprochen. Beim Aufruf einer Extension wird dieser Parameter an den Controller übergeben, abgearbeitet und der gleichnamig benannten View übergeben. Damit haben Sie den Namen Ihrer View! 

Controller oder Views bearbeiten

Wenn Sie in einer Extension eine größere Zahl von Views haben, können Sie den einzelnen Dateien einen Quellcode mitgeben. Wird dieser Quellcode angezeigt, haben Sie die richtige Datei gefunden. 

Eine andere Möglichkeit ist, den Controller zu bearbeiten. Hier können Sie ebenfalls den einzelnen Action eine Meldung hinzufügen, um die richtige Action zu identifizieren. Mit dem Namen der Action haben Sie dann auch die richtige View. 

Suchpfade der Extension im Setup überschreiben

TYPO3 nutzt beim Rendering der Inhalte einer Extension Fluid. Diese Templating Engine nutzt ein allgemein übliches Prinzip der Hierarchie von Darstellungen, wie es sich z. B. auch beim e-Commerce System Magento oder der Twig-Engine von Symfony wiederfindet. Dabei werden bestimmte Views angesteuert, die der Extension über TypoScript bekannt gemacht werden. Dies geschieht dabei nicht auf der Basis einzelner Dateien, sondern man gibt Suchpfade für eine Extension an. 

Setup mit einzelnen Pfaden

Im Regelfall hat man bei einer Extension drei Pfade, mit denen man TYPO3 beim Rendern der Webseite mitteilt, wo es die Vorlagen suchen soll: 

Beispiel für Suchpfade in Setup einer Extension

 plugin.tx_alteextension {
  view {
    # cat=plugin.tx_alteextension/file; type=string; label=Path to template root (FE)
    templateRootPath {
      EXT:alteextension/Resources/Private/Templates/      
    }
    # cat=plugin.tx_alteextension/file; type=string; label=Path to template partials (FE)
    partialRootPath {
      EXT:alteextension/Resources/Private/Partials/      
    }
    # cat=plugin.tx_alteextension/file; type=string; label=Path to template layouts (FE)
    layoutRootPath {
      EXT:alteextension/Resources/Private/Layouts/      
    }
  }

In diesem Fall geben wir dem System drei Verzeichnisse vor, in denen es nach einer entsprechenden Datei suchen soll: 

  • templateRootPath - hier sucht das System die Views, die es aufrufen soll 
  • partialRootPath - hier liegen die Teile von Fluid-Templates, in die man die Vorlagen optional aufgegliedert hat 
  • layoutRootPath - hier liegen die Vorlagen für das grundlegende Layout, in das die einzelnen Partials und Sections einer Extension eingebaut werden 

Diese einzelnen Pfade kann man nun mit eigenen Pfaden überschreiben, um die Werte der Extension mit eigenen zu ersetzen: 

Beispiel für Suchpfade in Setup einer Extension

 plugin.tx_alteextension {
  view {
    templateRootPath {
      EXT:meineextension/Resources/Private/Templates/      
    }
    partialRootPath {
      EXT:meineextension/Resources/Private/Partials/      
    }
    layoutRootPath {
      EXT:meineextension/Resources/Private/Layouts/      
    }
  }
}

Wichtig dabei ist: Man muss diese Information nach der Einbindung einer Extension ins System Template laden! Daher ist es wichtig, die eigene Extension mit den eigenen Fluid Templates nach der eingebundenen Extension zu laden. 

Setup mit hierarchisch geordneten Pfaden

Um das Risiko auszuschließen, dass man Extensions in der falschen Reihenfolge lädt und die eigenen Suchpfade durch die Standard der fremden Extension wieder überschrieben werden, ist man dazu übergegangen, nicht einen einzelnen Suchpfad einzugeben, sondern mehrere Pfade anzugeben, die hierarchisch gegliedert werden. Dies hat den Vorteil, dass man die Extensions in beliebiger Reihenfolge einbinden kann. Man muss dabei nur die Hierarchie beachten. 

Mehrere Suchpfade in Setup (Vorlage)

 plugin.tx_alteextension {
  view {
    templateRootPaths {
      10 = EXT:alteextension/Resources/Private/Templates/      
    }
    partialRootPaths {
      10 = EXT:alteextension/Resources/Private/Partials/      
    }
    layoutRootPaths {
      10 = EXT:alteextension/Resources/Private/Layouts/      
    }
  }
}

Die Pfade findet man zum einen, wenn man in das entsprechende Setup der Extension sieht. Der andere Weg ist die Benutzung des TypoScript Objekt Browsers, der die Pfade der Views aller Extensions anzeigt. Das oben angegebene Beispiel einer fremden Extension kann man mit den folgenden Werten überschreiben: 

Mehrere Suchpfade in Setup (Eigene Extension)

 plugin.tx_alteextension {
  view {
    templateRootPaths {
      20 = EXT:meineextension/Resources/Private/Templates/
    }
    partialRootPaths {
      20 = EXT:meineextension/Resources/Private/Partials/
    }
    layoutRootPaths {
      20 = EXT:meineextension/Resources/Private/Layouts/
    }
  }
}

Reihenfolge beim Rendering der Webseite

Wenn man dem System alle Suchpfade bereitgestellt hat, geht dieses beim Rendering der Webseite folgendermaßen vor: 

  • Das System bekommt die Information, eine bestimmte View zu laden. 
  • Das System bekommt über Typoscript die Information, welche Suchpfade ihm zur Verfügung stehen. 
  • Nun geht das System nach Hierarchie gestaffelt vor, um die richtige View zu finden. 
  • Im hierarchisch am obersten stehenden Pfad (hier: Nummer 20) wird gesucht, ob sich dort eine passende View findet 
  • Wenn sich dort keine passende View findet, sucht das System in der nächst folgenden Ebene nach einer passenden View 

Wie man hier erkennt: Manchmal kommt eine Extension mit Dutzenden von Views für verschiedene Ansichten. Oft braucht man aber nur zwei oder drei davon. In diesem Fall sollte man auch nur diese Views, ggf. mit den anschließenden Partials, in die eigene Struktur übernehmen. Alle anderen Views lädt sich die Webseite dann aus der eingebundenen Extension. 

Thomas Berscheid ⧉ 30.05.2020