Verwenden von Kernkomponenten

Um mit Kernkomponenten in Ihrem eigenen Projekt produktiv zu werden, sind vier Schritte erforderlich, die in den folgenden Abschnitten einzeln detailliert sind:

1. Herunterladen und installieren
2. Proxy-Komponenten erstellen
3. Laden der Kernstile
4. Komponenten aktivieren

Herunterladen und installieren

Einer der treibenden Ideen hinter den Kernkomponenten ist Flexibilität. Durch die häufigere Veröffentlichung neuer Versionen der Kernkomponenten kann Adobe bei der Bereitstellung neuer Funktionen flexibler sein. Entwickler wiederum können flexibel entscheiden, welche Komponenten sie in ihre Projekte integrieren und wie oft sie diese aktualisieren möchten.

Aus diesem Grund sind die Kernkomponenten nicht Teil des Schnellstarts, wenn Sie im Produktionsmodus (ohne Beispielinhalt) beginnen. Der erste Schritt besteht darin, das neueste veröffentlichte Inhaltspaket von GitHub herunterzuladen und es in Ihren AEM-Umgebungen zu installieren.

Es gibt verschiedene Möglichkeiten, dies zu automatisieren, aber die einfachste Möglichkeit, ein Inhaltspaket schnell auf einer Instanz zu installieren, erfolgt über den Package Manager; siehe Installieren von Paketen. Sobald Sie außerdem eine Veröffentlichungsinstanz ausgeführt haben, müssen Sie dieses Paket für den Herausgeber replizieren. Siehe Replizieren von Paketen.

Proxy-Komponenten erstellen

Aus den im Abschnitt Proxy-Komponentenmuster erläuterten Gründen dürfen Kernkomponenten nicht direkt über den Inhalt referenziert werden. Um dies zu vermeiden, gehören alle zu einer ausgeblendeten Komponentengruppe ( .core-wcm oder .core-wcm-form), was verhindert, dass sie direkt im Editor angezeigt werden.

Stattdessen müssen Site-spezifische Komponenten erstellt werden, die den gewünschten Komponentennamen und die gewünschte Gruppe definieren, die für Seitenautoren angezeigt werden sollen, und jede auf eine Kernkomponente als ihren übergeordneten Typ verweisen. Diese Site-spezifischen Komponenten werden manchmal als „Proxy-Komponenten“ bezeichnet, da sie nichts enthalten und hauptsächlich zur Definition der Version einer Komponente dienen, die für die Site verwendet werden soll. Beim Anpassen der Kernkomponenten spielen diese Proxy-Komponenten jedoch eine wesentliche Rolle für die Anpassung von Markup und Logik.

Für jede Kernkomponente, die für eine Site verwendet werden soll, müssen Sie also Folgendes tun:

1. Erstellen Sie eine entsprechende Proxy-Komponente im Komponentenordner der Site.

   Beispiel
   Unter /apps/my-site/components Erstellen eines Titelknotens des Typs cq:Component

2. Verweisen Sie auf die entsprechende Kernkomponentenversion mit dem übergeordneten Typ.

   Beispiel
   Fügen Sie folgende Eigenschaft hinzu:
   sling:resourceSuperType="core/wcm/components/title/v1/title"

3. Definieren Sie die Gruppe, den Titel und optional die Beschreibung der Komponente. Diese Werte sind projektspezifisch und bestimmen, wie die Komponente Autoren offensteht.

   Beispiel
   Fügen Sie folgende Eigenschaften hinzu:

   componentGroup="My Site"
   jcr:title="Title"  
   jcr:description="Section Heading"
   

Betrachten Sie beispielsweise die Titelkomponente der WKND-Site. Dies ist ein gutes Beispiel für eine Proxy-Komponente, die auf diese Weise aufgebaut ist.

Laden der Kernstile

1. Erstellen Sie eine Client-Bibliothek, die alle CSS- und JS-Dateien enthält, die für Ihre Site benötigt werden, falls noch nicht geschehen.

2. Fügen Sie in der Client-Bibliothek Ihrer Site die Abhängigkeiten zu den Kernkomponenten hinzu, die möglicherweise benötigt werden. Dies geschieht durch Hinzufügen einer embed Eigenschaft.

   Um beispielsweise die Client-Bibliotheken aller v1 Kernkomponenten einzubeziehen, lautet die hinzuzufügende Eigenschaft:

   embed="[  
   core.wcm.components.image.v1,  
   core.wcm.components.list.v1,  
   core.wcm.components.breadcrumb.v1,  
   core.wcm.components.form.container.v1,  
   core.wcm.components.form.text.v1  
   ]"
   

Stellen Sie sicher, dass Ihre Proxy-Komponenten und Client-Bibliotheken in Ihrer AEM-Umgebung bereitgestellt wurden, bevor Sie zum nächsten Abschnitt übergehen.

Komponenten zulassen

Die folgenden Schritte werden im Vorlageneditor ausgeführt.

1. Wählen Sie im Vorlageneditor den Layout-Container aus und öffnen Sie seine Richtlinie.
2. Wählen Sie in der Liste der zulässigen Komponenten die zuvor erstellten Proxy-Komponenten aus, die unter der ihnen zugewiesenen Komponentengruppe angezeigt werden sollen. Übernehmen Sie anschließend die Änderungen.
3. Optional können sie für Komponenten, die ein Dialogfeld „Design“ haben, vorkonfiguriert werden.

Das war´s! In den aus der bearbeiteten Vorlage erstellten Seiten sollten Sie jetzt die neu erstellten Komponenten verwenden können.

Lesen Sie als Nächstes:

• Anpassen der Kernkomponenten - Erfahren Sie, wie Sie die Kernkomponenten gestalten und anpassen können.
• Komponentenrichtlinien - Lernen Sie die Implementierungsmuster der Kernkomponenten kennen.