Aanpassing aan clientzijde client-side-customization

Er zijn verschillende manieren om de weergave en/of het gedrag van een AEM Communities-component op de client aan te passen.

Twee belangrijke benaderingen zijn het bedekken of uitbreiden van een component.

Bedekken een component verandert de standaardcomponent en beïnvloedt elke verwijzing naar de component.

Uitbreiden een component, die uniek wordt genoemd, beperkt het werkingsgebied van veranderingen. De term 'extend' wordt door elkaar gebruikt met 'override'.

Bedekkingen overlays

Het bedekken van een component is een methode om wijzigingen aan een standaardcomponent aan te brengen en alle instanties te beïnvloeden die het gebrek gebruiken.

De bedekking wordt verwezenlijkt door een exemplaar van de standaardcomponent in te wijzigen /apps in plaats van de oorspronkelijke component in de map / te wijzigen libben directory. De component is geconstrueerd met een identiek relatief pad, behalve dat 'libs' wordt vervangen door 'apps'.

De map /apps is de eerste plaats die wordt gezocht om aanvragen op te lossen. Als deze niet wordt gevonden, wordt de standaardversie in de map /libs gebruikt.

De standaardcomponent in de /libs folder moet nooit worden gewijzigd aangezien de toekomstige flarden en de verbeteringen vrij zijn om de /libs folder op om het even welke manier noodzakelijk te veranderen terwijl het handhaven van openbare interfaces.

Dit verschilt van verlenging een standaardcomponent waar het verlangen wijzigingen voor een specifiek gebruik moet maken, die tot een uniek weg aan de component leidt en zich baseert op het van verwijzingen voorzien van de originele standaardcomponent in de /libs folder als super middeltype.

Voor een snel voorbeeld van het bedekken van de commentaarcomponent, probeer Zelfstudie van de component Overlay Comments.

Extensies extensions

Het uitbreiden (met voeten treden) van een component is een methode om wijzigingen voor een specifiek gebruik aan te brengen zonder alle instanties te beïnvloeden die het gebrek gebruiken. De uitgebreide component krijgt een unieke naam in de map /apps en verwijst naar de standaardcomponent in de map /libs, zodat het standaardontwerp en de standaardwerking van een component niet worden gewijzigd.

Dit verschilt van bedekken De standaardcomponent waarin de aard van Sling relatieve verwijzingen naar apps/omslag alvorens in de libs/ omslag te zoeken oplost, zodat wordt het ontwerp of het gedrag van een component globaal gewijzigd.

Voor een kort voorbeeld van het uitbreiden van de commentaarcomponent, probeer Zelfstudie opmerkingencomponent uitbreiden.

JavaScript-binding javascript-binding

Het HBS-script voor de component moet zijn gebonden aan de JavaScript-objecten, -modellen en -weergaven, die deze functie implementeren.

De waarde van data-scf-component kenmerk kan de standaardwaarde zijn, zoals social/tally/components/hbs/rating of een uitgebreide (aangepaste) component voor aangepaste functionaliteit, zoals weretail/componenten/hbs/rating.

Om een component te binden, moet het volledige componentenmanuscript binnen een worden ingesloten <div> element met de volgende kenmerken:

Bijvoorbeeld van /apps/weretail/components/hbs/rating/rating.hbs:

<div class="we-Rating" data-component-id="`{{id}}`" data-scf-component="weretail/components/hbs/rating">

     <!-- HTML with HBS accessing the rating component -->

</div>

Aangepaste eigenschappen custom-properties

Wanneer u een component uitbreidt of bedekt, is het mogelijk eigenschappen toe te voegen aan een gewijzigd dialoogvenster.

Alle eigenschappen die op een component/een middel worden geplaatst kunnen worden betreden door de bezitssleutels in het zakbalkmalplaatje van verwijzingen te voorzien:

{{properties.<property_name>}}

CSS schuintrekken skinning-css

