Anpassen der Kernkomponenten
Die Kernkomponenten implementieren verschiedene Muster, die eine einfache Anpassung ermöglichen, von einfachen Stilen bis hin zur Wiederverwendung erweiterter Funktionen.
TIPPFlexible Architektur
Die Kernkomponenten wurden von Anfang an so entworfen, dass sie flexibel und erweiterbar sind. Ein Überblick über ihre Architektur zeigt an, wo Anpassungen vorgenommen werden können.
- Im Dialogfeld „Design“ wird definiert, was Autoren im Dialogfeld „Bearbeiten“ tun können und was nicht.
- Das Dialogfeld „Bearbeiten“ zeigt Autoren nur die Optionen an, die sie verwenden dürfen.
- Das Sling-Modell überprüft und bereitet den Inhalt für die Ansicht (Vorlage) vor.
- Das Ergebnis des Sling-Modells kann für die SPA-Anwendungsfälle in JSON serialisiert werden.
- Das HTL rendert die HTML Server-seitig für die herkömmliche Server-seitige Wiedergabe.
- Die HTML-Ausgabe ist semantisch, barrierefrei, suchmaschinenoptimiert und leicht zu gestalten.
Und alle Kernkomponenten implementieren das Stilsystem.
AEM-Projektarchetyp
Der AEM-Projektarchetyp erstellt ein Adobe Experience Manager-Minimalprojekt als Ausgangspunkt für Ihre eigenen Projekte, einschließlich eines Beispiels für eine benutzerdefinierte HTL-Komponente mit SlingModels, um die Logik und ordnungsgemäße Implementierung der Kernkomponenten mit dem empfohlenen Proxy-Muster zu gewährleisten.
Anpassungsmuster
Anpassen von Dialogen
Es ist möglicherweise sinnvoll, die in einem Kernkomponentendialogfeld verfügbaren Konfigurationsoptionen anzupassen, entweder im Dialogfeld „Design“ oder im Dialogfeld „Bearbeiten“.
Jedes Dialogfeld hat eine einheitliche Knotenstruktur. Es wird empfohlen, dass diese Struktur in einer inhärenten Komponente repliziert wird, sodass Sling Ressource Merger und Ausblende-Bedingungen genutzt werden können, um Bereiche des Originaldialogs auszublenden, zu ersetzen oder neu anzuordnen. Die zu replizierende Struktur ist als beliebiger Wert bis zur Registerkartenelement-Knotenebene definiert.
Damit alle Änderungen an einem Dialogfeld in seiner aktuellen Version vollständig kompatibel sind, ist es äußerst wichtig, dass Strukturen unterhalb der Registerkartenelementebene nicht angerührt werden (ausgeblendet, hinzugefügt, ersetzt, neu angeordnet usw.). Stattdessen sollte ein übergeordnetes Tab-Element über die Eigenschaft sling:hideResource ausgeblendet werden (siehe Eigenschaften der Zusammenführung von Sling-Ressourcen) und neue Tab-Elemente hinzugefügt werden, die die maßgeschneiderten Konfigurationsfelder enthalten. sling:orderBefore kann verwendet werden, um die Registerkartenelemente bei Bedarf neu anzuordnen.
Das folgende Dialogfeld zeigt die empfohlene Dialogfeldstruktur sowie das Ausblenden und Ersetzen einer vererbten Registerkarte wie oben beschrieben:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0"
xmlns:jcr="https://www.jcp.org/jcr/1.0"
xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
xmlns:granite="https://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured">
<content jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<tabs jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<originalTab
jcr:primaryType="nt:unstructured"
sling:hideResource="true"/>
<myTab
jcr:primaryType="nt:unstructured"
jcr:title="My Tab"
sling:resourceType="granite/ui/components/coral/foundation/container">
<!-- myTab content -->
</myTab>
</items>
</tabs>
</items>
</content>
</jcr:root>