Erstellen eines CQ-Widget, das Drag & Drop für Bilder unterstützt

Suchen

Zuletzt aktualisiert am

Zusammenfassung des Artikels

Übersicht	Beschreibt, wie eine CQ-Komponente entwickelt wird, die vom ParSys-System benutzt wird. Die Komponente unterstützt ein Dialogfeld mit mehreren Registerkarten, unterstützt ein Bild und stellt eine Verknüpfung zu den Funktionen her, die vom Content Finder angeboten werden.
Lösung(en) für digitales Marketing	Adobe Experience Manager (Adobe CQ)
Zielgruppe	Entwickler (gute Grundkenntnisse)
Erforderliche Fähigkeiten	JavaScript, JCR, Sling
Getestet am	Adobe CQ 5.5

Sie können eine AEM-Komponente erstellen, die Text und ein Bild verwaltet. Außerdem verfügt die Komponente, die Sie in diesem Artikel zu erstellen lernen, über ein CQ-Dialogfeld, das es einem Benutzer ermöglicht, während der Entwurfphase ein Bild auszuwählen.

Ein AEM-Widget, das es dem Autor erlaubt, ein Bild während der Entwurfphase auszuwählen

Wenn der Benutzer ein Bild auswählt, wird es im Widget angezeigt.

Ein Bild wird im AEM-Widget angezeigt

In diesem Artikel kann das Bild durch einen Inhaltsautor bearbeitet werden und vom Content Finder gezogen werden.

Das Bild für diesen Artikel:

Ist ein Dialogfeld-Widget (xtype von smartimage).
Muss in "cq:editConfig" der Komponente konfiguriert werden, sodass Bilder vom Content Finder gezogen werden können, wie in dieser Abbildung zu sehen ist.

Die Komponente unterstützt das Ziehen aus dem CQ Content Finder

Der Rich-Text:

1. Ist ein Dialogfeld-Widget (xtype von richtext).
2. Das Widget aktiviert alle Funktionen der Rich-Text-Plug-in-Tabelle zur Bearbeitung.
3. Widget verfügt über Standardtext.

Der Pfad einer Seite:

1. Ist ein Design-Dialogfeld-Widget, wahrscheinlich ein xtype von pathcompletion.
2. Widgets sollten über die Eigenschaft regex mit einem regulären Ausdruck verfügen, der die Benutzereingabe validiert (z. B. "/^\/content\/training\/(.)*$/").
3. Widget sollte die Eigenschaft regexText mit einer Fehlermeldung haben, wenn ein regulärer Ausdruck fehlschlägt.

Erstellen einer CQ-Anwendungsordnerstruktur

Erstellen einer Adobe CQ-Anwendungsordnerstruktur, die Vorlagen, Komponenten und Seiten enthält unter Verwendung von CRXDE Lite.

Eine CQ-Anwendungsordnerstruktur

Im Folgenden wird jeder Anwendungsordner beschrieben:

Name der Anwendung: enthält alle Ressourcen, die von einer Anwendung verwendet werden. Die Ressourcen können Vorlagen, Seiten, Komponenten usw. sein.
Komponenten: enthält Komponenten, die Ihre Anwendung verwendet.
Seite: enthält Seitenkomponenten. Eine Seitenkomponente ist ein Skript, z. B. eine JSP-Datei.
Global: Enthält globale Komponenten, die Ihre Anwendung verwendet.
Vorlage: enthält Vorlagen, auf denen Sie Seitenkomponenten basieren.
src: enthält den Quellcode, der eine OSGi-Komponente enthält (dieser Entwicklungsartikel erstellt kein OSGi-Bundle unter Verwendung dieses Ordners).
Installieren: enthält einen übersetzten OSGi-Bundle-Container.

Erstellen einer Anwendungsordnerstruktur:

1. Um die CQ Startseite anzuzeigen, die URL "http://[Hostname]:[Anschluss]" in einem Webbrowser eingeben. Beispiel: http://localhost:4502.

