De componenten maken create-the-components
Het voorbeeld om componenten uit te breiden gebruikt het commentaarsysteem, dat 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.
De component Opmerkingen maken create-the-comments-component
Deze richtingen specificeren a waarde van de Groep buiten .hidden zodat kan de component van componentenbrowser (sidekick) ter beschikking worden gesteld.
Het verwijderen van het automatisch gemaakte JSP-bestand komt doordat in plaats daarvan het standaard-HBS-bestand wordt gebruikt.
-
Blader naar CRXDE|Lite ( http://localhost:4502/crx/de/index.jsp )
-
Een locatie maken voor aangepaste toepassingen:
-
De node
/appsselecteren- creeer Omslag genoemd custom
-
De node
/apps/customselecteren- creeer Omslag genoemd components
-
-
De node
/apps/custom/componentsselecteren-
Create > Component…
- Etiket: commentaren
- Titel: De Commentaren van Alt
- Beschrijving: Alternatieve commentaarstijl
- Type van Super: sociaal/komma's/componenten/hbs/commentaren
- Groep: Douane
-
Selecteren Next
-
Selecteren Next
-
Selecteren Next
-
Selecteren OK
-
-
Vouw het gemaakte knooppunt uit:
/apps/custom/components/comments -
Selecteren Save All
-
Klikken met rechtermuisknop
comments.jsp -
Selecteren Delete
-
Selecteren Save All
De component Onderliggende opmerkingen maken create-the-child-comment-component
Deze richtingen plaatsen Groep aan .hidden aangezien slechts de oudercomponent binnen een pagina zou moeten worden omvat.
Het verwijderen van het automatisch gemaakte JSP-bestand komt doordat in plaats daarvan het standaard-HBS-bestand wordt gebruikt.
-
Navigeren naar het knooppunt
/apps/custom/components/comments -
Klik met de rechtermuisknop op het knooppunt
-
Selecteren Create > Component…
- Etiket: commentaar
- Titel: de Commentaar van Alt
- Beschrijving: Alternatieve commentaarstijl
- Type van Super: sociaal/komma's/componenten/hbs/commentaren/commentaar
- Groep:
*.hidden*
-
Selecteren Next
-
Selecteren Next
-
Selecteren Next
-
Selecteren OK
-
-
Vouw het gemaakte knooppunt uit:
/apps/custom/components/comments/comment -
Selecteren Save All
-
Klikken met rechtermuisknop
comment.jsp -
Selecteren Delete
-
Selecteren Save All
De standaard-HBS-scripts kopiëren en wijzigen copy-and-modify-the-default-hbs-scripts
Gebruikend CRXDE Lite :
-
Kopiëren
comments.hbs -
Bewerken
comments.hbsnaar:-
Wijzig de waarde van het kenmerk
data-scf-component(~line 20):- Van
social/commons/components/hbs/comments - Naar
/apps/custom/components/comments
- Van
-
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'}}
- Vervangen
-
-
Kopiëren
comment.hbs -
Bewerken
comment.hbsnaar:-
De waarde van het kenmerk data-scf-component wijzigen (~ regel 19)
- Van
social/commons/components/hbs/comments/comment - Naar
/apps/custom/components/comments/comment
- Van
-
-
Knooppunt
/apps/customselecteren -
Selecteren Save All
Een clientbibliotheekmap maken create-a-client-library-folder
Als u wilt voorkomen dat deze clientbibliotheek moet worden opgenomen, kunt u de categoriewaarde voor de clientlib van het standaardopmerkingssysteem gebruiken ( cq.social.author.hbs.comments). Nochtans, zou deze clientlib dan voor alle instanties van de standaardcomponent moeten worden omvat, ook.
Gebruikend CRXDE Lite :
-
Knooppunt
/apps/custom/components/commentsselecteren -
Selecteren Create Node
-
Naam:
clientlibs -
Type:
cq:ClientLibraryFolder -
Toevoegen aan tabblad Properties :
- Naam
categoriesTypeStringWaardecq.social.author.hbs.commentsMulti - Naam
dependenciesTypeStringWaardecq.social.scfMulti
- Naam
-
-
Selecteren Save All
-
Met
/apps/custom/components/comments/clientlibgeselecteerde knoop, creeer drie dossiers:- Naam:
css.txt - Naam:
js.txt - Naam: customcommentsystem.js
- Naam:
-
Voer 'customcommentsystem.js' in als de inhoud van
js.txt -
Selecteren Save All
Het SCF-model en de weergave registreren register-the-scf-model-view
Bij het uitbreiden (met voeten treden) van een component SCF, is resourceType verschillend (het bedekken gebruikt het relatieve onderzoeksmechanisme dat door /apps vóór /libs zoekt zodat resourceType het zelfde blijft). Daarom is het noodzakelijk om JavaScript (in de cliëntbibliotheek) te schrijven om het model SCF JS en de 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);
- Selecteren Save All
De app Publish 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
- Selecteren Activate Tree
Start Pathinstellen op/apps/custom- Uitschakelen Only Modified
- Knop Selecteren Activate