Das Beispiel der Erweiterung von Komponenten verwendet das Kommentarsystem, das eigentlich aus zwei Komponenten besteht
Beide Komponenten müssen eingerichtet werden, insbesondere wenn das Erscheinungsbild eines veröffentlichten Kommentars angepasst wird.
Pro Site-Seite ist nur ein Kommentarsystem zulässig.
Viele Communities-Funktionen enthalten bereits ein Kommentarsystem, dessen resourceType so geändert werden kann, dass er auf das erweiterte Kommentarsystem verweist.
In diesen Anweisungen wird ein anderer Group-Wert als .hidden
angegeben, sodass die Komponente über den Komponenten-Browser (Sidekick) verfügbar gemacht werden kann.
Das Löschen der automatisch erstellten JSP-Datei erfolgt dadurch, dass stattdessen die standardmäßige HBS-Datei verwendet wird.
Navigieren 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
aus.
Wählen Sie den Knoten /apps/custom
aus.
Wählen Sie den Knoten /apps/custom/components
aus.
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
In diesen Anweisungen wird Gruppe auf .hidden
gesetzt, da nur die übergeordnete Komponente in eine Seite eingefügt werden sollte.
Das Löschen der automatisch erstellten JSP-Datei erfolgt dadurch, dass stattdessen die standardmäßige HBS-Datei verwendet wird.
Navigieren Sie zum Knoten /apps/custom/components/comments
.
Rechtsklick 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
, bis:
Ändern Sie den Wert des Attributs data-scf-component
(~line 20):
social/commons/components/hbs/comments
/apps/custom/components/comments
Nehmen Sie die benutzerdefinierte Kommentarkomponente (~line 75) auf:
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{include this resourceType='/apps/custom/components/comments/comment'}}
Kopieren comment.hbs
Bearbeiten Sie comment.hbs
, bis:
Ändern Sie den Wert des data-scf-component -Attributs (~ Zeile 19)
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 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 enthalten sein.
Verwenden von CRXDE Lite:
Knoten /apps/custom/components/comments
auswählen
Wählen Sie Knoten erstellen
Name: clientlibs
Typ: cq:ClientLibraryFolder
Fügen Sie der Registerkarte Eigenschaften hinzu:
categories
String
NameTypeValue cq.social.author.hbs.comments
Multi
dependencies
String
NameTypeValue cq.social.scf
Multi
Wählen Sie Alle speichern
Erstellen Sie mit dem ausgewählten Knoten /apps/custom/components/comments/clientlib
s drei Dateien:
css.txt
js.txt
Geben Sie "customkommentssystem.js"als Inhalt von js.txt
ein.
Wählen Sie Alle speichern
Beim Erweitern (Überschreiben) einer SCF-Komponente ist der resourceType anders (das Überlagern nutzt den relativen Suchmechanismus, der /apps
vor /libs
durchsucht, sodass der resourceType gleich bleibt). Daher ist es erforderlich, JavaScript (in der Client-Bibliothek) zu schreiben, um das SCF-JS-Modell zu registrieren und für den benutzerdefinierten resourceType anzuzeigen.
Geben Sie 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 Veröffentlichungsumgebung zu erleben, muss die benutzerdefinierte Komponente repliziert werden.
Eine Möglichkeit hierfür ist:
von der globalen Navigation aus,
Start Path
auf /apps/custom