2. CRXDE Lite auswählen.

3. Mit der rechten Maustaste auf den „Apps”-Ordner (oder auf den übergeordneten Ordner) klicken. Wählen Sie „Erstellen” > "Ordner erstellen".

4. Geben Sie im „Ordner erstellen”-Dialogfeld den Ordnernamen ein. imagecomponent eingeben.

5. Schritte 1 - 4 für jeden Ordner, der in der vorherigen Abbildung angegeben ist, wiederholen.

6. Auf "Alle Speichern" klicken.

Hinweis:

Sie müssen auf „Alle Speichern“ klicken, wenn Sie in CRXDELite arbeiten, damit die Änderungen übernommen werden.

Vorlagen erstellen

Sie können eine Vorlage mit CRXDE Lite erstellen. Mit einer CQ-Vorlage können Sie einen konsistenten Stil für die Seiten in Ihrer Anwendung definieren. Eine Vorlage besteht aus den Knoten, die die Seitenstruktur angeben. Weitere Informationen zu Vorlagen finden Sie unter http://dev.day.com/docs/en/cq/current/developing/templates.html.

Um eine Vorlage zu erstellen, folgende Arbeitsschritte ausführen:
1. Um die CQ-Startseite anzuzeigen, die URL "http://[Hostname]:[Anschluss]" in einem Webbrowser eingeben. Beispiel: http://localhost:4502.
2. Wählen Sie CRXDE Lite.
3. Mit der rechten Maustaste auf den Ordner "Vorlagen" (innerhalb der Anwendung) klicken. Wählen Sie "Erstellen" >
"Vorlage erstellen".
4. Geben Sie im „Vorlage erstellen“-Dialogfeld die folgenden Informationen ein:

Beschriftung: Der Name der zu erstellenden Vorlage. Geben Sie "templateImage" ein.
Titel: Der Titel, der der Vorlage zugewiesen ist.
Beschreibung: Die Beschreibung, die der Vorlage zugeordnet ist.
Ressourcentyp: Der Pfad der Komponente, der der Vorlage zugewiesen ist und zu implementierenden Seiten kopiert wird. Geben Sie imagecomponent/components/page/templatelmage ein.
Rangfolge: Die (aufsteigende) Reihenfolge, in der diese Vorlage in Relation zu anderen Vorlagen angezeigt wird. Durch Festlegen dieses Werts auf 1 wird gewährleistet, dass die Vorlage als erste in der Liste angezeigt wird.

5. Einen Pfad zu „Zugelassene Pfade” hinzufügen. Klicken Sie auf das Pluszeichen und geben Sie folgenden Wert ein: /content(/.*)?.
6. Klicken Sie auf „Weiter” für „Zugelassene übergeordnete Elemente”.
7. Wählen Sie „OK“ für „Zugelassene untergeordnete Elemente”.

Erstellen Sie die Bildkomponente.

Komponenten sind wiederverwendbare Module, die eine bestimmte Anwendungslogik implementieren, um den Inhalt Ihrer Website zu rendern. Eine Komponente kann man sich als Sammlung von Skripten vorstellen (z. B. JSPs, Java-Servlets usw.), die eine bestimmte Funktion vollständig realisieren. Um diese Funktionalität zu realisieren, ist es Ihre Verantwortung als CQ-Entwickler, Skripte zu erstellen, die bestimmte Funktionen ausführen. Weitere Informationen zu Komponenten finden Sie unter http://dev.day.com/docs/en/cq/current/developing/components.html.

Standardmäßig hat eine Komponente mindestens ein Standardskript, das mit dem Namen der Komponente identisch ist. Um eine Render-Komponente zu erstellen, führen Sie die folgenden Arbeitsschritte aus:
1. Um die CQ-Startseite anzuzeigen, die URL „http://[Hostname]:[Anschluss]“ in einem Webbrowser eingeben. Beispiel: http://localhost:4502.
2. Wählen Sie CRXDE Lite.
3. Klicken Sie mit der rechten Maustaste auf /apps/imagecomponent/components/page und wählen Sie
„Erstellen” > „Komponente erstellen”.
4. Geben Sie im „Komponente erstellen“-Dialogfeld die folgenden Informationen ein:

