Seminar TYPO3 v14: Fluid Templates und ViewHelper

Das Seminar behandelt Fluid als zentrale Template-Sprache für TYPO3-v14-Frontends und Extensions. Schwerpunkt sind klare Datenverträge, sichere Ausgabe, wiederverwendbare Komponenten und eine Template-Struktur, die auch bei größeren Projekten beherrschbar bleibt.

Die Inhalte sind auf einzelseminar mit hohem Praxisanteil ausgelegt. Theorie, Demonstration, geführte Konfiguration und kontrollierte Übungen greifen unmittelbar ineinander.

Lernziele

• Layouts, Templates, Partials und Sections klar strukturieren
• Variablen, Bedingungen, Schleifen und ViewHelper sicher einsetzen
• Ausgaben korrekt escapen und lokalisieren
• Menüs und komplexe Daten vor dem Template aufbereiten
• Templates debuggen, testen und hinsichtlich Leistung optimieren

Inhaltsübersicht

1. Fluid-Struktur und Rendering-Kontext
2. Variablen, Pfade und Ausdrücke
3. Bedingungen, Schleifen und Gruppierung
4. Standard-ViewHelper und sichere Ausgabe
5. Partials und Komponenten
6. Menüs und Datenverarbeitung
7. Eigene ViewHelper verantwortungsvoll einsetzen
8. Debugging, Tests und Performance

Kapitel 1: Fluid-Struktur und Rendering-Kontext

Inhaltsübersicht des Kapitels

• Template-Dateien einordnen
• Datenvertrag sichtbar machen
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Template-Dateien einordnen, Datenvertrag sichtbar machen. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 1.1: Template-Dateien einordnen

Fachliche Ausarbeitung: Layouts, Templates, Partials und Sections nach Verantwortlichkeit getrennt. Praktische Umsetzung: Eine unstrukturierte Vorlage in eine wiederverwendbare Hierarchie überführt. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Schritt 1.2: Datenvertrag sichtbar machen

Fachliche Ausarbeitung: Verfügbare Variablen, Datentypen und erwartete Zustände dokumentiert. Praktische Umsetzung: Einen klaren Übergabevertrag zwischen Data Processor und Template erstellt. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 2: Variablen, Pfade und Ausdrücke

Inhaltsübersicht des Kapitels

• Daten sicher adressieren
• Ausdrücke lesbar halten
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Daten sicher adressieren, Ausdrücke lesbar halten. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 2.1: Daten sicher adressieren

Fachliche Ausarbeitung: Objekte, Arrays, Pfade, optionale Werte und leere Zustände ohne versteckte Annahmen verarbeitet. Praktische Umsetzung: Eine verschachtelte Datenstruktur robust ausgegeben. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Schritt 2.2: Ausdrücke lesbar halten

Fachliche Ausarbeitung: Bedingungen und Inline-Syntax nach Komplexität und Wartbarkeit beurteilt. Praktische Umsetzung: Überladene Inline-Ausdrücke in klar benannte Template-Blöcke zerlegt. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 3: Bedingungen, Schleifen und Gruppierung

Inhaltsübersicht des Kapitels

• Verzweigungen gezielt einsetzen
• Listen effizient rendern
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Verzweigungen gezielt einsetzen, Listen effizient rendern. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 3.1: Verzweigungen gezielt einsetzen

Fachliche Ausarbeitung: Fallunterscheidungen, Varianten und Fallbacks mit möglichst wenig Template-Logik umgesetzt. Praktische Umsetzung: Eine Komponente mit mehreren kontrollierten Darstellungszuständen erstellt. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Schritt 3.2: Listen effizient rendern

Fachliche Ausarbeitung: Schleifeninformationen, Gruppierung, Sortierung und leere Listen behandelt. Praktische Umsetzung: Eine gegliederte Ausgabe mit Zwischenüberschriften und Leerzustand aufgebaut. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 4: Standard-ViewHelper und sichere Ausgabe

Inhaltsübersicht des Kapitels

• Passende ViewHelper auswählen
• Escaping bewusst steuern
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Passende ViewHelper auswählen, Escaping bewusst steuern. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 4.1: Passende ViewHelper auswählen

Fachliche Ausarbeitung: Link-, Format-, Medien-, Formular- und Übersetzungs-ViewHelper nach Zweck eingesetzt. Praktische Umsetzung: Mehrere manuelle HTML-Konstruktionen durch geeignete ViewHelper ersetzt. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Schritt 4.2: Escaping bewusst steuern

Fachliche Ausarbeitung: Automatisches Escaping, Rohdaten, HTML-Inhalte und sichere Ausgabegrenzen erklärt. Praktische Umsetzung: Eine riskante Ausgabe analysiert und ohne Funktionsverlust abgesichert. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 5: Partials und Komponenten

Inhaltsübersicht des Kapitels

