Handbuch der Community-Komponenten

Das Handbuch Community-Komponenten ist ein interaktives Entwicklungstool für das Social-Komponenten-Framework (SCF). Es bietet eine Liste der verfügbaren AEM Communities-Komponenten oder der komplexeren Funktionen, die aus mehreren Komponenten bestehen.

Neben den grundlegenden Informationen für jede Komponente ermöglicht das Handbuch Experimente darüber, wie die SCF-Komponenten/-Funktionen funktionieren und wie sie konfiguriert oder angepasst werden können.

Weitere Informationen zu Entwicklungserfordernissen für die einzelnen Komponenten finden Sie unter Feature und Component Essentials.

Erste Schritte

Das Handbuch ist für die Verwendung in Entwicklungs-Installationen von Autoreninstanzen (localhost:4502) und Veröffentlichungsinstanzen (localhost:4503) vorgesehen.

Die Website "Community-Komponenten"finden Sie unter

• https://<server>:<port>/content/community-components/en.html

Die Interaktionen mit den Communities-Komponenten variieren je nach:

• Der Server (Autor oder Veröffentlichungsserver)
• Ob der Site-Besucher angemeldet ist oder nicht
• Bei Anmeldung werden die dem Mitglied zugewiesenen Rechte
• Ob die Standard-SRP JSRP verwendet wird

Um beim Autor in den Bearbeitungsmodus zu wechseln, fügen Sie entweder editor.html oder cf# als erstes Pfadsegment nach dem Servernamen ein:

• Standard-Benutzeroberfläche:

  https://<server>:<port>/editor.html/content/community-components/en.html

• Klassische Benutzeroberfläche:

  https://<server>:<port>/cf#/content/community-components/en.html

Startseite

Das Handbuch enthält eine Liste der SCF-Komponenten, die für die Vorschau und das Erstellen von Prototypen auf der linken Seite verfügbar sind.

Komponentenhandbuch, wie auf einer Autoreninstanz im Bearbeitungsmodus angezeigt:

Komponentenseiten

Wählen Sie eine Komponente aus der Liste links auf der Seite aus.

Der Hauptteil des Handbuchs wird angezeigt:

1. Titel: Der Name der ausgewählten Komponente

2. Clientseitige Bibliotheken: Eine Liste einer oder mehrerer erforderlicher Kategorien

3. Einschließlich: Wenn die Komponente dynamisch eingeschlossen werden kann, kann der Status im Bearbeitungsmodus des Autors umgeschaltet werden:

   • Wenn der Text hinzugefügt wird, wird Folgendes angezeigt: "Diese Komponente wird über ihren par-Knoten eingeschlossen."
   • Wenn der Text einbezogen wird, wird Folgendes angezeigt: "Diese Komponente wird dynamisch einbezogen."
   • Ist dies nicht möglich, wird kein Text angezeigt

4. Beispielkomponente oder -funktion: eine aktive Instanz der Komponente oder Funktion. Wenn eine Komponente geändert wird, kann sie durch Änderungen an den Vorlagen, CSS und Daten im Abschnitt "Registerkarte"geändert werden.

Autoreninteraktionen

Wenn Sie das Handbuch für eine Autoreninstanz verwenden, können Sie die Konfiguration einer Komponente durch Öffnen des Dialogfelds durchführen. Informationen für Entwickler finden Sie im Abschnitt Komponenten- und Funktionskomponenten der Dokumentation, während die Dialogeinstellungen im Abschnitt Communities-Komponenten für Autoren beschrieben werden.

Im Handbuch "Community-Komponenten"werden einige Einstellungen im Komponentendialogfeld mit dem Umschalter Includable überlagert. Um zwischen der vorhandenen Ressource oder einer dynamisch eingeschlossenen Ressource zu wechseln, wählen Sie im Bearbeitungsmodus sowohl die Komponente als auch den inklusiven Text aus und klicken Sie bei gedrückter Dublette, um das Bearbeitungsdialogfeld zu öffnen:

Auf der Registerkarte Vorlagen:

• Untergeordnete Komponente mit sling:include einschließen

  Wenn diese Option deaktiviert ist, verwendet das Komponentenleitfaden die vorhandene Ressource im Repository (einen jcr-Knoten, der einem par-Knoten untergeordnet ist).

  • angezeigter Text: "Diese Komponente wird über ihren par-Knoten eingeschlossen."

  Wenn diese Option aktiviert ist, verwendet das Komponentenleitfaden sling, um dynamisch eine Komponente des resourceType des untergeordneten Knotens (nicht vorhandene Ressource) einzuschließen.

  • angezeigter Text: "Diese Komponente wird dynamisch einbezogen."

  Diese Option ist standardmäßig deaktiviert.

