Clientseitige Anpassung client-side-customization

Um das Erscheinungsbild und/oder Verhalten einer AEM Communities-Komponente Client-seitig anzupassen, gibt es mehrere Ansätze.

Zwei Hauptansätze sind das Überlagern oder Erweitern einer Komponente.

Überlagerung Eine Komponente ändert die Standardkomponente und wirkt sich auf jeden Verweis auf die Komponente aus.

Erweitern Da eine Komponente eindeutig benannt ist, beschränkt sie den Umfang der Änderungen. Der Begriff "Erweiterung"wird synonym mit "Überschreibung"verwendet.

Überlagerungen overlays

Das Überlagern einer Komponente ist eine Methode, Änderungen an einer Standardkomponente vorzunehmen und alle Instanzen zu betreffen, die den Standard verwenden.

Die Überlagerung erfolgt durch Ändern einer Kopie der Standardkomponente im /apps Verzeichnis, anstatt die ursprüngliche Komponente im / zu ändern libs Verzeichnis. Die Komponente wird mit einem identischen relativen Pfad erstellt, mit der Ausnahme, dass "libs"durch "apps"ersetzt wird.

Das Verzeichnis /apps ist der erste Ort, der zum Auflösen von Anforderungen gesucht wird. Wenn es nicht gefunden wird, wird die Standardversion im Verzeichnis /libs verwendet.

Die Standardkomponente im Verzeichnis /libs darf nie geändert werden, da zukünftige Patches und Upgrades das Verzeichnis /libs auf jede erforderliche Weise ändern können, während öffentliche Schnittstellen beibehalten werden.

Dies unterscheidet sich von Erweiterung eine Standardkomponente, deren Ziel darin besteht, Änderungen für einen bestimmten Verwendungszweck vorzunehmen, einen eindeutigen Pfad zur Komponente zu erstellen und sich darauf zu verlassen, dass im Verzeichnis /libs auf die ursprüngliche Standardkomponente als Superressourcentyp verwiesen wird.

Ein kurzes Beispiel für das Überlagern der Kommentarkomponente finden Sie in der Tutorial zur Überlagerungskomponente.

Erweiterungen extensions

Das Erweitern (Überschreiben) einer Komponente ist eine Methode, um Änderungen für einen bestimmten Verwendungszweck vorzunehmen, ohne dass sich dies auf alle Instanzen auswirkt, die den Standard verwenden. Die erweiterte Komponente ist eindeutig im Ordner /apps benannt und verweist auf die Standardkomponente im Ordner /libs . Daher werden das Standarddesign und -verhalten einer Komponente nicht geändert.

Dies unterscheidet sich von Überlagerung die Standardkomponente, bei der die Art von Sling relative Verweise auf den Ordner "apps/"auflöst, bevor die Suche im Ordner "libs/"erfolgt, sodass das Design oder Verhalten einer Komponente global geändert wird.

Ein kurzes Beispiel für die Erweiterung der Kommentarkomponente finden Sie unter Tutorial zum Erweitern der Kommentarkomponente.

JavaScript-Bindung javascript-binding

Das HBS-Skript für die Komponente muss an die JavaScript-Objekte, -Modelle und -Ansichten gebunden sein, die diese Funktion implementieren.

Der Wert der data-scf-component -Attribut ist möglicherweise der Standardwert, z. B. social/tally/components/hbs/rating oder eine erweiterte (angepasste) Komponente für benutzerdefinierte Funktionen, wie weretail/components/hbs/rating.

Um eine Komponente zu binden, muss das gesamte Komponentenskript in einer <div> -Element mit den folgenden Attributen:

Beispiel: von /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>

Benutzerdefinierte Eigenschaften custom-properties

Beim Erweitern oder Überlagern einer Komponente können Eigenschaften zu einem geänderten Dialogfeld hinzugefügt werden.