• Wiederverwendung sinnvoll planen
• Varianten ohne Duplikation abbilden
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Wiederverwendung sinnvoll planen, Varianten ohne Duplikation abbilden. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 5.1: Wiederverwendung sinnvoll planen

Fachliche Ausarbeitung: Partials nach fachlicher Komponente statt nach zufälligem Markup geschnitten. Praktische Umsetzung: Eine wiederkehrende Teaser-Komponente mit expliziten Argumenten erstellt. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Schritt 5.2: Varianten ohne Duplikation abbilden

Fachliche Ausarbeitung: Optionale Parameter, Slots und kleine Darstellungsunterschiede kontrolliert eingesetzt. Praktische Umsetzung: Mehrere Teaser-Varianten aus einer gemeinsamen Komponente gerendert. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 6: Menüs und Datenverarbeitung

Inhaltsübersicht des Kapitels

• Daten vor dem Template vorbereiten
• Komplexität aus Fluid entfernen
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Daten vor dem Template vorbereiten, Komplexität aus Fluid entfernen. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 6.1: Daten vor dem Template vorbereiten

Fachliche Ausarbeitung: MenuProcessor, FilesProcessor und weitere Data Processors für klare View-Daten eingesetzt. Praktische Umsetzung: Ein Menü und zugehörige Medien ohne Datenbanklogik im Template aufgebaut. Ein definierter Kontrollpunkt gleicht Konfiguration, Funktion und redaktionelle Wirkung miteinander ab.

Schritt 6.2: Komplexität aus Fluid entfernen

Fachliche Ausarbeitung: Sortierung, Filterung und Aggregation in geeignete Prozessoren oder Services verlagert. Praktische Umsetzung: Ein überladenes Template auf reine Präsentationslogik reduziert. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 7: Eigene ViewHelper verantwortungsvoll einsetzen

Inhaltsübersicht des Kapitels

• Bedarf für eigene ViewHelper prüfen
• ViewHelper testbar implementieren
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Bedarf für eigene ViewHelper prüfen, ViewHelper testbar implementieren. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 7.1: Bedarf für eigene ViewHelper prüfen

Fachliche Ausarbeitung: Formatierung, wiederkehrende Präsentationslogik und Alternativen wie Data Processor verglichen. Praktische Umsetzung: Für einen konkreten Fall die kleinste geeignete Erweiterungsform ausgewählt. Die Arbeitsschritte werden nachvollziehbar dokumentiert und anhand eines fachlichen Prüfkriteriums kontrolliert.

Schritt 7.2: ViewHelper testbar implementieren

Fachliche Ausarbeitung: Argumente, Rückgabewert, Escaping und Abhängigkeiten eines eigenen ViewHelpers klar definiert. Praktische Umsetzung: Einen kleinen ViewHelper mit automatisiertem Test erstellt. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Kapitel 8: Debugging, Tests und Performance

Inhaltsübersicht des Kapitels

• Rendering-Fehler eingrenzen
• Template-Qualität absichern
• Kontrollpunkt und Dokumentation

Dieses Kapitel behandelt Rendering-Fehler eingrenzen, Template-Qualität absichern. Die Reihenfolge orientiert sich am üblichen Arbeitsprozess von der Vorbereitung über die Umsetzung bis zur Prüfung.

Schritt 8.1: Rendering-Fehler eingrenzen

Fachliche Ausarbeitung: Variablen, Template-Pfade, Cache-Zustände und Fehlermeldungen in einer festen Reihenfolge geprüft. Praktische Umsetzung: Mehrere typische Fluid-Fehler systematisch behoben. Abschließend erfolgt eine Prüfung auf Konsistenz, Wartbarkeit und sichere Wiederholbarkeit.

Schritt 8.2: Template-Qualität absichern

Fachliche Ausarbeitung: Doppelrendering, unnötige ViewHelper-Aufrufe, große Objektgraphen und visuelle Regressionen bewertet. Praktische Umsetzung: Eine Prüfliste und Testfälle für zentrale Komponenten erstellt. Die entstandene Lösung wird mit einer Checkliste geprüft und bei Abweichungen gezielt korrigiert.

Kontrollpunkt und Dokumentation

Die Arbeitsergebnisse des Kapitels werden auf fachliche Vollständigkeit, sichere Konfiguration und reproduzierbare Umsetzung geprüft. Festgestellte Abweichungen werden priorisiert, korrigiert und in einer kompakten Betriebs- oder Redaktionsnotiz festgehalten.

Didaktischer Aufbau

Jeder Themenblock beginnt mit einer Einordnung, wird am System demonstriert und anschließend praktisch umgesetzt. Übungen bauen aufeinander auf, sodass am Ende eine zusammenhängende, prüfbare TYPO3-Konfiguration oder ein vollständiger redaktioneller Arbeitsablauf vorliegt.