Die klassische Benutzeroberfläche nutzt ExtJS, um Widgets zu erstellen, die das Erscheinungsbild der Komponenten angeben. Aufgrund der Struktur dieses Widgets gibt es einige Unterschiede zwischen der Interaktion von Komponenten mit der klassischen Benutzeroberfläche und mit der Touch-optimierten Benutzeroberfläche.
Viele Aspekte der Komponentenentwicklung sind sowohl für die klassische als auch für die Touch-optimierte Benutzeroberfläche gleich. lesen AEM Komponenten - Grundlagen before Verwenden Sie diese Seite, die sich mit den Besonderheiten der klassischen Benutzeroberfläche befasst.
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. Siehe HTL und Entwickeln AEM Komponenten , um Methoden zu vergleichen.
Die grundlegende Struktur einer Komponente wird auf der Seite behandelt AEM Komponenten - Grundlagen, das sowohl die Touch-optimierte als auch die klassische Benutzeroberfläche anwendet. Auch wenn Sie die Einstellungen für die Touch-optimierte Benutzeroberfläche in Ihrer neuen Komponente nicht verwenden müssen, ist es möglicherweise hilfreich, diese beim Vererben aus vorhandenen Komponenten zu beachten.
JSP-Skripte oder -Servlets können verwendet werden, um Komponenten zu rendern. Gemäß den Anforderungsverarbeitungsregeln von Sling lautet der Name für das Standardskript:
<*componentname*>.jsp
Die JSP-Skriptdatei global.jsp
wird verwendet, um allen JSP-Skriptdateien, die zum Rendern einer Komponente verwendet werden, schnellen Zugriff auf bestimmte Objekte (d. h. Zugriff auf Inhalte) bereitzustellen.
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
, die von den Versionen CQ 5.3 und früher verwendet wurde, ist nun veraltet.
Im Folgenden sind die wichtigsten Objekte aufgelistet, die die standardmäßige global.jsp
bereitstellt:
Zusammenfassung:
<cq:defineObjects />
slingRequest
- Das umschlossene Anforderungsobjekt ( SlingHttpServletRequest
).slingResponse
- Das umschlossene Antwortobjekt ( SlingHttpServletResponse
).resource
- das Sling-Ressourcenobjekt ( slingRequest.getResource();
).resourceResolver
- Das Sling Resource Resolver-Objekt ( slingRequest.getResoucreResolver();
).currentNode
– der aufgelöste JCR-Knoten für die Anforderung.log
- Die Standardprotokollierung ().sling
- Der Sling-Skript-Helfer.properties
- Eigenschaften der adressierten Ressource ( resource.adaptTo(ValueMap.class);
).pageProperties
– die Eigenschaften der Seite der betreffenden Ressource.pageManager
- Der Seitenmanager für den Zugriff auf AEM Inhaltsseiten ( resourceResolver.adaptTo(PageManager.class);
).component
– das Komponentenobjekt der aktuellen AEM-Komponente.designer
- Das Designerobjekt 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 Eigenschaftenobjekt, das in global.jsp
:
Das properties -Objekt 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 Rendering-Skript einer Seitenkomponente verwendet.
Beispiel: String paragraphTitle = properties.get("jcr:title", "no title");
wird im Rendering-Skript einer Standard-Absatzkomponente verwendet.
Über die currentPage
-Objekt eingeführt in global.jsp
:
Die currentPage
-Objekt ist eine Instanz einer Seite (siehe AEM API). Die Seitenklasse bietet verschiedene Methoden, um auf Inhalte zuzugreifen.
Beispiel: String pageTitle = currentPage.getTitle();
Via currentNode
-Objekt eingeführt in global.jsp
:
Die currentNode
-Objekt ist eine Instanz eines Knotens (siehe JCR-API). Auf die Eigenschaften eines Knotens kann über die getProperty()
-Methode.
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 clientseitigen 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 organisieren und definieren können, wann und wie jede Codekategorie dem Client bereitgestellt werden soll. Das clientseitige Bibliotheksystem übernimmt dann das Herstellen der richtigen Links auf der endgültigen Webseite, um den korrekten Code zu laden.
Siehe Dokument . Verwenden Client-seitiger HTML-Bibliotheken für weitere Informationen.
Ihre Komponente benötigt ein Dialogfeld für Autoren, um Inhalte hinzuzufügen und zu konfigurieren.
Siehe AEM Komponenten - Grundlagen für weitere Informationen.
Sie können das Bearbeitungsverhalten einer Komponente konfigurieren. Hierzu zählen Attribute, wie für die Komponente verfügbare Aktionen, Eigenschaften des Editors für die Bearbeitung im Kontext und die Listener, die im Zusammenhang mit den Ereignissen der Komponente stehen. Die Konfiguration ist für die Touch-optimierte und die klassische Benutzeroberfläche dieselbe, auch wenn bestimmte, spezifische Unterschiede bestehen.
Die Bearbeitungsverhalten einer Komponente konfiguriert ist durch Hinzufügen eines cq:editConfig
Knoten des Typs cq:EditConfig
unterhalb des Komponentenknotens (vom Typ cq:Component
) und durch Hinzufügen bestimmter Eigenschaften und untergeordneter Knoten.
Weitere Details finden Sie unter Verwenden und Erweitern von ExtJS-Widgets.
Weitere Details finden Sie unter Verwenden von xtypes.
Dieser Abschnitt beschreibt, wie Sie Ihre eigenen Komponenten erstellen und diese dem Absatzsystem hinzufügen.
Eine schnelle Möglichkeit für den Einstieg ist das Kopieren einer vorhandenen Komponente und das anschließende Vornehmen der gewünschten Änderungen.
Ein Beispiel für die Entwicklung einer Komponente wird detailliert unter Erweitern der Text- und Bildkomponente – ein Beispiel 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 Ort speichern, auf den AEM zugreifen kann (siehe auch Anpassen von Komponenten und anderen Elementen):
Verwenden Sie CRXDE Lite und erstellen Sie einen neuen Komponentenordner unter:
/ 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 die jcr:title
, um den neuen Namen widerzuspiegeln.
Öffnen Sie den neuen Komponentenordner und nehmen Sie die erforderlichen Änderungen vor. Löschen Sie zudem alle irrelevanten Informationen im Ordner.
Sie können Änderungen vornehmen, wie etwa:
Hinzufügen eines neuen Felds im Dialogfeld
cq:dialog
- Dialogfeld für die Touch-optimierte Benutzeroberflächedialog
– Dialogfeld für die klassische Benutzeroberflächeersetzt die .jsp
Datei (nennen Sie sie nach Ihrer neuen Komponente)
oder vollständiges Überarbeiten der gesamten Komponente, falls gewünscht
Wenn Sie beispielsweise eine Kopie der Standardtext-Komponente 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 Dialogfeld, das für die klassische Benutzeroberfläche definiert ist, funktioniert auf der Touch-optimierten Benutzeroberfläche.
Ein Dialogfeld, das für die Touch-optimierte Benutzeroberfläche definiert ist, funktioniert auf der klassischen Benutzeroberfläche nicht.
Abhängig von Ihrer Instanz und der Autorenumgebung können Sie beide Arten eines Dialogfelds 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 Ziehen und Ablegen)design_dialog
- Dialogfeld für den Designmodus (nur klassische Benutzeroberfläche)Aktivieren Sie die neue Komponente in Ihrem Absatzsystem anhand folgender Optionen:
<path-to-component>
(z. B. /apps/geometrixx/components/myComponent
) zu den Eigenschaftskomponenten des Knotens /etc/designs/geometrixx/jcr:content/contentpage/par
Öffnen Sie in AEM WCM auf Ihrer Website eine Seite und fügen Sie einen neuen Absatz vom gerade erstellten Typ ein, um zu gewährleisten, dass die Komponente ordnungsgemäß funktioniert.
Um Zeitstatistiken für das Laden von Seiten anzuzeigen, können Sie Strg-Umschalt-U verwenden - mit ?debugClientLibs=true
in der URL festgelegt.
Nach dem Entwickeln der Komponente fügen Sie sie dem Absatzsystem hinzu. Autoren können dadurch die Komponente auswählen und verwenden, wenn sie eine Seite bearbeiten.
Greifen Sie auf eine Seite in Ihrer Authoring-Umgebung zu, die beispielsweise das Absatzsystem verwendet <contentPath>/Test.html
.
Wechseln Sie auf eine der folgenden Arten zum Designmodus:
adding ?wcmmode=design
zum Ende der URL und erneuter Zugriff, z. B.:
<contextPath>/ Test.html?wcmmode=design
Klicken auf „Design“ im Sidekick
Sie befinden sich jetzt im Designmodus und können das Absatzsystem bearbeiten.
Klicken Sie auf „Bearbeiten“.
Eine Liste von Komponenten, die zum Absatzsystem gehören, wird angezeigt. Ihre neue Komponente ist jetzt auch aufgeführt.
Die Komponenten können aktiviert (oder deaktiviert) werden, um zu bestimmen, welche dem Verfasser beim Bearbeiten einer Seite angeboten werden.
Aktivieren Sie Ihre Komponente, kehren Sie dann wieder in den normalen Bearbeitungsmodus zurück, um zu bestätigen, dass sie zur Nutzung verfügbar ist.
Dieser Abschnitt bietet ein Beispiel dazu, wie die weithin verwendete, standardmäßige Text- und Bildkomponente um eine konfigurierbare Bildplatzierungsfunktion erweitert wird.
Die Erweiterung der Text- und Bildkomponente ermöglicht Editoren die Nutzung sämtlicher vorhandener Funktionen der Komponente sowie zusätzlich die Möglichkeit, die Platzierung des Bilds festzulegen:
Nach der Erweiterung dieser Komponente können Sie die Bildplatzierung über das Dialogfeld der Komponente konfigurieren.
Die folgenden Techniken werden in dieser Übung erläutert:
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. Siehe Dokument . We.Retail-Referenzimplementierung für Informationen zum Herunterladen und Installieren von Geometrixx.
Um die neue Komponente zu erstellen, verwenden wir die standardmäßige textimage-Komponente als Grundlage und ändern sie. Wir speichern die neue Komponente in der Geometrixx-AEM WCM-Beispielanwendung.
Kopieren Sie die standardmäßige textimage-Komponente aus /libs/foundation/components/textimage
in den Komponentenordner der Geometrixx, /apps/geometrixx/components
, wobei textimage als Zielknotenname verwendet wird. (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
nach Text Image Component (Extended)
jcr:title
nach Text Image (Extended)
Gruppe, in der die Komponente im Sidekick aufgelistet ist (unverändert lassen)
componentGroup
auf General
Übergeordnete Komponente für die neue Komponente (die standardmäßige textimage-Komponente)
sling:resourceSuperType
nach foundation/components/textimage
Nach 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 „Komponente“, damit es die neue Option enthält. Die neue Komponente erbt die Teile des Dialogfelds, die dem Original entsprechen. Wir erweitern zusätzlich lediglich die Registerkarte Erweitert und fügen eine Dropdown-Liste Bildposition mit den Optionen Links und Rechts hinzu:
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
und /libs/foundation/components/textimage/dialog/items/tab2.infinity.json
zurück.Für tab3:
Lassen Sie die Funktionen und Unterknoten unverändert.
Hinzufügen einer neuen Felddefinition zu tab3/items
, Knotenposition des Typs cq:Widget
Legen Sie die folgenden Eigenschaften (vom Typ "String") für die neue tab3/items/position
node:
name
: ./imagePosition
xtype
: selection
fieldLabel
: Image Position
type
: select
Unterknoten hinzufügen position/options
des Typs cq:WidgetCollection
, um die beiden Optionen für die Bildplatzierung darzustellen, und erstellen Sie darunter zwei Knoten, o1 und o2 des Typs nt:unstructured
.
Für Knoten position/options/o1
Legen Sie die Eigenschaften fest: text
nach Left
und value
nach left.
Für Knoten position/options/o2
Legen Sie die Eigenschaften fest: text
nach Right
und value
nach 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);
Wir ersetzen das hervorgehobene Code-Fragment %><div class="image"><% durch einen neuen 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.
Nach der Entwicklung der Komponente können Sie sie dem Absatzsystem hinzufügen. Damit können Autoren die Komponente auswählen und verwenden, wenn sie eine Seite bearbeiten. Mit diesen Schritten können Sie die Komponente testen.
Die Komponente speichert den Inhalt in einem Absatz auf der Unternehmensseite.
Um diese Funktion zu deaktivieren, verwenden wir die standardmäßige Bildkomponente als Grundlage und ändern sie. Wir speichern die neue Komponente in der Geometrixx-Beispielanwendung.
Kopieren Sie die standardmäßige Bildkomponente aus /libs/foundation/components/image
in den Komponentenordner der Geometrixx, /apps/geometrixx/components
, wobei image als Zielknotenname verwendet wird.
Bearbeiten Sie die Komponentenmetadaten:
Image (Extended)
Navigieren Sie zu /apps/geometrixx/components/image/dialog/items/image
.
Neue 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 „Englisch/Unternehmen“.
Wechseln Sie in den Designmodus und aktivieren Sie „Bild (erweitert)“.
Wechseln Sie zurück zum Bearbeitungsmodus und fügen Sie diese Option dem Absatzsystem hinzu. Auf den nächsten Bildern sehen Sie die Unterschiede zwischen der ursprünglichen image-Komponente und der, die Sie soeben erstellt haben.
Ursprüngliche image-Komponente:
Ihre neue image-Komponente:
Die Komponente ist jetzt einsatzbereit.