DocumentatieAEM 6.4Handleiding Communities

De componenten maken create-the-components

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • User
CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

In het voorbeeld van het uitbreiden van componenten wordt het opmerkingssysteem gebruikt, dat eigenlijk uit twee componenten bestaat

  • Opmerkingen - Het omvattende opmerkingensysteem dat de component is die op een pagina wordt geplaatst
  • Opmerking - De component die een instantie van een geposte opmerking vastlegt

Beide componenten moeten worden geplaatst, vooral als het aanpassen van de verschijning van een geposte commentaar.

NOTE
Er is slechts één opmerkingsysteem per sitepagina toegestaan.
Vele eigenschappen van Gemeenschappen omvatten reeds een commentaarsysteem waarvan resourceType kan worden gewijzigd om het uitgebreide commentaarsysteem van verwijzingen te voorzien.

De component Opmerkingen maken create-the-comments-component

In deze aanwijzingen wordt een Groep andere waarde dan .hidden de component kan dus beschikbaar worden gesteld via de browser van de component (sidekick).

De verwijdering van het automatisch gemaakte JSP-bestand komt doordat in plaats daarvan het standaard-HBS-bestand wordt gebruikt.

  1. Bladeren naar CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Een locatie maken voor aangepaste toepassingen:

    • Selecteer /apps node

      • Map maken benoemd custom

    • Selecteer /apps/custom node

      • Map maken benoemd components

  3. Selecteer /apps/custom/components node

    • Create > Component…

      • Label: opmerkingen
      • Titel: Alt-opmerkingen
      • Beschrijving: Stijl van alternatieve opmerkingen
      • Supertype: social/commons/components/hbs/comments
      • Groep: Aangepast

    • Selecteer Next

    • Selecteer Next

    • Selecteer Next

    • Selecteer OK

  4. Vouw het zojuist gemaakte knooppunt uit: /apps/custom/components/comments

  5. Selecteer Save All

  6. Klikken met rechtermuisknop comments.jsp

  7. Selecteer Delete

  8. Selecteer Save All

chlimage_1-70

De component Onderliggende opmerkingen maken create-the-child-comment-component

Deze richtingenset Groep tot .hidden aangezien alleen de bovenliggende component in een pagina moet worden opgenomen.

De verwijdering van het automatisch gemaakte JSP-bestand komt doordat in plaats daarvan het standaard-HBS-bestand wordt gebruikt.

  1. Ga naar de /apps/custom/components/comments node

  2. Klik met de rechtermuisknop op het knooppunt

    • Selecteer Create > Component…

      • Label: opmerking
      • Titel: Alt-opmerking
      • Beschrijving: Alternatieve commentaarstijl
      • Supertype: social/commons/components/hbs/comments/comment
      • Groep: *.hidden*

    • Selecteer Next

    • Selecteer Next

    • Selecteer Next

    • Selecteer OK

  3. Vouw het zojuist gemaakte knooppunt uit: /apps/custom/components/comments/comment

  4. Selecteer Save All

  5. Klikken met rechtermuisknop comment.jsp

  6. Selecteer Delete

  7. Selecteer Save All

chlimage_1-71 chlimage_1-72

De standaard-HBS-scripts kopiëren en wijzigen copy-and-modify-the-default-hbs-scripts

Gebruiken CRXDE Lite:

  • Kopiëren comments.hbs

  • Bewerken comments.hbs tot:

    • De waarde van de optie data-scf-component attribuut (~line 20):

      • Van social/commons/components/hbs/comments
      • Naar /apps/custom/components/comments

    • Wijzigen om de aangepaste commentaarcomponent op te nemen (~line 75):

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

  • Kopiëren comment.hbs

  • Bewerken comment.hbs tot:

    • De waarde van het kenmerk data-scf-component wijzigen (~ regel 19)

      • Van social/commons/components/hbs/comments/comment
      • Naar /apps/custom/components/comments/comment

  • Selecteren /apps/custom node

  • Selecteer Save All

Een clientbibliotheekmap maken create-a-client-library-folder

Als u wilt voorkomen dat deze clientbibliotheek expliciet moet worden opgenomen, kunt u de categoriewaarde voor de clientlib van het standaardopmerkingssysteem gebruiken ( cq.social.author.hbs.comments), maar dan wordt deze clientlib ook opgenomen voor alle instanties van de standaardcomponent.

Gebruiken CRXDE Lite:

  • Selecteren /apps/custom/components/comments node

  • Selecteer Create Node

    • Naam: clientlibs

    • Type: cq:ClientLibraryFolder

    • Toevoegen aan Properties tab:

      • Naam categories Type String Waarde cq.social.author.hbs.comments Multi
      • Naam dependencies Type String Waarde cq.social.scf Multi

  • Selecteer Save All

  • Met /apps/custom/components/comments/clientlibAls knooppunt geselecteerd, maakt u 3 bestanden:

    • Naam: css.txt
    • Naam: js.txt
    • Naam: customcommentsystem.js

  • Voer 'customcommentsystem.js' in als de inhoud van js.txt

  • Selecteer Save All

chlimage_1-73

Het SCF-model en de weergave registreren register-the-scf-model-view

Wanneer het uitbreiden (met voeten treden) van een component SCF, is resourceType verschillend (het bedekken maakt gebruik van het relatieve onderzoeksmechanisme dat doorzoekt /apps voor /libs zodat resourceType het zelfde blijft). Daarom is het noodzakelijk om JavaScript (in de cliëntbibliotheek) te schrijven om het model SCF JS en mening voor custom resourceType te registreren.

Voer de volgende tekst in als de inhoud van customcommentsystem.js:

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);
  • Selecteer Save All

De app publiceren publish-the-app

Als u de uitgebreide component wilt ervaren in de publicatieomgeving, moet u de aangepaste component repliceren.

Een manier om dit te doen is

  • Van globale navigatie

    • Selecteer Tools > Deployment > Replication
    • Selecteer Activate Tree
    • Set Start Path: tot /apps/custom
    • Uitschakelen Only Modified
    • Selecteren Activateknop
recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6