Veröffentlichungsinteraktionen

Bei Verwendung des Handbuchs in einer Veröffentlichungsinstanz können die Komponenten und Funktionen als Site-Besucher (nicht angemeldet) und als Mitglieder mit verschiedenen Berechtigungen beim Anmelden angezeigt werden.

Client-seitige Bibliotheken

Die clientseitigen Bibliotheken (clientlibs), die für jede Komponente aufgelistet werden, sind die erforderlichen, auf die verwiesen werden soll, wenn die Komponente auf einer Seite platziert wird. Die clientlibs bieten eine Möglichkeit zum Verwalten und Optimieren des Downloads von Javascript und CSS, die zur Wiedergabe der Komponente im Browser verwendet werden.

Weitere Informationen finden Sie unter clientlibs für Communities-Komponenten.

Personifikation

Verwenden Sie für die Autoreninstanz, bei der einer häufig als Administrator oder Entwickler angemeldet ist, das Textfeld links neben der Schaltfläche Impersonate, um die Komponente als ein anderer Benutzer anzuzeigen, und klicken Sie dann auf die Schaltfläche, um den Benutzernamen einzugeben oder aus der Pulldown-Liste auszuwählen. Klicken Sie auf "Zurück", um den Identitätswechsel zu signalisieren und zu beenden.

Die Instanz im Veröffentlichungsmodus muss nicht imitiert werden. Verwenden Sie einfach den Link Anmelden/Abmelden, um verschiedene Benutzer zu imitieren, z. B. Demobenutzer.

Anpassung

Bei Aktivierung steht jede SCF-Komponente für die Prototypisierung möglicher Anpassungen zur Verfügung, indem die Vorlage, das CSS und die Daten der Komponente vorübergehend geändert werden.

Aktivieren der Anpassung

Um schnell mit Anpassungen zu experimentieren, muss die scg:showIdeEigenschaft dem content-JCR-Knoten der Komponentenseite hinzugefügt und auf true gesetzt werden.

Verwenden der Kommentarkomponente als Beispiel für die Autor- oder Veröffentlichungsinstanz, die mit Administratorberechtigungen angemeldet ist:

1. Gehen Sie zu CRXDE Lite

   Beispiel: http://localhost:4503/crx/de

2. Wählen Sie den Knoten jcr:content der Komponente aus

   Beispiel: /content/community-components/en/comments/jcr:content

3. Eigenschaft hinzufügen

   • Name scg:showIde
   • Typ String
   • Wert true

4. Wählen Sie Alle speichern

5. Laden Sie die Seite "Kommentare"im Handbuch erneut.

   http://localhost:4503/content/community-components/en/comments.html

6. Beachten Sie, dass es jetzt 3 Registerkarten für Vorlagen, CSS und Daten gibt.

Registerkarte "Vorlagen"

Wählen Sie die Registerkarte "Vorlagen", um die mit der Komponente verknüpften Vorlagen anzuzeigen.

Mit dem Vorlageneditor können lokale Bearbeitungen kompiliert und auf die Beispielkomponenteninstanz oben auf der Seite angewendet werden, ohne dass die Komponente im Repository betroffen ist.

Wenn Sie die Kompilierung auf lokalen Bearbeitungen ausführen, werden alle Fehler hervorgehoben, indem Sie einen Punkt in die Bundstege setzen und den Text rot markieren.

CSS-Registerkarte

Wählen Sie die Registerkarte "CSS", um die mit der Komponente verknüpfte CSS anzuzeigen.

Wenn eine Komponente aus mehreren Komponenten besteht, kann ein Teil des CSS unter einer der anderen Komponenten aufgeführt werden.

Mit dem CSS-Editor kann das CSS geändert und auf die Beispielkomponenteninstanz oben auf der Seite angewendet werden.

Eine Regel kann ausgewählt werden, um die Teile des DOM mithilfe dieser Regel hervorzuheben, indem Sie neben der Regel im Bundstegen klicken.

Datenregisterkarte

Wählen Sie die Registerkarte "Daten", um die Endpunktdaten ".social.json"anzuzeigen. Diese Daten können bearbeitet werden und werden auf die Beispielkomponenteninstanz angewendet.

Syntaxfehler können in der Bundstege markiert und im Editor hervorgehoben werden.