Show Menu
THEMEN×

Entwickeln von AEM-Komponenten (klassische Benutzeroberfläche)

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 .
Many aspects of component development are common to both the classic UI and the touch-enabled UI, so you must read AEM Components - The Basics before using this page, which deals with the specifics of the classic UI.
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. See HTL and Developing AEM Components to compare methods.

Struktur

The basic structure of a component is covered on the page AEM Components - The Basics , which applies both the touch-eanbeld and classic UIs. 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

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

global.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
The path /libs/wcm/global.jsp , which was used by the versions CQ 5.3 and earlier, is now obsolete.

Funktion von global.jsp, verwendeten APIs und Taglibs

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 Standard-Protokollfunktion ().
    • sling - Der Sling-Skript-Helfer.
    • properties - Die 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.

Zugreifen auf Inhalte

Es gibt drei Methoden für den Zugriff auf Inhalte in AEM WCM:
  • Über das in global.jsp :
    Das properties-Objekt ist eine Instanz einer ValueMap (siehe Sling API ) und enthält alle Eigenschaften der aktuellen Ressource.
    Example: String pageTitle = properties.get("jcr:title", "no title"); used in the rendering script of a page component.
    Example: String paragraphTitle = properties.get("jcr:title", "no title"); used in the rendering script of a standard paragraph component.
  • Über das currentPage Objekt, das in global.jsp :
    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();
  • Via- currentNode Objekt eingeführt in global.jsp :
    Das currentNode Objekt ist eine Instanz eines Knotens (siehe JCR-API ). The properties of a node can be accessed by the getProperty() method.
    Beispiel: String pageTitle = currentNode.getProperty("jcr:title");

JSP-Tag-Bibliotheken

Die Tag-Bibliotheken von CQ und Sling verleihen Ihnen Zugriff auf spezifische Funktionen für die Verwendung im JSP-Skript der Vorlagen und Komponenten.
For more information, see the document Tag Libraries .

Verwendung clientseitiger HTML-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.
To help deal with this issue, AEM provides Client-side Library Folders , which allow you to store your client-side code in the repository, organize it into categories and define when and how each category of code is to be served to the client. Das clientseitige Bibliotheksystem übernimmt dann das Herstellen der richtigen Links auf der endgültigen Webseite, um den korrekten Code zu laden.
See the document Using Client-Side HTML Libraries for more information.

Dialogfeld

Ihre Komponente benötigt ein Dialogfeld für Autoren, um Inhalte hinzuzufügen und zu konfigurieren.
See AEM Components - The Basics for further details.

Konfigurieren des Bearbeitungsverhaltens

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.
The edit behavior of a component is configured by adding a cq:editConfig node of type cq:EditConfig below the component node (of type cq:Component ) and by adding specific properties and child nodes.

Verwenden und Erweitern von ExtJS-Widgets

Weitere Details finden Sie unter Verwenden und Erweitern von ExtJS-Widgets .

Verwenden von xtypes für ExtJS-Widgets

Weitere Details finden Sie unter Verwenden von xtypes .

Entwickeln neuer Komponenten

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.

Entwickeln einer neuen Komponente (vorhandene Komponente anpassen)

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 ):
  1. 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
    • from /libs/foundation/components/text
    • in /apps/myProject/components/text
  2. Modify the jcr:title to reflect its new name.
  3. Ö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 touchfähige Benutzeroberfläche
      • dialog – Dialogfeld für die klassische Benutzeroberfläche
    • replacing the .jsp file (name it after your new component)
    • oder vollständiges Überarbeiten der gesamten Komponente, falls gewünscht
    For example, if you take a copy of the standard Text component, you can add an additional field to the dialog box, then update the .jsp to process the input made there.
    Eine Komponente für:
    • Die Touch-optimierte Benutzeroberfläche verwendet Granite -Komponenten
    • Die klassische Benutzeroberfläche verwendet ExtJS-Widgets
    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.
  4. Einer der folgenden Knoten muss vorhanden und ordnungsgemäß initialisiert sein, damit die neue Komponente angezeigt wird:
    • cq:dialog - Dialogfeld für die touchfähige Benutzeroberfläche
    • dialog – Dialogfeld für die klassische Benutzeroberfläche
    • cq:editConfig – Verhalten von Komponenten in der Bearbeitungsumgebung (z. B Ziehen und Ablegen)
    • design_dialog - Dialogfeld für den Designmodus (nur klassische Benutzeroberfläche)
  5. Aktivieren Sie die neue Komponente in Ihrem Absatzsystem anhand folgender Optionen:
    • using CRXDE Lite to add the value <path-to-component> (for example, /apps/geometrixx/components/myComponent ) to the property components of the node /etc/designs/geometrixx/jcr:content/contentpage/par
  6. Ö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.
To see timing statistics for page loading, you can use Ctrl-Shift-U - with ?debugClientLibs=true set in the URL.

Hinzufügen einer neuen Komponente zum Absatzsystem (Designmodus)

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.
  1. Access a page within your authoring environment that uses the paragraph system, for example <contentPath>/Test.html .
  2. Wechseln Sie auf eine der folgenden Arten zum Designmodus:
    • Hinzufügen ?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.
  3. 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.
  4. 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.

Erweitern der Text- und der Bildkomponente – ein Beispiel

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:
  • Auf der linken Seite des Texts (aktuelles Verhalten und der neue Standard)
  • Sowie auf der rechten Seite
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:
  • Kopieren des vorhandenen Komponentenknotens und Ändern seiner Metadaten
  • Ändern des Dialogfelds der Komponente, einschließlich der Vererbung von Widgets aus den übergeordneten Dialogfeldern
  • Ändern des Skripts der Komponente, um die neue Funktion zu implementieren
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. See the document We.Retail Reference Implementation for how to download and install Geometrixx.