Beschriftung: Der Name der zu erstellenden Komponente. Geben Sie „templateImage” ein.
Titel: Der Titel, der der Komponente zugewiesen wird.
Beschreibung: Die Beschreibung, die der Vorlage zugeordnet ist.

5. Wählen Sie „Weiter” für ”Erweiterte Komponenteneinstellungen” und „Zugelassene übergeordnete Elemente”.
6. Wählen Sie „OK“ für „Zugelassene untergeordnete Elemente”.
7. Öffnen Sie die Datei „templateImage.jsp” unter: /apps/imagecomponent/components/page/templateImage/templateImage.jsp.

8. Den folgenden JSP-Code eingeben.

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>


<body>
<h1>Here is where the Component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Hinweis:

Dies ist die Seitenkomponente, wo Sie die Bildkomponente hinzufügen werden, die Sie in diesem Entwicklungsartikel erstellen. Der verbleibende Teil dieses Artikels erläutert, wie Sie die Komponente erstellen, die es Ihnen ermöglicht, ein Bild zu verwenden.

Entwickeln der Komponente, die Drag-and-Drop von Bildern unterstützt

Jetzt erstellen Sie die komplexe Komponente, die alle Anforderungen unterstützt, die am Anfang dieses Artikels aufgeführt sind. Die folgende Abbildung zeigt die Struktur der Komponente, die in diesem Abschnitt erstellt wird.

Die Struktur der komplexen Komponente, die in diesem Abschnitt erstellt wird

Führen Sie die folgenden Arbeitsschritte mithilfe von CRXDE aus:

1. Klicken Sie mit der rechten Maustaste auf ”/apps/imagecomponent/components” und wählen Sie „Neu” > „Komponente”.

2. Geben Sie die folgenden Informationen im „Komponente erstellen“-Dialogfeld ein:

Beschriftung: Der Name der zu erstellenden Komponente. Geben Sie „complex“ ein.
Titel: Der Titel, der der Komponente zugewiesen wird. Geben Sie „Training Complex“ ein.
Beschreibung: Die Beschreibung, die der Vorlage zugeordnet ist. Geben Sie „Complex Component“ ein.
Superressourcentyp: Geben Sie „foundation/components/parbase“ ein.
Gruppe: Die Gruppe im Sidekick, wo die Komponente angezeigt wird. Geben Sie Training ein.
"Zugelassene übergeordnete Elemente": Geben Sie "*/*parsys" ein.

3. complex.jsp öffnen und den folgenden JavaScript-Code eingeben:

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="com.day.cq.wcm.foundation.Image" %>
<%
// getting the image from the Dialog/resouce
// notice the use of the second parameter "image" -- this signifies that the
// image will live on a resource (called image) below the requested resource
Image image = new Image(resource, "image");
// setting the selector so that the "parbase" can work its magic
image.setSelector(".img");
// getting the rich text from the Dialog
String text = properties.get("text", "TEXT NA");
// getting the path from the Design Dialog
String path = currentStyle.get("path", "PATH NA");
%>
<h2><%= path %></h2>
<%= text %><br />
<%
image.draw(out);
%>

4. Der komplexen Komponente ein Dialogfeld hinzufügen. Wählen Sie /apps/imagecomponent/components/complex, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Neu“ > „Dialogfeld“.

5. Erstellen Sie einen Elemente-Knoten (Knotentyp cq:WidgetCollection) unter dem tab1-Knoten des
Dialogfelds Ihrer Komponente.

6. Erstellen Sie einen Text-Knoten (Knotentyp cq:Widget) unter dem neu erstellten Elemente-Knoten.

7. Weisen Sie dem neu erstellten Text-Knoten die folgenden Eigenschaften zu:

