Personalizzazione lato client

⇐ Funzioni Essenziali Personalizzazione lato server ⇒
Helper manubrio SCF

Per personalizzare l’aspetto e/o il comportamento di un componente AEM Communities lato client, sono disponibili diversi approcci.

Due approcci principali consistono nel sovrapporre o estendere un componente.

La sovrapposizione di un componente modifica il componente predefinito e influenza ogni riferimento al componente.

L’estensione di un componente con un nome univoco limita l’ambito delle modifiche. Il termine 'extension' viene utilizzato in modo intercambiabile con 'override'.

Sovrapposizioni

La sovrapposizione di un componente è un metodo per apportare modifiche a un componente predefinito e per interessare tutte le istanze che utilizzano il componente predefinito.

La sovrapposizione viene realizzata modificando una copia del componente predefinito nella directory /apps , anziché modificare il componente originale nella directory /libs . Il componente è costruito con un percorso relativo identico, eccetto 'libs' viene sostituito con 'apps'.

La directory /apps è il primo posto in cui è stata eseguita la ricerca per risolvere le richieste e, se non viene trovata, viene utilizzata la versione predefinita presente nella directory /libs.

Il componente predefinito nella directory /libs non deve mai essere modificato in quanto le patch e gli aggiornamenti futuri sono liberi di modificare la directory /libs in qualsiasi modo necessario pur mantenendo le interfacce pubbliche.

Ciò è diverso dall’ estensione di un componente predefinito in cui si desidera apportare modifiche per un uso specifico, la creazione di un percorso univoco per il componente e l’utilizzo di un riferimento al componente predefinito originale nella directory /libs come tipo di risorsa super.

Per un rapido esempio di sovrapposizione del componente commenti, provate l’esercitazione sul componenteOverlay Comments (Commenti sovrapposizione).

Estensioni

L’estensione (esclusione) di un componente è un metodo per apportare modifiche per un uso specifico senza influire su tutte le istanze che utilizzano l’impostazione predefinita. Il componente esteso ha un nome univoco nella cartella /apps e fa riferimento al componente predefinito nella cartella /libs, pertanto la progettazione e il comportamento predefiniti di un componente non vengono modificati.

Ciò è diverso dalla sovrapposizione del componente predefinito in cui la natura di Sling risolve i riferimenti relativi alle app/cartella prima di effettuare ricerche nella cartella libs/, pertanto la progettazione o il comportamento di un componente vengono modificati a livello globale.

Per un esempio rapido di estensione del componente commenti, provate l’esercitazione Estendi componente commenti.

Binding Javascript

Lo script HBS per il componente deve essere associato agli oggetti, ai modelli e alle viste JavaScript che implementano questa funzione.

Il valore dell' data-scf-component attributo può essere il componente predefinito, ad esempio social/tally/components/hbs/rating o esteso (personalizzato) per funzionalità personalizzate, ad esempio weretail/components/hbs/rating.

Per eseguire un binding di un componente, l'intero script del componente deve essere racchiuso all'interno di un elemento <div> con i seguenti attributi:

  • data-component-id="{{id}}"

    risolve la proprietà id dal contesto

  • data-scf-component="<resourceType>

Ad esempio, da /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>

Proprietà personalizzate

Quando si estende o si sovrappone un componente, è possibile aggiungere proprietà a una finestra di dialogo modificata.

Per accedere a tutte le proprietà impostate su un componente/risorsa, fare riferimento alle chiavi di proprietà nel modello handlebars:

{{properties.<property_name>}}

Skin CSS

La personalizzazione dei componenti in base al tema generale del sito Web può essere ottenuta mediante la "creazione di interfacce": modifica di colori, font, immagini, pulsanti, collegamenti, spaziatura e persino posizionamento in una certa misura.

La creazione di interfacce può essere ottenuta sostituendo selettivamente gli stili del framework o scrivendo fogli di stile completamente nuovi. I componenti SCF definiscono classi CSS con spazi di nomi, modulari e semantici che influiscono sui vari elementi che costituiscono un componente.

