Das Beispiel zum Erweitern von Komponenten verwendet das Kommentarsystem, das eigentlich aus zwei Komponenten besteht
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.
In diesen Anweisungen wird ein anderer Group-Wert als .hidden
angegeben, 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.
Gehen Sie zu CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Erstellen Sie einen Speicherort für benutzerdefinierte Anwendungen:
Wählen Sie den Knoten /apps
Wählen Sie den Knoten /apps/custom
Wählen Sie den Knoten /apps/custom/components
Erstellen > Komponente…
Wählen Sie Weiter aus
Wählen Sie Weiter aus
Wählen Sie Weiter aus
Wählen Sie OK aus
Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments
Wählen Sie Alle speichern
Klicken Sie mit der rechten Maustaste comments.jsp
Wählen Sie Löschen aus
Wählen Sie Alle speichern
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.
Navigieren Sie zum Knoten /apps/custom/components/comments
Klicken Sie mit der rechten Maustaste auf den Knoten
Wählen Sie Erstellen > Komponente…
*.hidden*
Wählen Sie Weiter aus
Wählen Sie Weiter aus
Wählen Sie Weiter aus
Wählen Sie OK aus
Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments/comment
Wählen Sie Alle speichern
Klicken Sie mit der rechten Maustaste comment.jsp
Wählen Sie Löschen aus
Wählen Sie Alle speichern
Verwenden von CRXDE Lite:
Kopieren comments.hbs
Bearbeiten Sie comments.hbs
nach:
Ändern Sie den Wert des Attributs data-scf-component
(~line 20):
social/commons/components/hbs/comments
/apps/custom/components/comments
Ändern Sie die Aufnahme der benutzerdefinierten Kommentarkomponente (~line 75):
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{include this resourceType='/apps/custom/components/comments/comment'}}
Kopieren comment.hbs
Bearbeiten Sie comment.hbs
nach:
Den Wert des Attributs data-scf-component (~ Zeile 19) ändern
social/commons/components/hbs/comments/comment
/apps/custom/components/comments/comment
Knoten /apps/custom
auswählen
Wählen Sie Alle speichern
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.
Verwenden von CRXDE Lite:
Knoten /apps/custom/components/comments
auswählen
Wählen Sie Knoten erstellen
Name: clientlibs
Typ: cq:ClientLibraryFolder
hinzufügen auf die Registerkarte Eigenschaften:
categories
String
NameTypeValue cq.social.author.hbs.comments
Multi
dependencies
String
NameTypeValue cq.social.scf
Multi
Wählen Sie Alle speichern
Wenn der Knoten /apps/custom/components/comments/clientlib
s ausgewählt ist, erstellen Sie 3 Dateien:
css.txt
js.txt
Geben Sie als Inhalt von js.txt
"customommentsystem.js"ein
Wählen Sie Alle speichern
Beim Erweitern (Überschreiben) einer SCF-Komponente ist resourceType anders (Überlagern verwendet den relativen Suchmechanismus, der /apps
vor /libs
durchsucht, 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 customcommentsystem.js
ein:
(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);
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:
von der globalen Navigation,
Start Path
auf /apps/custom
setzen