Auf alle Eigenschaften einer Komponente/Ressource kann über die Eigenschaftenschlüssel in der Handlebars-Vorlage zugegriffen werden:

{{properties.<property_name>}}

Gestalten von CSS skinning-css

Das Anpassen von Komponenten an das allgemeine Thema der Website kann durch eine "Skinning"-Änderung von Farben, Schriftarten, Bildern, Schaltflächen, Links, Abständen und sogar Positionierung in einem bestimmten Umfang erreicht werden.

Skinning kann durch selektives Überschreiben der Framework-Stile oder durch Schreiben völlig neuer Stylesheets erreicht werden. Die SCF-Komponenten definieren Namespace-, modulare und semantische CSS-Klassen, die sich auf die verschiedenen Elemente auswirken, aus denen eine Komponente besteht.

So erstellen Sie eine Komponente:

Die benutzerdefinierten Stile überschreiben jetzt die standardmäßigen Framework-Stile und die Komponente wird mit der neuen Skin gerendert.

JavaScript erweitern extending-javascript

Um eine JavaScript-Implementierung der Komponenten zu erweitern, benötigen Sie nur

forum.js: Beispielerweiterung des Forums - 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);

Skript-Tags script-tags

Skript-Tags sind ein wesentlicher Bestandteil des clientseitigen Frameworks. Sie sind der Kleber, der dazu beiträgt, das auf der Serverseite erzeugte Markup mit den Modellen und Ansichten auf der Clientseite zu binden.

Skript-Tags in SCF-Skripten sollten beim Überlagern oder Überschreiben von Komponenten nicht entfernt werden. SCF-Skript-Tags, die automatisch zum Einfügen von JSON in die HTML erstellt werden, werden mit dem -Attribut identifiziert data-scf-json=wahr.

Clientlibs für SCF clientlibs-for-scf

Die Verwendung von Client-seitige Bibliotheken (clientlibs) bietet eine Möglichkeit, JavaScript und CSS zu organisieren und zu optimieren, die zum Rendern von Inhalten auf dem Client verwendet werden.

Die clientlibs für SCF folgen einem sehr spezifischen Benennungsmuster für zwei Varianten, die nur durch das Vorhandensein von "author"im Kategorienamen variieren:

Vollständige Clientlibs complete-clientlibs

Die vollständigen clientlibs (ohne Autoreninstanz) enthalten Abhängigkeiten und sind für die Verwendung mit ui:includeClientLib praktisch.

Diese Versionen finden Sie unter:

Beispiel:

Die Handbuch zu Community-Komponenten listet die vollständigen clientlibs auf, die für jede SCF-Komponente erforderlich sind.

Clientlibs für Communities-Komponenten beschreibt, wie Client-seitige Bibliotheken zu einer Seite hinzugefügt werden.

Autor-Clientlibs author-clientlibs

Die clientlibs für die Autorenversion werden auf das für die Implementierung der Komponente erforderliche JavaScript-Minimum reduziert.

Diese Client-seitigen Bibliotheken sollten niemals direkt eingeschlossen werden, sondern stehen stattdessen zur Einbettung in andere Client-Bibliotheken zur Verfügung, die für eine Site handgefertigt sind.

Diese Versionen befinden sich im Ordner "SCF libs":

Beispiel:

Hinweis: Während Client-Bibliotheken vom Typ Autor nie andere Bibliotheken einbetten, führen sie ihre Abhängigkeiten auf. Wenn sie in andere Bibliotheken eingebettet sind, werden die Abhängigkeiten nicht automatisch abgerufen und müssen auch eingebettet werden.

Die erforderlichen Autoren-Client-Bibliotheken können identifiziert werden, indem "author"in die clientlibs eingefügt wird, die für jede SCF-Komponente in der Liste Handbuch zu Community-Komponenten.

Überlegungen zur Verwendung usage-considerations

Jede Site verwaltet Client-Bibliotheken anders. Verschiedene Faktoren sind: