Show Menu
THEMEN×

Komponenten erstellen

Das Beispiel zum Erweitern von Komponenten verwendet das Kommentarsystem, das eigentlich aus zwei Komponenten besteht
  • Kommentare - Das umgehende Kommentarsystem, bei dem es sich um die auf einer Seite platzierte Komponente handelt
  • Kommentar - Die Komponente, die eine Instanz eines veröffentlichten Kommentars erfasst
Beide Komponenten müssen eingerichtet werden, insbesondere wenn das Erscheinungsbild eines geposteten Kommentars angepasst werden soll.
Pro Site-Seite ist nur ein Kommentarsystem zulässig.
Viele Communities-Funktionen beinhalten bereits ein Kommentarsystem, dessen resourceType geändert werden kann, um auf das erweiterte Kommentarsystem zu verweisen.

Create the Comments Component

In diesen Anweisungen wird ein anderer Gruppenwert angegeben, .hidden damit die Komponente über den Komponenten-Browser (Sidekick) verfügbar gemacht werden kann.
Das Löschen der automatisch erstellten JSP-Datei erfolgt, weil stattdessen die Standard-HBS-Datei verwendet wird.
  1. Erstellen Sie einen Speicherort für benutzerdefinierte Anwendungen:
    • Wählen Sie den /apps Knoten
      • Ordner mit benutzerdefiniertem Namen erstellen
    • Wählen Sie den /apps/custom Knoten
      • Erstellen von Komponenten mit Ordnernamen
  2. Wählen Sie den /apps/custom/components Knoten
    • Erstellen > Komponente...
      • Beschriftung : Kommentare
      • Titel : Alt- Kommentare
      • Beschreibung : Stil für alternative Kommentare
      • Super Type : social/commons/components/hbs/comments
      • Gruppe : Benutzerdefiniert
    • Wählen Sie Weiter
    • Wählen Sie Weiter
    • Wählen Sie Weiter
    • Wählen Sie OK aus
  3. Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments
  4. Select Save All
  5. Right-click comments.jsp
  6. Löschen auswählen
  7. Select Save All

Komponente für untergeordneten Kommentar erstellen

Diese Anweisungen setzen Gruppe auf .hidden , da nur die übergeordnete Komponente in eine Seite einbezogen werden sollte.
Das Löschen der automatisch erstellten JSP-Datei erfolgt, weil stattdessen die Standard-HBS-Datei verwendet wird.
  1. Navigieren zum /apps/custom/components/comments Knoten
  2. Klicken Sie mit der rechten Maustaste auf den Knoten
    • Wählen Sie Erstellen > Komponente...
      • Beschriftung : Kommentar
      • Titel : Kommentar Alt
      • Beschreibung : Alternativer Kommentarstil
      • Super Type : social/commons/components/hbs/comments/comment
      • Gruppe : *.hidden*
    • Wählen Sie Weiter
    • Wählen Sie Weiter
    • Wählen Sie Weiter
    • Wählen Sie OK aus
  3. Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments/comment
  4. Select Save All
  5. Right-click comment.jsp
  6. Löschen auswählen
  7. Select Save All

Standardskripte für HBS kopieren und ändern

Using CRXDE Lite :
  • Kopieren comments.hbs
  • Bearbeiten comments.hbs in:
    • Ändern Sie den Wert des data-scf-component Attributs (~line 20):
      • Von social/commons/components/hbs/comments
      • An /apps/custom/components/comments
    • Ändern Sie die Aufnahme der benutzerdefinierten Kommentarkomponente (~line 75):
      • Ersetzen {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • mit {{include this resourceType='/apps/custom/components/comments/comment'}}
  • Kopieren comment.hbs
  • Bearbeiten comment.hbs in:
    • Den Wert des Attributs data-scf-component (~ Zeile 19) ändern
      • Von social/commons/components/hbs/comments/comment
      • An /apps/custom/components/comments/comment
  • Knoten /apps/custom auswählen
  • Select Save All

Erstellen eines Client-Bibliotheksordners

Um zu vermeiden, dass diese Client-Bibliothek explizit einbezogen werden muss, könnte der Kategoriewert für die clientlib des Standard-Kommentarsystems verwendet werden ( cq.social.author.hbs.comments ), aber dann würde diese clientlib auch für alle Instanzen der Standardkomponente eingeschlossen.
Using CRXDE Lite :
  • Knoten /apps/custom/components/comments auswählen
  • Knoten erstellen auswählen
    • Name : clientlibs
    • Typ : cq:ClientLibraryFolder
    • Registerkarte "Zu Eigenschaften hinzufügen":
      • Name categories Typ String Wert cq.social.author.hbs.comments``Multi
      • Name dependencies Typ String Wert cq.social.scf``Multi
  • Select Save All
  • Erstellen Sie /apps/custom/components/comments/clientlib bei ausgewählter Node 3 Dateien:
    • Name : css.txt
    • Name : js.txt
    • Name : customommentsystem.js
  • Geben Sie als Inhalt "customommentsystem.js"ein js.txt
  • Select Save All

SCF-Modell und Ansicht registrieren

Beim Erweitern (Überschreiben) einer SCF-Komponente ist resourceType anders (Überlagern verwendet den relativen Suchmechanismus, der /apps zuvor durchsucht wird, /libs sodass resourceType gleich bleibt). Daher ist es notwendig, JavaScript (in der Client-Bibliothek) zu schreiben, um das SCF JS-Modell zu registrieren und für den benutzerdefinierten resourceType anzuzeigen.
Geben Sie den folgenden Text als Inhalt von ein customcommentsystem.js :

customommentsystem.js

(function($CQ, _, Backbone, SCF) {
    "use strict";
 
    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;
 
    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);

  • Select Save All

App veröffentlichen

Um die erweiterte Komponente in der Veröffentlichungsumgebung zu nutzen, müssen Sie die benutzerdefinierte Komponente replizieren.
Eine Möglichkeit dazu ist
  • Aus globaler Navigation
    • Wählen Sie Werkzeuge > Bereitstellung > Replikation
    • Wählen Sie nun eine der folgenden Optionen aus Activate Tree
    • Festlegen Start Path : nach /apps/custom
    • Deaktivieren Only Modified
    • Schaltfläche Activate "Auswählen"