Erstellen der Komponenten

Das Beispiel der Erweiterung 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 veröffentlichten Kommentars erfasst.

Beide Komponenten müssen eingerichtet werden, insbesondere wenn das Erscheinungsbild eines veröffentlichten Kommentars angepasst wird.

Erstellen der Kommentarkomponente

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.

1. Navigieren Sie zu CRXDE|Lite (http://localhost:4502/crx/de/index.jsp).

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

   • Wählen Sie den Knoten /apps aus.

     • Erstellen von Ordnern mit benutzerdefiniertem Namen

   • Wählen Sie den Knoten /apps/custom aus.

     • Erstellen von ordnerspezifischen Komponenten

3. Wählen Sie den Knoten /apps/custom/components aus.

   • Erstellen > Komponente…

     • Titel: Kommentare
     • Titel: Alt-Kommentare
     • Beschreibung: Alternativer Kommentar-Stil
     • Supertyp: 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. Wählen Sie Alle speichern

6. Klicken Sie mit der rechten Maustaste comments.jsp

7. Wählen Sie Löschen aus

8. Wählen Sie Alle speichern

Erstellen der untergeordneten Kommentarkomponente

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.

1. Navigieren Sie zum Knoten /apps/custom/components/comments .

2. Rechtsklick auf den Knoten

   • Wählen Sie Erstellen > Komponente…

     • Titel: comment
     • Titel: Alt-Kommentar
     • Beschreibung: Alternativer Kommentarstil
     • Supertyp: 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. Wählen Sie Alle speichern

5. Klicken Sie mit der rechten Maustaste comment.jsp

6. Wählen Sie Löschen aus

7. Wählen Sie Alle speichern

Kopieren und Ändern der standardmäßigen HBS-Skripte

Verwenden von CRXDE Lite:

• Kopieren comments.hbs

  • Von /libs/social/commons/components/hbs/comments
  • Nach /apps/custom/components/comments

• Bearbeiten Sie comments.hbs, bis:

  • Ändern Sie den Wert des Attributs data-scf-component (~line 20):

    • Von social/commons/components/hbs/comments
    • An /apps/custom/components/comments

  • Nehmen Sie die benutzerdefinierte Kommentarkomponente (~line 75) auf:

    • Ersetzen {{include this resourceType='social/commons/components/hbs/comments/comment'}}
    • mit {{include this resourceType='/apps/custom/components/comments/comment'}}

• Kopieren comment.hbs

  • Von /libs/social/commons/components/hbs/comments/comment
  • Nach /apps/custom/components/comments/comment

• Bearbeiten Sie comment.hbs, bis:

  • Ändern Sie den Wert des data-scf-component -Attributs (~ Zeile 19)

    • Von social/commons/components/hbs/comments/comment
    • An /apps/custom/components/comments/comment

• Knoten /apps/custom auswählen

• Wählen Sie Alle speichern

Erstellen eines Client-Bibliotheksordners

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/clientlibs drei Dateien:

  • Name: css.txt
  • Name: js.txt
  • Name: customkommentssystem.js

• Geben Sie "customkommentssystem.js"als Inhalt von js.txt ein.

• Wählen Sie Alle speichern

Registrieren Sie das SCF-Modell und zeigen Sie

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:

customommentssystem.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

Veröffentlichen der App

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,

  • Wählen Sie Tools > Bereitstellung > Replikation
  • Wählen Sie Baum aktivieren
  • Setzen Sie Start Path auf /apps/custom
  • Deaktivieren Sie Nur geändert
  • Wählen Sie die Schaltfläche Aktivieren aus.