Erstellen der Komponenten create-the-components
Beim Beispiel der Erweiterung von Komponenten wird das Kommentarsystem verwendet, das aus zwei Komponenten besteht.
- Kommentare : Das umfassende Kommentarsystem, d. h. die Komponente, die auf einer Seite platziert wird.
- Kommentar - Die Komponente, die eine Instanz eines veröffentlichten Kommentars erfasst.
Beide Komponenten müssen eingerichtet werden, insbesondere beim Anpassen des Erscheinungsbilds eines geposteten Kommentars.
Erstellen der Komponente Kommentare create-the-comments-component
In diesen Richtungen wird ein Gruppen-Wert außer .hidden
angegeben, sodass die Komponente über den Komponenten-Browser (Sidekick) verfügbar gemacht werden kann.
Das Löschen der automatisch erstellten JSP-Datei erfolgt, da stattdessen die Standard-HBS-Datei verwendet wird.
-
Navigieren Sie zu CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
-
Erstellen Sie einen Speicherort für benutzerdefinierte Programme:
-
/apps
auswählen- Ordner erstellen mit dem Namen custom
-
/apps/custom
auswählen- Ordner erstellen mit dem Namen components
-
-
/apps/custom/components
auswählen-
Erstellen > Komponente…
- label: comments
- Titel: ALT-Kommentare
- Beschreibung: Alternative Kommentarstil
- Supertyp: social/commons/components/hbs/comments
- group: custom
-
Wählen Sie Weiter
-
Wählen Sie Weiter
-
Wählen Sie Weiter
-
Wählen Sie OK aus.
-
-
Erweitern Sie den erstellten Knoten:
/apps/custom/components/comments
-
Wählen Sie Alle speichern
-
Rechtsklick auf
comments.jsp
-
Wählen Sie Löschen aus
-
Wählen Sie Alle speichern
Erstellen der untergeordneten Kommentarkomponente create-the-child-comment-component
Legen Sie Gruppe auf .hidden
fest, da nur die übergeordnete Komponente in eine Seite aufgenommen werden soll.
Das Löschen der automatisch erstellten JSP-Datei erfolgt, da stattdessen die Standard-HBS-Datei verwendet wird.
-
Navigieren Sie zum Knoten
/apps/custom/components/comments
. -
Rechtsklicken Sie auf den Knoten
-
Wählen Erstellen > Komponente…
- label: comment
- Titel: ALT-Kommentar
- Beschreibung: Alternative Kommentarstil
- Supertyp: 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.
-
-
Erweitern Sie den erstellten Knoten:
/apps/custom/components/comments/comment
-
Wählen Sie Alle speichern
-
Rechtsklick auf
comment.jsp
-
Wählen Sie Löschen aus
-
Wählen Sie Alle speichern
Kopieren und Ändern der Standard-HBS-Skripte copy-and-modify-the-default-hbs-scripts
Verwendet CRXDE Lite:
-
Kopieren
comments.hbs
-
comments.hbs
bearbeiten nach:-
Ändern Sie den Wert des
data-scf-component
Attributs (~Zeile 20):- Von
social/commons/components/hbs/comments
/apps/custom/components/comments
- Von
-
Ändern Sie , um die benutzerdefinierte Kommentarkomponente einzuschließen (~Zeile 75):
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
ersetzen- Mit
{{include this resourceType='/apps/custom/components/comments/comment'}}
-
-
Kopieren
comment.hbs
-
comment.hbs
bearbeiten nach:-
Ändern Sie den Wert des Attributs data-scf-component (~ Zeile 19)
- Von
social/commons/components/hbs/comments/comment
/apps/custom/components/comments/comment
- Von
-
-
/apps/custom
auswählen -
Wählen Sie Alle speichern
Erstellen eines Client-Bibliotheksordners create-a-client-library-folder
Um zu vermeiden, dass diese Client-Bibliothek eingeschlossen werden muss, kann der Kategoriewert für die clientlib des Standard-Kommentarsystems verwendet werden ( cq.social.author.hbs.comments
). Diese Client-Bibliothek muss dann jedoch auch für alle Instanzen der Standardkomponente eingeschlossen werden.
Verwendet CRXDE Lite:
-
/apps/custom/components/comments
auswählen -
Wählen Sie Knoten erstellen
-
Name:
clientlibs
-
Typ:
cq:ClientLibraryFolder
-
Fügen Sie zur Registerkarte Eigenschaften hinzu:
- name
categories
typeString
valuecq.social.author.hbs.comments
Multi
- name
dependencies
typeString
valuecq.social.scf
Multi
- name
-
-
Wählen Sie Alle speichern
-
Erstellen Sie bei ausgewähltem
/apps/custom/components/comments/clientlib
-Knoten drei Dateien:- Name:
css.txt
- Name:
js.txt
- Name: customcommentsSystem.js
- Name:
-
Geben Sie „customcommentsSystem.js“ als Inhalt der
js.txt
ein -
Wählen Sie Alle speichern
SCF-Modell registrieren und anzeigen register-the-scf-model-view
Beim Erweitern (Überschreiben) einer SCF-Komponente ist der resourceType anders (eine Überlagerung verwendet den relativen Suchmechanismus, der /apps
durchsucht, bevor er /libs
wird, damit der resourceType gleich bleibt). Daher müssen Sie JavaScript (in der Client-Bibliothek) schreiben, um das SCF-JS-Modell zu registrieren und für den benutzerdefinierten resourceType anzuzeigen.
Geben Sie den folgenden Text als Inhalt von customcommentsystem.js
ein:
customcommentsystem.js customcommentsystem-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);
- Wählen Sie Alle speichern
Publish - die App publish-the-app
Um die erweiterte Komponente in der Veröffentlichungsumgebung nutzen zu können, muss die benutzerdefinierte Komponente repliziert werden.
Eine Möglichkeit, dies zu tun, ist:
-
Über die globale Navigation,
- Wählen Sie Tools > Bereitstellung > Replikation
- Wählen Sie Baum aktivieren
Start Path
wird auf/apps/custom
gesetzt- Deaktivieren Sie Nur geändert
- Schaltfläche Aktivieren auswählen