Per applicare uno skin a un componente:

  1. Identificare gli elementi che si desidera modificare (ad esempio, area del compositore, pulsanti della barra degli strumenti, font del messaggio e così via).

  2. Identificate le classi/regole CSS che influiscono su questi elementi.

  3. Creare un file foglio di stile (.css).

  4. Includete il foglio di stile in una cartella libreria client (clientlibs) per il sito e accertatevi che sia incluso nei modelli e nelle pagine con ui:includeClientLib.

  5. Ridefinire le classi e le regole CSS identificate (#2) nel foglio di stile e aggiungere stili.

Gli stili personalizzati sostituiranno gli stili framework predefiniti e il componente verrà rappresentato con il nuovo interfaccia.

ATTENZIONE

Qualsiasi nome di classe CSS con il prefisso scf-js-&ast; ha un uso specifico nel codice JavaScript. Queste classi influiscono sullo stato di un componente (ad esempio, per passare da nascosto a visibile) e non devono essere né ignorate né rimosse.

Mentre scf-js-amp;ast; le classi non influiscono sugli stili, i nomi delle classi possono essere utilizzati in fogli di stile con la conferma che, controllando gli stati degli elementi, possono verificarsi effetti collaterali.

Estensione di Javascript

Per estendere un’implementazione Javascript dei componenti, è necessario solo

  1. Create un componente per l’app con un jcr:resourceSuperType impostato sul valore del jcr:resourceType del componente esteso, ad esempio social/forum/components/hbs/forum
  2. Esaminate il codice JavaScript predefinito del componente SCF per determinare quali metodi registrare con SCF.registerComponent()
  3. Copiare il codice JavaScript del componente esteso o iniziare da zero
  4. Estendi il metodo
  5. Utilizzate SCF.registerComponent() per registrare tutti i metodi con le impostazioni predefinite o con gli oggetti e le viste personalizzati.

forum.js: Esempio di estensione del 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);

Tag script

I tag script sono parte integrante del framework lato client. Sono la combinazione che consente di associare la marcatura generata sul lato server ai modelli e alle viste sul lato client.

I tag script negli script SCF non devono essere rimossi quando si sovrappongono o si ignorano i componenti. I tag script SCF creati automaticamente per l'invio di JSON nell'HTML sono identificati con l'attributo data-scf-json=true.

Clientlibs per SCF

L'utilizzo di librerie lato client (clientlibs) consente di organizzare e ottimizzare i file Javascript e CSS utilizzati per il rendering del contenuto sul client.

I clientlibs per SCF seguono un pattern di denominazione molto specifico per due varianti, che varia solo in base alla presenza di "author" nel nome della categoria:

Clientlib Variant Pattern per la proprietà Categories
clientlib complete cq.social.hbs.<nome componente>
clientlib autore cq.social.author.hbs.<nome componente>

Clientlibs completi

I clientlibs completi (non autori) includono dipendenze e sono utili per l'inclusione con ui:includeClientLib.

Queste versioni sono disponibili in:

  • /etc/clientlibs/social/hbs/<nome componente>

Ad esempio:

  • Nodo cartella client: /etc/clientlibs/social/hbs/forum
  • Proprietà Categories: cq.social.hbs.forum

La guida Componenti community elenca tutti i clientlibs richiesti per ciascun componente SCF.

Clientlibs for Communities Components descrive come aggiungere clientlibs a una pagina.

Autori Clientlibs

I clientlibs della versione dell’autore vengono ridotti al codice JavaScript minimo necessario per implementare il componente.

Questi clientlibs non dovrebbero mai essere inclusi direttamente, ma sono invece disponibili per incorporare altri clientlibs, creati a mano per un sito.

Queste versioni si trovano nella cartella delle librerie SCF:

  • /libs/social/<feature>/components/hbs/<nome componente>/clientlibs

Ad esempio:

  • Nodo cartella client: /libs/social/forum/hbs/forum/clientlibs
  • Proprietà Categories: cq.social.author.hbs.forum

Nota: mentre i clientlibs di autori non incorporano mai altre librerie, elencano comunque le rispettive dipendenze. Se incorporate in altre librerie, le dipendenze non vengono inserite automaticamente e devono essere incorporate.

I clientlibs di autori richiesti possono essere identificati inserendo "author" nei clientlibs elencati per ciascun componente SCF nella guida Componenticommunity.

Considerazioni sull'utilizzo

Ogni sito è diverso nella gestione delle librerie client. Diversi fattori includono:

  • Velocità complessiva: Forse il desiderio è che il sito sia reattivo, ma è accettabile che la prima pagina sia un po 'lenta a caricarsi. Se molte delle pagine utilizzano lo stesso JavaScript, i vari Javascript possono essere incorporati in una clientlib e citati dalla prima pagina da caricare. Il codice JavaScript in questo singolo download rimane memorizzato nella cache, riducendo al minimo la quantità di dati da scaricare per le pagine successive.
  • Tempo breve per la prima pagina: Forse il desiderio è che la prima pagina si carichi velocemente. In questo caso, Javascript si trova in più file di piccole dimensioni a cui verrà fatto riferimento solo se necessario.
  • Un compromesso tra il caricamento della prima pagina e i successivi download.
⇐ Funzioni Essenziali Personalizzazione lato server ⇒
Helper manubrio SCF

In questa pagina