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:
-
/appsauswählen- Ordner erstellen mit dem Namen custom
-
/apps/customauswählen- Ordner erstellen mit dem Namen components
-
-
/apps/custom/componentsauswä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.hbsbearbeiten nach:-
Ändern Sie den Wert des
data-scf-componentAttributs (~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.hbsbearbeiten 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/customauswä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/commentsauswählen -
Wählen Sie Knoten erstellen
-
Name:
clientlibs -
Typ:
cq:ClientLibraryFolder -
Fügen Sie zur Registerkarte Eigenschaften hinzu:
- name
categoriestypeStringvaluecq.social.author.hbs.commentsMulti - name
dependenciestypeStringvaluecq.social.scfMulti
- 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.txtein -
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 Pathwird auf/apps/customgesetzt- Deaktivieren Sie Nur geändert
- Schaltfläche Aktivieren auswählen