Seminar Enonic XP 8 – Seiten, Komponenten und visuelles Editing

Das Seminar vermittelt den Aufbau flexibler Seiten und Komponenten für visuelles Editing in Content Studio 6. Technische Freiheitsgrade werden mit redaktioneller Führung, stabilen Konfigurationen und klaren Renderverträgen ausbalanciert.

Eine Beispielsite erhält mehrere Seitentypen, Regionen, Parts, Layouts, Templates und wiederverwendbare Fragmente. Redaktionelle Bedienbarkeit, Vorschau, Berechtigungen, Fehlerfälle und spätere Frontendänderungen werden systematisch geprüft.

Inhaltsübersicht

1. Site-Scope und Komponentenmodell
2. YAML-Ressourcen und Benennung
3. Pages und Regions
4. Parts und fachliche Komponenten
5. Layouts und Verschachtelung
6. Formulare und Custom Selectors
7. Page Templates und Fragmente
8. Contributions und Processors
9. Preview und Editor Experience
10. Sicherheit, Tests und Release

Lernziele

• Site-Scope und Komponentenarchitektur sicher gestalten
• Pages, Regions, Parts und Layouts mit YAML definieren
• Konfiguration und Rendering klar voneinander trennen
• Templates, Fragmente und Beiträge redaktionell nutzbar machen
• Preview, Tests, Sicherheit und Deployment absichern

Praxisorientierte Lernschritte

1. Site-Scope und Komponentenmodell

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Site als fachlichen und technischen Geltungsbereich festlegen
2. Schritt 2: Page, Part, Layout, Fragment und Template voneinander abgrenzen
3. Schritt 3: eine Komponentenlandkarte für das Beispielprojekt erstellen

2. YAML-Ressourcen und Benennung

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: CMS-Ressourcen in geeigneten Namespaces und Verzeichnissen organisieren
2. Schritt 2: Titel, Beschreibungen und Konfigurationsfelder redaktionsgerecht formulieren
3. Schritt 3: Deskriptoren automatisiert validieren und in der Zielanwendung registrieren

3. Pages und Regions

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Seitentyp mit benötigten Regionen und Konfiguration definieren
2. Schritt 2: Renderer beziehungsweise Frontend-Mapping an den Seitentyp anbinden
3. Schritt 3: leere, teilweise konfigurierte und fehlerhafte Seitenzustände robust behandeln

4. Parts und fachliche Komponenten

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: eine Komponente aus redaktionellem Zweck und Datenbedarf ableiten
2. Schritt 2: Konfiguration, Content-Zugriff und Darstellung sauber trennen
3. Schritt 3: mehrere Instanzen mit unterschiedlichen Einstellungen im Editor testen

5. Layouts und Verschachtelung

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Layoutregionen und zulässige Verschachtelung bewusst begrenzen
2. Schritt 2: responsive Anforderungen und redaktionelle Vorschau abstimmen
3. Schritt 3: komplexe Seitenstruktur auf Bedienbarkeit und Renderkosten prüfen

6. Formulare und Custom Selectors

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Konfigurationsfelder nach Pflicht, Auswahl und Wiederholung modellieren
2. Schritt 2: externe oder dynamische Auswahlwerte über einen Custom Selector bereitstellen
3. Schritt 3: Validierung, leere Werte und nicht mehr verfügbare Optionen behandeln

7. Page Templates und Fragmente

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: wiederkehrende Seitenstrukturen als Template vorbereiten
2. Schritt 2: wiederverwendbare Komponentengruppen als Fragment organisieren
3. Schritt 3: Änderungswirkung und redaktionelle Ownership klar dokumentieren

8. Contributions und Processors

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Seitenausgabe um kontrollierte Skript-, Style- oder Metadatenbeiträge ergänzen
2. Schritt 2: Request- oder Response-Verarbeitung nur an klaren Querschnittspunkten einsetzen
3. Schritt 3: Reihenfolge, Konflikte und Performancewirkung mit Integrationstests prüfen

9. Preview und Editor Experience

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Inline-, Preview- und Edit-Kontext voneinander unterscheiden
2. Schritt 2: aussagekräftige Platzhalter, Hinweise und Fehlerzustände bereitstellen
3. Schritt 3: redaktionelle Kernaufgaben mit Usability- und Abnahmetests überprüfen

10. Sicherheit, Tests und Release

Der Arbeitsblock verbindet fachliche Einordnung, nachvollziehbare Umsetzung und kontrollierte Prüfung. Konfigurationen, Entscheidungen und Prüfergebnisse werden als wiederverwendbare Projektnachweise dokumentiert.

1. Schritt 1: Content- und Konfigurationszugriffe serverseitig autorisieren
2. Schritt 2: Komponentenvertrag, Rendering und Editorinteraktion automatisiert testen
3. Schritt 3: Versionierung, Deployment, Rückfall und Upgrade-Prüfung dokumentieren

Zielgruppe und Vorkenntnisse

Zielgruppe: Enonic- und Frontend-Entwickler, Solution Architects, UX-nahe technische Teams und Content Architects für visuell editierbare Websites.

Vorkenntnisse: Gute Kenntnisse in TypeScript oder Frontend-Entwicklung, Enonic Content-Modellen und Content Studio; für Next.js-basierte Renderer sind React-Kenntnisse erforderlich.

Didaktik und Arbeitsweise

Kurze Fachimpulse werden unmittelbar durch Demonstrationen, strukturierte Konfigurations- oder Implementierungsschritte und kontrollierte Fehlerfälle vertieft. Jede Übung besitzt definierte Ausgangswerte, Prüfpunkte und Dokumentationsanforderungen. Dadurch bleiben die erarbeiteten Abläufe für Projekt- und Betriebsstandards nachvollziehbar.