Name	Typ	Wert	Beschreibung
name	Zeichenfolge	ein./text	Definiert, wo der Inhalt gespeichert wird.
xtype	Zeichenfolge	Richt-Text	Definiert den Widget-Typ
hideLabel	Boolean	true	Legt fest, dass die Beschriftung des Widgets ausgeblendet wird
defaultValue	Zeichenfolge	Dies ist der Standardtext	Definiert den Standard-Textwert.

8. Erstellen Sie einen rtePlugins-Knoten (Knotentyp nt:unstructured) unter dem neu erstellten
Text-Knoten.

9. Erstellen Sie einen Tabellen-Knoten (Knotentyp nt:unstructured) unter dem neu erstellten
rtePlugins-Knoten.

10. Weisen Sie dem neu erstellten Tabellen-Knoten die Funktionseigenschaft (Typ = Zeichenfolge, Wert = *) zu.

11. Kopieren Sie die Knoten tab2 und tab3 unter den Knoten /libs/foundation/components/textimage/dialog/items. Kopieren Sie sie zum Dialogfeld der komplexen Komponente, sodass sie gleichrangig zu tab1 sind (z. B. /apps/imagecomponent/components/complex/dialog/items/items).

Tab2 ist die „Smartimage“-Registrierkarte und tab3 ist „Erweiterte Bildeigenschaften“. Es ist oft effizienter, vorhandene Dialogfelder/Widgets, die Ihren Anforderungen entsprechen, zu kopieren und einzufügen. Es wird empfohlen, sich noch einmal anzusehen, was Sie bereits kopiert haben und es auch nachzuvollziehen, um die interne Funktionsweise von CQ besser zu verstehen.

Wenn Sie es genau genug untersuchen, werden Sie sehen, dass das Widget bildbezogenen Inhalt tatsächlich auf einer tieferen Ebene als die aktuelle Ressource speichert (z. B./image/file, ./image/fileReference usw.). Dies entspricht dem Code in complex.jsp (Image image = new Image(resource, "image");).

12. Erstellen Sie einen Elemente-Knoten (Knotentyp cq:WidgetCollection) unter dem tab1-Knoten des Design-Dialogfelds Ihrer Komponente.

13. Erstellen Sie einen Pfad-Knoten (Knotentyp cq:Widget) unter dem Elemente-Knoten.

14. Weisen Sie dem Pfad-Knoten die folgenden Eigenschaften zu:

Name	Typ	Wert	Beschreibung
name	Zeichenfolge	ein./path	Definiert, wo der Inhalt gespeichert ist
xtype	Zeichenfolge	pathfield	Definiert den Widget-Typ
fieldLabel	Zeichenfolge	Einen Pfad eingeben	Definiert die auf das Widget angewendete Bezeichnung
rootPath	Zeichenfolge	/content/trainingSite	Definiert den anzuzeigenden Stammpfad
regex	Zeichenfolge	/^\/content\/trainingSite\/(.)*$/	Definiert den regulären Ausdruck, der zur Auswertung der Benutzereingabe verwendet wird
regexText	Zeichenfolge	Fügen Sie eine Seite unter /content/trainingSite ein.	Definieren der Fehlermeldung, wenn die Benutzereingabe den regulären Ausdruck nicht enthält

15. Kopieren Sie den Knoten /libs/foundation/components/textimage/cq:editConfig. Fügen Sie den Stammknoten Ihrer komplexen Komponente ein (/apps/imagecomponent/components/complex).

Diese Aktion ermöglicht die Drag-and-Drop-Funktion aus dem Content Finder.

Um Assets aus dem Content Finder mittels Drag-and-Drop bei einer Komponente auf einer Seite abzulegen, muss ein „Targets ablegen“-Konfigurationsknoten mit dem Namen „cq:dropTargets“ (vom Typ nt:unstructured) unter dem „Konfiguration bearbeiten“-Knoten (cq:editConfig) einer Komponente existieren.