Componenten aanpassen aan het algemene thema van de website kan worden bereikt door 'skins' toe te wijzen. Kleuren, lettertypen, afbeeldingen, knoppen, koppelingen, afstand en zelfs een bepaalde positie worden gewijzigd.

Skin maken kan worden bereikt door de framestijlen selectief te overschrijven of door geheel nieuwe stijlpagina's te schrijven. De componenten SCF bepalen namespaced, modulaire, en semantische CSS klassen die de diverse elementen beïnvloeden die omhoog een component maken.

Een component skin geven:

De aangepaste stijlen overschrijven nu de standaardframestijlen en de component wordt met de nieuwe skin gerenderd.

JavaScript uitbreiden extending-javascript

Als u een JavaScript-implementatie voor componenten wilt uitbreiden, moet u:

forum.js: Sample Extension of Forum - HBS forum-js-sample-extension-of-forum-hbs

(function($CQ, _, Backbone, SCF) {
    "use strict";
    var GMForumView = SCF.ForumView.extend({
        viewName: "GMForum",
        showComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        },
        hideComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        }
    });

    SCF.registerComponent('social/forum/components/hbs/post', SCF.Post, SCF.PostView);
    SCF.registerComponent('social/forum/components/hbs/topic', SCF.Topic, SCF.TopicView);
    SCF.registerComponent('social/forum/components/hbs/forum', SCF.Forum, GMForumView );
})($CQ, _, Backbone, SCF);

Scriptlabels script-tags

Scripttags vormen een inherent onderdeel van het clientframework. Zij zijn de lijm die de prijsverhoging bindt die op de serverkant met de modellen en de meningen op de cliëntkant wordt geproduceerd.

Scripttags in SCF-scripts mogen niet worden verwijderd wanneer componenten worden overschreven of overschreven. SCF-scripttags die automatisch zijn gemaakt voor het injecteren van JSON in de HTML, worden aangeduid met het kenmerk data-scf-json=true.

Clientlibs voor SCF clientlibs-for-scf

Het gebruik van clientbibliotheken (clientlibs), biedt een manier om de JavaScript en CSS die worden gebruikt om inhoud op de client te renderen, te organiseren en te optimaliseren.

De clientlibs voor SCF volgen een zeer specifiek noemingspatroon voor twee varianten, die slechts door de aanwezigheid van "auteur"in de categorienaam variëren:

Volledige Clientlibs complete-clientlibs

De volledige (niet-auteur) clientlibs bevatten afhankelijkheden en zijn handig voor het opnemen met ui:includeClientLib.

Deze versies zijn te vinden in:

Bijvoorbeeld:

De Community Components Guide maakt een lijst van de volledige clientlibs die voor elke component SCF wordt vereist.

Clientlibs voor Community-componenten beschrijft hoe u clientlibs aan een pagina kunt toevoegen.

Auteur Clientlibs author-clientlibs

De clientlibs van de auteurversie worden gestript neer aan minimale JavaScript noodzakelijk om de component uit te voeren.

Deze clientlibs moeten nooit rechtstreeks worden opgenomen, maar zijn in plaats daarvan beschikbaar om in andere clientlibs in te sluiten, die voor een site worden gemaakt.

Deze versies staan in de map SCF libs:

Bijvoorbeeld:

Opmerking: hoewel auteur clientlibs geen andere bibliotheken heeft ingesloten, worden hun afhankelijkheden wel vermeld. Wanneer de afhankelijkheden zijn ingesloten in andere bibliotheken, worden deze niet automatisch ingesloten en moeten ze ook worden ingesloten.

De vereiste auteur clientlibs kunnen worden geïdentificeerd door "auteur"in de clientlibs op te nemen die voor elke component SCF in SCF worden vermeld Community Components Guide.

Overwegingen bij gebruik usage-considerations

Elke site is anders in de manier waarop ze clientbibliotheken beheren. Enkele factoren zijn: