Komponenten erstellen

Das Beispiel zum Erweitern von Komponenten verwendet das Kommentarsystem, das eigentlich aus zwei Komponenten besteht

  • Kommentare - Das umfassende Kommentarsystem, bei dem es sich um die auf einer Seite platzierte Komponente handelt.
  • Kommentar: Die Komponente, die eine Instanz eines geposteten Kommentars erfasst.

Beide Komponenten müssen eingerichtet werden, insbesondere wenn das Erscheinungsbild eines geposteten Kommentars angepasst werden soll.

Hinweis

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. Browse to CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Erstellen Sie einen Speicherort für benutzerdefinierte Anwendungen:

    • Wählen Sie die /apps Node

      • Ordner mit benutzerdefiniertem Namen erstellen
    • Wählen Sie die /apps/custom Node

      • Erstellen von Komponenten mit Ordnernamen
  3. Wählen Sie die /apps/custom/components Node

    • Erstellen > Komponente…

      • Beschriftung: Kommentare
      • Titel: Alt-Kommentare
      • Beschreibung: Alternativkommentar
      • Super Type: social/commons/components/hbs/comments
      • Gruppe: Benutzerdefiniert
    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie OK aus

  4. Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments

  5. Select Save All

  6. Right-click comments.jsp

  7. Löschen auswählen

  8. Select Save All

chlimage_1-70

Komponente für untergeordneten Kommentar erstellen

In diesen Anweisungen wird Gruppe auf .hidden festgelegt, 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. Navigate to the /apps/custom/components/comments node

  2. Klicken Sie mit der rechten Maustaste auf den Knoten

    • Wählen Sie **Erstellen >Komponente…

      • Beschriftung: Kommentar
      • Titel: Alt-Kommentar
      • Beschreibung: Alternativer Kommentarstil
      • Super Type: social/commons/components/hbs/comments/comment
      • Gruppe: *.hidden*
    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • 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

chlimage_1-71

chlimage_1-72

Kopieren und Ändern der Standard-HBS-Skripten

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 Wert "Kategorien"für die clientlib des standardmäßigen Kommentarsystems verwendet werden ( cq.social.author.hbs.comments), aber dann würde diese clientlib auch für alle Instanzen der Standardkomponente enthalten sein.

Using CRXDE Lite:

  • Knoten /apps/custom/components/comments auswählen

  • Knoten erstellen auswählen

    • Name: clientlibs

    • Typ: cq:ClientLibraryFolder

    • Registerkarte " Eigenschaften "Hinzufügen:

      • Name categoriesType - StringWert cq.social.author.hbs.comments Multi
      • Name dependenciesType - StringWert cq.social.scf Multi
  • Select Save All

  • Erstellen Sie /apps/custom/components/comments/clientlibbei 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

chlimage_1-73

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 müssen Sie JavaScript (in der Client-Bibliothek) schreiben, um das SCF JS-Modell und die Ansicht für den benutzerdefinierten resourceType zu registrieren.

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 Umgebung "Veröffentlichen"nutzen zu können, müssen Sie die benutzerdefinierte Komponente replizieren.

Eine Möglichkeit dazu ist

  • Aus globaler Navigation

    • Select Tools > Deployment > Replication
    • Baumstruktur aktivieren
    • Setzen Sie Start Path auf /apps/custom
    • Deaktivieren nur geändert
    • Schaltfläche " Aktivieren "auswählen

Auf dieser Seite