Erweitern der vorhandenen textimage-Komponente

Um die neue Komponente zu erstellen, verwenden wir die Standard-textimage-Komponente als Grundlage und ändern sie. Wir speichern die neue Komponente in der Geometrixx-AEM WCM-Beispielanwendung.
  1. Copy the standard textimage component from /libs/foundation/components/textimage into the Geometrixx component folder, /apps/geometrixx/components , using textimage as the target node name. (Kopieren Sie die Komponente, indem Sie zur Komponente navigieren, mit der rechten Maustaste klicken, „Kopieren“ auswählen und zum Zielverzeichnis navigieren.)
  2. 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:
    • dialog definition: textimage/dialog
    • Komponentenskript: textimage/textimage.jsp
    • edit configuration node (allowing drag-and-drop of assets): textimage/cq:editConfig
    Die Dialogfelddefinition hängt von der Benutzeroberfläche ab:
    • Touch-enabled UI: textimage/cq:dialog
    • Klassische Benutzeroberfläche: textimage/dialog
  3. Bearbeiten Sie die Komponentenmetadaten:
    • Komponentenname
      • Setzen Sie jcr:description auf Text Image Component (Extended)
      • Setzen Sie jcr:title auf Text Image (Extended)
    • Gruppe, in der die Komponente im Sidekick aufgelistet ist (unverändert lassen)
      • Lassen Sie componentGroup die General
    • Übergeordnete Komponente für die neue Komponente (die standardmäßige textimage-Komponente)
      • Setzen Sie sling:resourceSuperType auf foundation/components/textimage
    Nach diesem Schritt sieht der Komponentenknoten wie folgt aus:
  4. Ändern Sie die sling:resourceType Eigenschaft des Konfigurationsknotens zum Bearbeiten des Bildes (Eigenschaft: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType ) 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.
  5. Ä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:
    • Leave the textimage/dialog properties unchanged.
    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):
      • Ändern Sie xtype in cqinclude (um von der Standardkomponente zu erben).
      • Fügen Sie eine Pfadeigenschaft mit Werten /libs/foundation/components/textimage/dialog/items/tab1.infinity.json bzw. /libs/foundation/components/textimage/dialog/items/tab2.infinity.json Werten hinzu.
      • Entfernen Sie alle anderen Eigenschaften oder Unterknoten.
    • Für tab3:
      • Lassen Sie die Funktionen und Unterknoten unverändert.
      • Add a new field definition to tab3/items , node position of type cq:Widget
      • Set the following properties (of type String) for the new tab3/items/position node:
        • name : ./imagePosition
        • xtype : selection
        • fieldLabel : Image Position
        • type : select
      • Add subnode position/options of type cq:WidgetCollection to represent the two choices for image placement, and under it create two nodes, o1 and o2 of type nt:unstructured .
      • Legen Sie für Knoten die Eigenschaften position/options/o1 fest: text nach Left und value nach left.
      • Legen Sie für Knoten die Eigenschaften position/options/o2 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:
  6. 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"><%
    
    
  7. Speichern Sie die Komponente im Repository. Die Komponente kann jetzt getestet werden.

Testen der neuen Komponente

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.
  1. Öffnen Sie eine Seite in Geometrixx, wie etwa „Englisch/Unternehmen“.
  2. Wechseln Sie in den Designmodus, indem Sie im Sidekick auf „Design“ klicken.
  3. Bearbeiten Sie das Absatzsystemdesign, indem Sie in der Mitte der Seite im Absatzsystem auf die Schaltfläche „Bearbeiten“ klicken. Eine Liste der Komponenten, die im Absatzsystem platziert werden können, wird angezeigt und sollte Ihre neu entwickelte Komponente „Textbild (erweitert)“ enthalten. Aktivieren Sie diese für das Absatzsystem, indem Sie sie auswählen und auf „OK“ klicken.
  4. Wechseln Sie zurück zum Bearbeitungsmodus.
  5. Fügen Sie dem Absatzsystem den Absatz „Text-Bild (erweitert)“ hinzu und initialisieren Sie Text und Bild mit Beispielinhalten. Speichern Sie die Änderungen.
  6. Öffnen Sie das Dialogfeld des Text- und Bildabsatzes, ändern Sie die Bildposition auf der Registerkarte „Erweitert“ in „Rechts“ und klicken Sie auf „OK“, um die Änderungen zu speichern.
  7. Der Absatz wird mit dem Bild auf der rechten Seite wiedergegeben.
  8. Die Komponente ist jetzt einsatzbereit.
Die Komponente speichert den Inhalt in einem Absatz auf der Unternehmensseite.

Upload-Funktion der image-Komponente deaktivieren

Um diese Funktion zu deaktivieren, verwenden wir die Standard-Bildkomponente als Grundlage und ändern sie. Wir speichern die neue Komponente in der Geometrixx-Beispielanwendung.
  1. Copy the standard image component from /libs/foundation/components/image into the Geometrixx component folder, /apps/geometrixx/components , using image as the target node name.
  2. Bearbeiten Sie die Komponentenmetadaten:
    • " jcr:title "auf Image (Extended)
  3. Navigieren Sie zu /apps/geometrixx/components/image/dialog/items/image .
  4. Neue Eigenschaft hinzufügen:
    • Name : allowUpload
    • Typ : String
    • Wert : false
  5. Klicken Sie auf Alle speichern . Die Komponente kann jetzt getestet werden.
  6. Öffnen Sie eine Seite in Geometrixx, wie etwa „Englisch/Unternehmen“.
  7. Wechseln Sie in den Designmodus und aktivieren Sie „Bild (erweitert)“.
  8. 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:
  9. Die Komponente ist jetzt einsatzbereit.