16. Unter Verwendung von CRXDE zu diesem Pfad navigieren:

/apps/imagecomponent/components/complex/cq:editConfig/cq:dropTargets/image

Überprüfen Sie, ob der Bildknoten über die folgenden Eigenschaften verfügt:

Akzeptieren (Typ = Zeichenfolge) - die Medientypen, die zu akzeptieren sind (z. B. image/.*, usw.)
Gruppen (Typ = Zeichenfolge) - die Gruppen im Content Finder, von denen Assets
akzeptiert werden können (z. B. Medien)
propertyName (Typ = Zeichenfolge) - die Eigenschaft der Referenz sollte gespeichert werden
(z. B./image/fileReference)

17. Navigieren Sie zu dem Parameterknoten, der ein untergeordnetes Element des Bildknotens ist. Ändern
Sie den Wert von der sling:resourceType-Eigenschaft, sodass sie den folgenden Wert hat: training/
components/complex. Die sling:resourceType-Eigenschaft
sollte auf das Verzeichnis verweisen, wo ein Rendering-Skript zu finden ist.

Erstellen einer CQ Webseite, die die neue Komponente verwendet

Die letzte Aufgabe besteht darin, eine Site zu erstellen, die eine Seite enthält, die auf der Vorlage „templateImage“ basiert (das ist die Vorlage, die zuvor in diesem Entwicklungsartikel erstellt wurde). Auf dieser CQ-Seite können Sie das komplexe Widget auswählen, das Sie gerade vom CQ-Sidekick erstellt haben, wie in der folgenden Abbildung zu sehen ist.

Der CQ-Sidekick, der die komplexe Trainingskomponente anzeigt, die in diesem Entwicklungsartikel erstellt wird

1. Gehen Sie zur CQ-Startseite unter http://[Hostname]:[Anschluss]; z. B. http://localhost:4502.
„Websites“ auswählen.

2. Wählen Sie im linken Bereich die Option „Websites“.

3. Wählen Sie „Neue Seite“.

4. Geben Sie den Titel der Seite im „Titel“-Feld ein.

5. Geben Sie den Namen der Seite im „Name“-Feld ein.

6. Wählen Sie „templateImage“ von der Vorlagenliste, die angezeigt wird. Dieser Wert steht für die Vorlage, die in diesem Entwicklungsartikel erstellt wird. Wenn sie nicht angezeigt wird, wiederholen Sie die Schritte, die in diesem Entwicklungsartikel beschrieben sind. Wenn Sie z. B. bei der Eingabe in Pfadinformationen einen Fehler gemacht haben, wird die Vorlage im Dialogfeld „Neue Seite“ nicht angezeigt.

6. Öffnen Sie die neue Seite, die Sie erstellt haben, indem Sie im rechten Bereich darauf doppelklicken. Die neue Seite wird in einem Webbrowser geöffnet.

7. Klicken Sie im Sidekick auf das „Design“-Symbol, das sich am unteren Rand befindet.

8. Klicken Sie auf die Schaltfläche „Bearbeiten“, die nun angezeigt wird.

Die Schaltfläche „Bearbeiten“, die auf einer CQ-Webseite angezeigt wird

9. Vom nun angezeigten Dialogfeld „Komponente bearbeiten“ wählen Sie die Komponente unter „Lernphase“, wie in dieser Abbildung zu sehen ist.

Die CQ-Komponente, die in diesem Entwicklungsartikel erstellt wird

10. Klicken Sie auf „OK“.

11. Nun wird die neue Komponente im Sidekick angezeigt. Ziehen Sie die Komponente auf die Webseite. Jetzt wird die Komponente so angezeigt, wie es am Anfang des Artikels zu sehen ist. Wenn sie nicht angezeigt wird, stellen Sie sicher, dass Sie alle Knoten und Eigenschaften, die in diesem Artikel erstellt werden, erstellt haben.

Bei Ihrem Konto anmelden