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

Diese Anweisungen geben eine Gruppe Wert, der .hidden 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 /apps-Knoten aus

     • Ordner erstellen benannt custom

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

     • Ordner erstellen benannt Komponenten

3. Wählen Sie den /apps/custom/components-Knoten 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. Klicken Sie auf Alle speichern

6. Klicken Sie mit der rechten Maustaste comments.jsp

7. Wählen Sie Löschen aus

8. Klicken Sie auf Alle speichern

Erstellen der Komponente für untergeordnete Kommentare

Diese Anweisungen Gruppe nach .hidden da nur die übergeordnete Komponente in eine Seite einbezogen 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 /apps/custom/components/comments Knoten

2. Rechtsklick auf den Knoten

   • Auswählen 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. Klicken Sie auf Alle speichern

5. Klicken Sie mit der rechten Maustaste comment.jsp

6. Wählen Sie Löschen aus

7. Klicken Sie auf Alle speichern

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

Verwenden CRXDE Lite:

• Kopieren comments.hbs

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

• Bearbeiten comments.hbs an:

  • Ändern Sie den Wert der data-scf-component Attribut (~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 comment.hbs an:

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

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

• Auswählen /apps/custom Knoten

• Klicken Sie auf Alle speichern

Erstellen eines Client-Bibliotheksordners

Um zu vermeiden, dass diese Client-Bibliothek explizit einbezogen werden muss, kann 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 einbezogen.

Verwenden CRXDE Lite:

• Auswählen /apps/custom/components/comments Knoten

• Auswählen Knoten erstellen

  • Name: clientlibs

  • Typ: cq:ClientLibraryFolder

  • Hinzufügen zu Eigenschaften tab:

    • Name categories Typ String Wert cq.social.author.hbs.comments Multi
    • Name dependencies Typ String Wert cq.social.scf Multi

• Klicken Sie auf Alle speichern

• Mit /apps/custom/components/comments/clientlibErstellen Sie als ausgewählten Knoten 3 Dateien:

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

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

• Klicken Sie auf Alle speichern

Registrieren des SCF-Modells und Anzeigen

Beim Erweitern (Überschreiben) einer SCF-Komponente ist resourceType anders (Überlagern nutzt den relativen Suchmechanismus, der durchsucht wird) /apps before /libs 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 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);

• Klicken Sie auf Alle speichern

App veröffentlichen

Um die erweiterte Komponente in der Veröffentlichungsumgebung zu erleben, muss die benutzerdefinierte Komponente repliziert werden.

Eine Möglichkeit ist, dies zu tun

• Aus globaler Navigation

  • Auswählen Tools > Bereitstellung > Replikation
  • Auswählen Activate Tree
  • Satz Start Path: nach /apps/custom
  • Deaktivieren Only Modified
  • Auswählen Activatebutton

Ressourcen für Business.Adobe.com

Customer Communications Content Intelligence Responsive Forms Version History Web Content Management Dynamic Forms