Entwickeln von AEM-Komponenten (klassische Benutzeroberfläche) developing-aem-components-classic-ui

Erstellen Sie mit CRXDE Lite einen neuen Komponentenordner in:

/ apps/<myProject>/components/<myComponent>

Erstellen Sie die Knotenstruktur wie in libs und kopieren Sie dann die Definition einer vorhandenen Komponente, z. B. der Textkomponente . Um beispielsweise die Textkomponente anzupassen, kopieren Sie diese

• von /libs/foundation/components/text
• nach /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, z. B.:

• Hinzufügen eines neuen Felds im Dialogfeld

  • cq:dialog – Dialogfeld für die Touch-optimierte Benutzeroberfläche
  • dialog – Dialogfeld für die klassische Benutzeroberfläche

• Ersetzen der .jsp-Datei (Benennen Sie sie nach Ihrer neuen Komponente)

• oder vollständiges Überarbeiten der gesamten Komponente, falls gewünscht

Beispiel: Wenn Sie eine Kopie der standardmäßigen Textkomponente erstellen, können Sie dem Dialogfeld ein zusätzliches Feld hinzufügen und dann die .jsp-Datei aktualisieren, damit die hier vorgenommenen Eingaben verarbeitet werden.

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ä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 Design-Modus (nur klassische Benutzeroberfläche)

Aktivieren Sie die neue Komponente in Ihrem Absatzsystem anhand folgender Optionen:

• Verwenden von CRXDE Lite zum Hinzufügen des Werts <path-to-component> (Beispiel: /apps/geometrixx/components/myComponent) zu den Eigenschaftenkomponenten des Knotens /etc/designs/geometrixx/jcr:content/contentpage/par
• den Anweisungen unter Hinzufügen neuer Komponenten zu Absatzsystemen

Öffnen Sie AEM WCM eine Seite auf Ihrer Website und fügen Sie einen neuen Absatz des soeben erstellten Typs ein, um sicherzustellen, dass die Komponente ordnungsgemäß funktioniert.

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

• 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 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.

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:

• Dialogfeld-Definition: textimage/dialog
• Komponentenskript: textimage/textimage.jsp
• Bearbeitungskonfigurationsknoten (Ziehen und Ablegen von Assets erlauben): textimage/cq:editConfig

Bearbeiten Sie die Komponentenmetadaten:

• Komponentenname

  • jcr:description wird auf Text Image Component (Extended) gesetzt
  • jcr:title wird auf Text Image (Extended) gesetzt

• Gruppe, 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 gesetzt

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 der Komponente, um die neue Option einzuschließen. Die neue Komponente übernimmt die Teile des Dialogfelds, die mit denen im Original übereinstimmen. Der einzige Zusatz, den wir machen, ist die Erweiterung der Erweitert Registerkarte, um eine Bildposition Dropdown-Liste mit Optionen Left und Right:

• Lassen Sie die 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):

  • Ändern Sie xtype in cqinclude (um von der Standardkomponente zu übernehmen).
  • 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 hinzu.
  • Entfernen Sie alle anderen Eigenschaften oder Unterknoten.

• Für tab3:

  • Lassen Sie die Eigenschaften und Unterknoten unverändert.

  • Fügen Sie tab3/items, der Knotenposition von Typ cq:Widget, eine neue Felddefinition hinzu.

  • 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);

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.

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:

• Legen Sie jcr:title auf Image (Extended) fest

Navigieren Sie zu /apps/geometrixx/components/image/dialog/items/image.

Neue Eigenschaft hinzufügen:

• Name: allowUpload
• Typ: String
• Wert: false

Klicken Sie auf Alle speichern. Die Komponente kann jetzt getestet werden.

Öffnen Sie eine Seite in Geometrixx wie Englisch / Firma.

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 soeben erstellten.

Originalbildkomponente:

Ihre neue image-Komponente:

Die Komponente ist jetzt einsatzbereit.