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.

het Bedekkeneen component verandert de standaardcomponent en beïnvloedt elke verwijzing naar de component.

Uitbreidendeen 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 folder, eerder dan de originele component in de {folder te wijzigen. 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 is verschillend van het uitbreiden vaneen standaardcomponent waar het verlangen wijzigingen voor een specifiek gebruik moet maken, die tot een unieke weg aan de component leiden en zich baseren op het van verwijzingen voorzien van de originele standaardcomponent in de /libs folder als super middeltype.

Voor een snel voorbeeld om de commentaarcomponent te bedekken, probeer het leerprogramma van de Component van Commentaren van de Bedekking.

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 is verschillend van het bedekkende standaardcomponent waar de aard van het Sling relatieve verwijzingen naar apps/de omslag alvorens in de libs/ omslag te zoeken, zo wordt het ontwerp of het gedrag van een component globaal gewijzigd.

Voor een snel voorbeeld om de commentaarcomponent uit te breiden, probeer breidt de component van Commentarenuit.

JavaScript Binding javascript-binding

Het manuscript HBS voor de component moet aan de voorwerpen, de modellen, en de meningen van JavaScript worden gebonden, die deze eigenschap uitvoeren.

De waarde van het data-scf-component attribuut kan het gebrek, zoals social/tally/components/hbs/rating, of een uitgebreide (aangepaste) component voor aangepaste functionaliteit, zoals weretail/components/hbs/rating zijn.

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

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 cliënt-zijbibliotheken(clientlibs), verstrekt een middel om JavaScript en CSS te organiseren en te optimaliseren die wordt gebruikt om inhoud op de cliënt terug te geven.

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 communautaire gids van Componentenmaakt een lijst van de volledige clientlibs die voor elke component SCF worden vereist.

Clientlibs voor de Componenten van Gemeenschappenbeschrijft hoe te om clientlibs aan een pagina toe te voegen.

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 auteursclientlibs kunnen worden geïdentificeerd door "auteur"in de clientlibs op te nemen die voor elke component SCF in de Communautaire gids van Componentenworden vermeld.

Overwegingen bij gebruik usage-considerations

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