In diesem Dokument wird beschrieben, wie Sie das Seiten-Authoring in der modernen Touch-optimierten Benutzeroberfläche anpassen. Es gilt nicht für die klassische Benutzeroberfläche.
AEM bietet verschiedene Möglichkeiten zum Anpassen der Funktionsweise des Seiten-Authorings (und der Konsolen) Ihrer Authoring-Instanz.
Clientbibliotheken
Mit Clientbibliotheken können Sie die Standardimplementierung um neue Funktionen erweitern und gleichzeitig Standardfunktionen, -objekte und -methoden wiederverwenden. Bei der Anpassung können Sie unter /apps.
Ihre eigene Clientbibliothek erstellen. Die neue Clientbibliothek muss:
cq.authoring.editor.sites.page
als Abhängigkeit aufweisencq.authoring.editor.sites.page.hook
-Kategorie angehörenÜberlagerungen
Überlagerungen basieren auf Knotendefinitionen und ermöglichen es Ihnen, Standardfunktionen (in /libs
) mit Ihren eigenen benutzerdefinierten Funktionen (in /apps
) zu überlagern. Wenn Sie eine Überlagerung erstellen, ist keine 1:1-Kopie des Originals erforderlich, da die Sling-Ressourcenzusammenführung das Vererben zulässt.
Weitere Informationen finden Sie in der JS-Dokumentation.
Diese Funktionen können auf verschiedene Arten verwendet werden, um die Seiten-Authoring-Funktionen in Ihrer AEM-Instanz zu erweitern. Unten behandeln wir allgemein eine Auswahl von Möglichkeiten.
Weitere Informationen finden Sie unter:
Dieses Thema wird auch in der AEM Gems-Sitzung Anpassung der Benutzeroberfläche für AEM 6.0 behandelt.
Sie dürfen keinerlei Änderungen im Pfad /libs
vornehmen,
da der Inhalt von /libs
überschrieben wird, wenn Sie die Instanz das nächste Mal aktualisieren. (Außerdem kann der Inhalt auch durch Anwenden von Hotfixes oder Feature Packs überschrieben werden.)
Die empfohlene Methode für Konfigurations- und sonstige Änderungen sieht wie folgt aus:
/libs
) unter /apps
neu./apps
vor.Wenn Sie eine Seite bearbeiten, gibt es verschiedene verfügbare Modi. Diese Modi werden mithilfe von Ebenen implementiert. Sie ermöglichen Zugriff auf verschiedene Funktionen für denselben Seiteninhalt. Die Standardebenen sind: Bearbeiten, Vorschau, Anmerken, Entwickler und Targeting.
Eine Standard-AEM-Instanz stellt die MSM-Ebene bereit. Diese Ebene greift auf Daten für Multi-Site-Management zu und hebt sie in der Ebene hervor.
Um sie im Einsatz zu sehen, bearbeiten Sie eine beliebige We.Retail-Sprachkopie-Seite (oder eine beliebige andere Live Copy-Seite) und wählen Sie den Modus Live Copy-Status aus.
Sie finden die MSM-Ebenendefinition (als Referenz) in:
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js
Dies ist ein Beispielpaket, das die Erstellung einer neuen Ebene (Modus) zeigt. Hier ist es eine neue Ebene zur MSM-Ansicht.
CODE AUF GITHUB
Den Code dieser Seite finden Sie auf GitHub.
Der Asset-Browser zeigt Assets verschiedener Arten und Kategorien (z. B. Bilder, Dokumente usw.). Die Assets können auch anhand dieser Asset-Kategorien gefiltert werden.
aem-authoring-extension-assetfinder-flickr
ist ein Beispielpaket, das das Hinzufügen einer neuen Gruppe zur Asset-Suche demonstriert. Dieses Beispiel verbindet sich mit dem öffentlichen Stream von Flickr und zeigt ihn im Seitenbereich.
CODE AUF GITHUB
Den Code dieser Seite finden Sie auf GitHub.
Beim Authoring von Seiten muss der Benutzer oft aus verschiedenen Ressourcen (z. B. Seiten, Komponenten, Assets usw.) auswählen. Dabei kann beispielsweise eine Liste verwendet werden, aus der der Autor ein Element auswählen muss.
Um die Größe der Liste (auf die relevanten Einsatzszenarios) zu beschränken, kann ein Filter in Form eines benutzerdefinierten Prädikats implementiert werden. Wenn z. B. der Benutzer durch die pathbrowser
-Granite-Komponente den Pfad zu einer bestimmten Ressource auswählen kann, können die gezeigten Pfade auf folgende Art gefiltert werden:
com.day.cq.commons.predicate.AbstractNodePredicate
implementieren.pathbrowser
verwenden.Weitere Details zum Erstellen einer benutzerdefinierten Eigenschaft finden Sie in diesem Artikel.
Die Implementierung einer benutzerdefinierten Eigenschaft durch die Implementierung der Schnittstelle com.day.cq.commons.predicate.AbstractNodePredicate
funktioniert auch in der klassischen Benutzeroberfläche.
In diesem Knowledge Base-Artikel finden Sie ein Beispiel für die Implementierung einer benutzerdefinierten Eigenschaft in der klassischen Benutzeroberfläche.
Jede Komponente hat (in der Regel) eine Symbolleiste, die Zugriff auf eine Reihe von Aktionen bietet, die mit dieser Komponente durchgeführt werden können.
aem-authoring-extension-toolbar-screenshot
ist ein Beispielpaket, das die Erstellung einer benutzerdefinierten Symbolleistenaktion zum Rendern von Komponenten demonstriert.
CODE AUF GITHUB
Den Code dieser Seite finden Sie auf GitHub.
Bei der Standardinstallation von AEM:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Enthält Definitionen der verschiedenen verfügbaren Editoren.
Es gibt eine Verknüpfung zwischen dem Editor und den einzelnen Ressourcenarten (wie Komponenten), die ihn verwenden können:
cq:inplaceEditing
Beispiel:
/libs/foundation/components/text/cq:editConfig
/libs/foundation/components/image/cq:editConfig
property: editorType
Definiert die Art des Inline-Editors, der verwendet wird, wenn die Bearbeitung im Kontext für diese Komponente ausgelöst wird, z. B. text
, textimage
, image
, title
.
Weitere Einstellungen des Editors können mit einem config
-Knoten, der Konfigurationen enthält, sowie einem weiteren plugin
-Knoten mit notwendigen Plug-in-Konfigurationsdetails konfiguriert werden.
Das folgende Beispiel zeigt die Definition von Seitenverhältnissen für das Bildbeschneidungs-Plug-in der image-Komponente. Beachten Sie, dass aufgrund der Möglichkeit von begrenzten Bildschirmgrößen die Beschneidungsverhältnisse in den Vollbild-Editor verlegt wurden und nur dort sichtbar sind.
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="image">
<config jcr:primaryType="nt:unstructured">
<plugins jcr:primaryType="nt:unstructured">
<crop jcr:primaryType="nt:unstructured">
<aspectRatios jcr:primaryType="nt:unstructured">
<_x0031_6-10
jcr:primaryType="nt:unstructured"
name="16 : 10"
ratio="0.625"/>
</aspectRatios>
</crop>
</plugins>
</config>
</cq:inplaceEditing>
Beachten Sie, dass Beschneidungsverhältnisse, die durch die Eigenschaft ratio
definiert werden, in AEM als Höhe/Breite definiert sind. Dies unterscheidet sich von der herkömmlichen Definition der Breite/Höhe und ist auf Kompatibilität mit Altsystemen zurückzuführen. Die Benutzer, die die Seite erstellen, bemerken keinen Unterschied, vorausgesetzt, dass Sie die Eigenschaft name
klar definieren, da diese auf der Benutzeroberfläche angezeigt wird.
So erstellen Sie einen neuen Editor für Bearbeitung im Kontext (innerhalb Ihrer clientlib):
Ein Beispiel finden Sie unter:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
Implementierung:
setUp
tearDown
Registrieren Sie den Editor (einschließlich des Konstruktors):
editor.register
Geben Sie die Verknüpfung zwischen dem Editor und jedem Ressourcentyp an (wie in der Komponente), der ihn verwenden kann.
aem-authoring-extension-inplace-editor
ist ein Beispielpaket, das die Erstellung eines neuen Editors für Bearbeitung im Kontext in AEM demonstriert.
CODE AUF GITHUB
Den Code dieser Seite finden Sie auf GitHub.
Es ist möglich, eine Komponente so zu konfigurieren, dass sie über mehrere Editoren für Bearbeitung im Kontext verfügt. Wenn mehrere Editoren für Bearbeitung im Kontext konfiguriert sind, können Sie den entsprechenden Inhalt auswählen und den entsprechenden Editor öffnen. In der Dokumentation zur Konfigurieren mehrerer Editoren für Bearbeitung im Kontext finden Sie weitere Informationen.
So fügen Sie eine neue Aktion zur Seitensymbolleiste hinzu, z. B. eine Aktion Zurück zu Sites (Konsole).
aem-authoring-extension-header-backtosites
ist ein Beispielpaket, das die Erstellung einer benutzerdefinierten Kopfzeilenleistenaktion demonstriert, mit der der Benutzer zurück zur Sites-Konsole springt.
CODE AUF GITHUB
Den Code dieser Seite finden Sie auf GitHub.
Der standardmäßige Workflow Aktivierungsanfrage wird automatisch ausgelöst, wenn ein Inhaltsautor nicht über die erforderlichen Replikationsrechte verfügt.
Um das Verhalten bei dieser Aktivierung anzupassen, können Sie den Aktivierungsanfrage-Workflow überlagern:
Überlagern Sie in /apps
den Sites-Assistenten:
/libs/wcm/core/content/common/managepublicationwizard
Dadurch wird die folgende gemeinsame Instanz überlagert:
/libs/cq/gui/content/common/managepublicationwizard
Aktualisieren Sie das Workflow-Modell und je nach Bedarf relevante Konfigurationen/Skripte.
Entziehen Sie allen entsprechenden Benutzern für alle relevanten Seiten das Recht zur replicate
-Aktion, damit dieser Workflow standardmäßig ausgelöst wird, wenn ein Benutzer versucht, eine Seite zu veröffentlichen (oder zu replizieren).