Die klassische Benutzeroberfläche nutzt ExtJS, um Widgets zu erstellen, die das Erscheinungsbild der Komponenten angeben. Aufgrund der Eigenschaften dieser Widgets gibt es einige Unterschiede zwischen der Interaktion von Komponenten mit der klassischen Benutzeroberfläche und der Touch-optimierte Benutzeroberfläche.
Die klassische Benutzeroberfläche und die Touch-optimierte Benutzeroberfläche haben viele Aspekte der Komponentenentwicklung gemeinsam. Lesen Sie daher unbedingt AEM-Komponenten – die Grundlagen vor dieser Seite, die die spezifischen Eigenschaften der klassischen Benutzeroberfläche behandelt.
Auch wenn die HTML Template Language (HTL) und JSP beide für die Entwicklung von Komponenten für die klassische Benutzeroberfläche verwendet werden können, ist auf dieser Seite nur die Entwicklung mit JSP abgebildet. Dies liegt einzig an der Historie der Verwendung von JSP für die klassische Benutzeroberfläche.
HTL ist jetzt die empfohlene Skriptsprache für AEM. Unter HTL und unter Entwickeln von AEM-Komponenten können Sie die Methoden vergleichen.
Die grundlegende Struktur einer Komponente wird auf der Seite AEM-Komponenten – die Grundlagen behandelt, die für Touch-optimierte und klassische Benutzeroberflächen gelten. Selbst wenn Sie die Einstellungen für die Touch-optimierte Benutzeroberfläche in Ihrer neuen Komponente nicht verwenden müssen, kann es hilfreich sein, sie beim Erben von vorhandenen Komponenten zu beachten.
JSP-Skripte oder -Servlets können verwendet werden, um Komponenten zu rendern. Gemäß den Anforderungsverarbeitungsregeln von Sling lautet der Name des Standardskripts:
<*componentname*>.jsp
Die JSP-Skriptdatei global.jsp
wird verwendet, um schnellen Zugriff auf bestimmte Objekte (d. h. den Zugriff auf Inhalte) zu jeder JSP-Skriptdatei zu ermöglichen, die zum Rendern einer Komponente verwendet wird.
Daher muss global.jsp
in jedem JSP-Skript enthalten sein, das Komponenten rendert, bei dem mindestens ein in global.jsp
bereitgestelltes Objekt verwendet wird.
Der Speicherort der standardmäßigen global.jsp
ist:
/libs/foundation/global.jsp
Der Pfad /libs/wcm/global.jsp
, der von den Versionen CQ 5.3 und früheren Versionen verwendet wurde, ist mittlerweile veraltet.
Im Folgenden sind die wichtigsten Objekte aufgelistet, die die standardmäßige global.jsp
bereitstellt:
Zusammenfassung:
<cq:defineObjects />
slingRequest
– das umschlossene Anfrageobjekt (SlingHttpServletRequest
).slingResponse
– das umschlossene Antwortobjekt (SlingHttpServletResponse
).resource
– das Sling-Ressourcen-Objekt (slingRequest.getResource();
).resourceResolver
– das Sling Resource Resolver-Objekt (slingRequest.getResoucreResolver();
).currentNode
– der aufgelöste JCR-Knoten für die Anfrage.log
– der standardmäßige Logger ().sling
– der Sling-Skript-Assistent.properties
– die Eigenschaften der betreffenden Ressource (resource.adaptTo(ValueMap.class);
).pageProperties
– die Eigenschaften der Seite der betreffenden Ressource.pageManager
– der Seitenmanager für den Zugriff auf AEM-Inhalts-Seiten (resourceResolver.adaptTo(PageManager.class);
).component
- Das Komponentenobjekt der aktuellen AEM-Komponente.designer
- Das Designer-Objekt zum Abrufen von Designinformationen ( resourceResolver.adaptTo(Designer.class);
).currentDesign
– das Design der betreffenden Ressource.currentStyle
– der Stil der betreffenden Ressource.Es gibt drei Methoden für den Zugriff auf Inhalte in AEM WCM:
Über das in global.jsp
eingeführte Eigenschaftenobjekt:
Das Eigenschaftenobjekt ist eine Instanz einer ValueMap (siehe Sling-API) und enthält alle Eigenschaften der aktuellen Ressource.
Beispiel: String pageTitle = properties.get("jcr:title", "no title");
wird im Renderskript einer Seitenkomponente verwendet.
Beispiel: String paragraphTitle = properties.get("jcr:title", "no title");
wird im Renderskript einer standardmäßigen Absatzkomponente verwendet.
Über das in global.jsp
eingeführte currentPage
-Objekt:
Das currentPage
-Objekt ist eine Instanz einer Seite (siehe AEM-API). Die Seitenklasse bietet verschiedene Methoden, um auf Inhalte zuzugreifen.
Beispiel: String pageTitle = currentPage.getTitle();
Über das in global.jsp
eingeführte currentNode
-Objekt:
Das currentNode
-Objekt ist eine Instanz eines Knotens (siehe JCR-API). Die Eigenschaften eines Knotens können über die getProperty()
-Methode aufgerufen werden.
Beispiel: String pageTitle = currentNode.getProperty("jcr:title");
Die Tag-Bibliotheken von CQ und Sling verleihen Ihnen Zugriff auf spezifische Funktionen für die Verwendung im JSP-Skript der Vorlagen und Komponenten.
Weitere Informationen finden Sie im Dokument Tag-Bibliotheken.
Moderne Websites beruhen in hohem Maße auf der Client-seitigen Verarbeitung durch einen komplexen JavaScript- und CSS-Code. Die Organisation und Optimierung der Bereitstellung dieses Codes kann äußerst kompliziert sein.
Um dieses Problem zu beheben, bietet AEM Clientseitige Bibliotheksordner, mit dem Sie Ihren clientseitigen Code im Repository speichern, in Kategorien gruppieren und definieren können, wann und wie jede Codekategorie dem Client bereitgestellt werden soll. Das Client-seitige Bibliotheksystem übernimmt dann das Herstellen der richtigen Links auf der endgültigen Webseite, um den korrekten Code zu laden.
Weitere Informationen finden Sie im Dokument Verwendung Client-seitiger HTML-Bibliotheken.
Ihre Komponente benötigt ein Dialogfeld, in dem Autoren den Inhalt hinzufügen und konfigurieren können.
Weitere Details finden Sie unter AEM-Komponenten – die Grundlagen.
Sie können das Bearbeitungsverhalten einer Komponente konfigurieren. Hierzu zählen Attribute wie Aktionen, die für die Komponente verfügbar sind, Eigenschaften des integrierten Editors für die Bearbeitung und des Listeners in Zusammenhang mit Ereignissen bei der Komponente. Die Konfiguration ist für die Touch-optimierte und die klassische Benutzeroberfläche die gleiche, wenn auch mit einigen spezifischen Unterschieden.
Um das Bearbeitungsverhalten einer Komponente zu konfigurieren, fügen Sie einen cq:editConfig
-Knoten des Typs cq:EditConfig
unter dem Komponentenknoten (des Typs cq:Component
) hinzu sowie spezifische Eigenschaften und untergeordnete Knoten.
Weitere Details finden Sie unter Verwenden und Erweitern von ExtJS-Widgets.
Weitere Details finden Sie unter Verwenden von xtypes.
In diesem Abschnitt wird beschrieben, wie Sie eigene Komponenten erstellen und zum Absatzsystem hinzufügen.
Eine schnelle Möglichkeit für den Einstieg ist das Kopieren einer vorhandenen Komponente, um anschließend die gewünschten Änderungen vorzunehmen.
Ein Beispiel für die Entwicklung einer Komponente wird in Erweitern der Text- und Bildkomponente – ein Beispiel ausführlich beschrieben.
Um neue Komponenten für AEM basierend auf einer vorhandenen Komponente zu entwickeln, können Sie die Komponente kopieren, eine JavaScript-Datei für die neue Komponente erstellen und sie an einem Speicherort speichern, auf den AEM zugreifen können (siehe auch Anpassen von Komponenten und anderen Elementen):
Erstellen Sie mithilfe von CRXDE Lite einen Komponentenordner in:
/ apps/<myProject>/components/<myComponent>
Erstellen Sie die Knotenstruktur wie in den Bibliotheken neu und kopieren Sie dann die Definition einer vorhandenen Komponente, wie etwa die Textkomponente. Um beispielsweise die Textkomponente anzupassen, kopieren Sie diese
/libs/foundation/components/text
/apps/myProject/components/text
Ändern Sie jcr:title
, um den neuen Namen anzugeben.
Öffnen Sie den neuen Komponentenordner und nehmen Sie die erforderlichen Änderungen vor. Löschen Sie außerdem alle irrelevanten Informationen im Ordner.
Sie können Änderungen vornehmen, wie etwa:
Hinzufügen eines Felds im Dialogfeld
cq:dialog
– Dialogfeld für die Touch-optimierte Benutzeroberflächedialog
– Dialogfeld für die klassische BenutzeroberflächeErsetzen der .jsp
-Datei (Benennen Sie sie nach Ihrer neuen Komponente)
oder vollständiges Überarbeiten der gesamten Komponente, falls gewünscht
Wenn Sie beispielsweise eine Kopie der standardmäßigen Textkomponente erstellen, können Sie dem Dialogfeld ein zusätzliches Feld hinzufügen und dann die .jsp
, um die dort vorgenommenen Eingaben zu verarbeiten.
Eine Komponente für:
Ein für die klassische Benutzeroberfläche definiertes Dialogfeld wird in der Touch-optimierten Benutzeroberfläche verwendet.
Ein Dialogfeld, das für die Touch-optimierte Benutzeroberfläche definiert ist, funktioniert nicht in der klassischen Benutzeroberfläche.
Je nach Instanz und Autorenumgebung können Sie beide Dialogtypen für Ihre Komponente definieren.
Einer der folgenden Knoten muss vorhanden und ordnungsgemäß initialisiert sein, damit die neue Komponente angezeigt wird:
cq:dialog
– Dialogfeld für die Touch-optimierte Benutzeroberflächedialog
– Dialogfeld für die klassische Benutzeroberflächecq:editConfig
- Verhalten von Komponenten in der Bearbeitungsumgebung (z. B. per Drag & Drop)design_dialog
– Dialogfeld für den Design-Modus (nur klassische Benutzeroberfläche)Aktivieren Sie die neue Komponente in Ihrem Absatzsystem anhand folgender Optionen:
<path-to-component>
(Beispiel: /apps/geometrixx/components/myComponent
) zu den Eigenschaftenkomponenten des Knotens /etc/designs/geometrixx/jcr:content/contentpage/par
Öffnen Sie in AEM WCM eine Seite auf Ihrer Website und fügen Sie einen Absatz des von Ihnen erstellten Typs ein, um sicherzustellen, dass die Komponente ordnungsgemäß funktioniert.
Zum Anzeigen von Zeitstatistiken für das Laden von Seiten verwenden Sie Strg-Umschalt-U, wobei in der URL der Wert ?debugClientLibs=true
festgelegt ist.
Nachdem die Komponente entwickelt wurde, fügen Sie sie zum Absatzsystem hinzu, wodurch Autorinnen und Autoren die Komponente auswählen und beim Bearbeiten einer Seite verwenden können.
Rufen Sie eine Seite in Ihrer Autorenumgebung auf, die das Absatzsystem verwendet, zum Beispiel, <contentPath>/Test.html
.
Wechseln Sie auf eine der folgenden Arten zum Design-Modus:
Hinzufügen von ?wcmmode=design
zum Ende der URL und erneuter Zugriff, z. B.:
<contextPath>/ Test.html?wcmmode=design
Durch Klicken auf „Design“ im Sidekick
Sie befinden sich jetzt im Design-Modus und können das Absatzsystem bearbeiten.
Klicken Sie auf „Bearbeiten“.
Eine Liste der Komponenten, die zum Absatzsystem gehören, wird angezeigt. Ihre neue Komponente wird ebenfalls aufgelistet.
Die Komponenten können aktiviert (oder deaktiviert) werden, um zu bestimmen, welche der Autorin oder dem Autor beim Bearbeiten einer Seite angeboten werden.
Aktivieren Sie die Komponente und kehren Sie dann zum normalen Bearbeitungsmodus zurück, um zu bestätigen, dass sie verfügbar ist.
In diesem Abschnitt finden Sie ein Beispiel dafür, wie die häufig verwendete Text- und Bildstandard-Komponente mit einer konfigurierbaren Bildplatzierungsfunktion erweitert werden kann.
Die Erweiterung der Text- und Bildkomponente ermöglicht es Editorinnen bzw. Editoren, alle vorhandenen Funktionen der Komponente zu verwenden. Außerdem bietet sie eine zusätzliche Option, um die Platzierung des Bildes anzugeben:
Nachdem Sie diese Komponente erweitert haben, können Sie die Bildplatzierung über das Dialogfeld der Komponente konfigurieren.
In dieser Übung werden die folgenden Techniken beschrieben:
Dieses Beispiel ist auf die klassische Benutzeroberfläche ausgerichtet.
Dieses Beispiel beruht auf dem Geometrixx-Beispielinhalt, der nicht mehr im Lieferumfang von AEM enthalten ist und durch We.Retail ersetzt wird. Im Dokument We.Retail-Referenzimplementierung finden Sie Informationen zum Herunterladen und Installieren von Geometrixx.
Um die Komponente zu erstellen, verwenden Sie die standardmäßige textimage-Komponente als Grundlage und ändern Sie sie. Sie speichern die neue Komponente in der Geometrixx AEM WCM-Beispielanwendung.
Kopieren Sie die standardmäßige textimage-Komponente aus /libs/foundation/components/textimage
in den Geometrixx-Komponentenordner /apps/geometrixx/components
und verwenden Sie textimage als Namen des Zielknotens. (Kopieren Sie die Komponente, indem Sie zur Komponente navigieren, mit der rechten Maustaste klicken, „Kopieren“ auswählen und zum Zielverzeichnis navigieren.)
Um dieses Beispiel einfach zu halten, navigieren Sie zu der Komponente, die Sie kopiert haben, und löschen alle Unterknoten des neuen textimage-Knotens mit Ausnahme der folgenden:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
Die Dialogfelddefinition hängt von der Benutzeroberfläche ab:
textimage/cq:dialog
textimage/dialog
Bearbeiten Sie die Komponentenmetadaten:
Komponentenname
jcr:description
wird auf Text Image Component (Extended)
gesetztjcr:title
wird auf Text Image (Extended)
gesetztGruppe, in der die Komponente im Sidekick aufgelistet ist (unverändert lassen)
componentGroup
wird auf General
belassenÜbergeordnete Komponente für die neue Komponente (die standardmäßige textimage-Komponente)
sling:resourceSuperType
wird auf foundation/components/textimage
gesetztNach diesem Schritt sieht der Komponentenknoten wie folgt aus:
Ändern Sie die sling:resourceType
-Eigenschaft des Konfigurationsknotens „edit“ des Bildes (Eigenschaft: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType
) zu geometrixx/components/textimage.
Auf diese Weise wird beim Ablegen eines Bilds in der Komponente auf der Seite die sling:resourceType
-Eigenschaft der erweiterten textimage-Komponente auf geometrixx/components/textimage.
festgelegt.
Ändern Sie das Dialogfeld der Komponente, um die neue Option einzubinden. Die neue Komponente erbt die Teile des Dialogfelds, die dem Original entsprechen. Der einzige Zusatz, den Sie machen, besteht darin, die Erweitert Registerkarte, um eine Bildposition Dropdown-Liste mit Optionen Left und Right:
textimage/dialog
-Eigenschaften unverändert.Beachten Sie, dass textimage/dialog/items
vier Unterknoten aufweist, tab1 bis tab4, die den vier Registerkarten des textimage-Dialogfelds entsprechen.
Für die ersten beiden Registerkarten (tab1 und tab2):
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
bzw. /libs/foundation/components/textimage/dialog/items/tab2.infinity.json
hinzu.Für tab3:
Lassen Sie die Eigenschaften und Unterknoten unverändert.
Hinzufügen einer Felddefinition zu tab3/items
, Knotenposition des Typs cq:Widget
Legen Sie die folgenden Eigenschaften (vom Typ „String“) für den neuen Knoten tab3/items/position
fest:
name
: ./imagePosition
xtype
: selection
fieldLabel
: Image Position
type
: select
Fügen Sie den Unterknoten position/options
vom Typ cq:WidgetCollection
hinzu, um die beiden Optionen für die Bildplatzierung darzustellen, und erstellen Sie darunter die beiden Knoten o1 und o2 vom Typ nt:unstructured
.
Legen Sie für den Knoten position/options/o1
die Eigenschaften wie folgt fest: text
auf Left
und value
auf left.
Legen Sie für den Knoten position/options/o2
die Eigenschaften wie folgt fest: text
auf Right
und value
auf right
.
Löschen Sie tab4.
Die Bildposition wird im Inhalt als imagePosition
-Eigenschaft des Knotens beibehalten, der für den Absatz textimage
steht. Nach diesen Schritten sieht das Komponentendialogfeld folgendermaßen aus:
Erweitern Sie das Komponentenskript textimage.jsp
um eine zusätzliche Bearbeitungsmöglichkeit des neuen Parameters:
Image image = new Image(resource, "image");
if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
image.loadStyleData(currentStyle);
Sie werden das hervorgehobene Codefragment ersetzen %><div class="image"><% mit neuem Code, der einen benutzerdefinierten Stil für dieses Tag generiert.
// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
if (properties.get("imagePosition", "left").equals("right")) {
style = "style=\"float:right\"";
}
%><div <%= style %> class="image"><%
Speichern Sie die Komponente im Repository. Die Komponente kann jetzt getestet werden.
Nachdem die Komponente entwickelt wurde, können Sie sie dem Absatzsystem hinzufügen, wodurch Autorinnen und Autoren die Komponente auswählen und beim Bearbeiten einer Seite verwenden können. Mit diesen Schritten können Sie die Komponente testen.
Die Komponente speichert ihren Inhalt in einem Absatz auf der Unternehmensseite.
Um diese Funktion zu deaktivieren, verwenden Sie die standardmäßige Bildkomponente als Grundlage und ändern Sie sie. Sie speichern die neue Komponente in der Geometrixx-Beispielanwendung.
Kopieren Sie die standardmäßige image-Komponente aus /libs/foundation/components/image
in den Geometrixx-Komponentenordner /apps/geometrixx/components
und verwenden Sie image als Namen des Zielknotens.
Bearbeiten Sie die Komponentenmetadaten:
Image (Extended)
festNavigieren Sie zu /apps/geometrixx/components/image/dialog/items/image
.
Eigenschaft hinzufügen:
allowUpload
String
false
Klicken Sie auf Alle speichern. Die Komponente kann jetzt getestet werden.
Öffnen Sie eine Seite in Geometrixx, wie etwa „English / Company“.
Wechseln Sie in den Design-Modus und aktivieren Sie „Bild (erweitert)“.
Wechseln Sie zurück in den Bearbeitungsmodus und fügen Sie ihn zum Absatzsystem hinzu. Auf den nächsten Bildern sehen Sie die Unterschiede zwischen der ursprünglichen Bildkomponente und der von Ihnen erstellten.
Ursprüngliche Bildkomponente:
Ihre neue image-Komponente:
Die Komponente ist jetzt einsatzbereit.