Guida ai componenti community

La guida Componenti comunitari è uno strumento di sviluppo interattivo per il quadro della componente sociale (SCF). Fornisce un elenco dei componenti disponibili AEM Communities o delle funzioni più complesse create da più componenti.

Oltre alle informazioni di base per ciascun componente, la guida consente di sperimentare il funzionamento dei componenti e delle funzioni SCF e le modalità di configurazione o personalizzazione.

Per informazioni relative alle informazioni di sviluppo essenziali relative a ciascun componente, vedere Feature e Componenti di base.

Guida introduttiva

La guida è destinata alle installazioni di sviluppo di istanze di creazione (localhost:4502) e pubblicazione (localhost:4503).

Per accedere al sito Community Components, consulta

Le interazioni con i componenti Community variano a seconda:

  • Server (autore o pubblicazione)
  • Se il visitatore del sito ha effettuato o meno l'accesso
  • Se avete effettuato l’accesso, i privilegi assegnati al membro
  • Utilizzato o meno l'SRP predefinito, JSRP,

Per attivare la modalità di modifica, al momento dell'authoring, inserire editor.html o cf# come primo segmento di percorso dopo il nome del server:

Nota

In modalità Modifica, i collegamenti presenti su una pagina non sono attivi.

Per passare alla pagina di un componente, seleziona innanzitutto la modalità Anteprima per attivare i collegamenti.

Con la pagina del componente visualizzata nel browser, tornate alla modalità Modifica per aprire la finestra di dialogo di modifica del componente.

Per informazioni generali sull’authoring, consulta la guida rapida all’authoring delle pagine.

Se non avete familiarità con AEM, consultate la documentazione sulle operazioni di base.

Home page

La guida fornisce un elenco dei componenti SCF disponibili per l’anteprima e la creazione di prototipi lungo il lato sinistro della pagina.

Guida ai componenti visualizzata su un’istanza di creazione in modalità di modifica:

chlimage_1-404

Pagine dei componenti

Selezionate un componente dall’elenco sul lato sinistro della pagina.

chlimage_1-405

Il corpo principale della guida visualizza:

  1. Titolo: Nome del componente selezionato

  2. Librerielato client: Elenco di una o più categorie richieste

  3. Inclusi: Se il componente può essere incluso in modo dinamico, è possibile attivare o disattivare lo stato in modalità di modifica dell’autore:

    • Se aggiunto, il testo visualizzato è: "Questo componente è incluso tramite il relativo nodo par."
    • Se incluso, il testo visualizzato è: "Questo componente è incluso dinamicamente."
    • Se non incluso, non viene visualizzato alcun testo

  4. Esempio di componente o funzione: un’istanza attiva del componente o della feature. Se un componente può essere modificato con modifiche apportate ai modelli, ai CSS e ai dati forniti nella sezione scheda.

Nota

Dopo aver effettuato una selezione dal lato sinistro, il componente compare sotto, invece che accanto, l’elenco dei componenti quando la finestra del browser è troppo stretta.

Interazioni autore

Quando si utilizza la guida in un’istanza di authoring, è possibile configurare un componente aprendo la relativa finestra di dialogo. Le informazioni per gli sviluppatori sono fornite nella sezione Componenti e funzionalità essenziali della documentazione, mentre le impostazioni della finestra di dialogo sono descritte nella sezione Componenti di Community per gli autori.

Per la guida Componenti comunità, alcune impostazioni della finestra di dialogo dei componenti sono sovrapposte allo stato Inclusibile . Per alternare tra l’utilizzo della risorsa esistente o di una risorsa inclusa dinamicamente, in modalità di modifica selezionate sia il componente che il testo incluso, quindi fate doppio clic per aprire la finestra di dialogo di modifica:

chlimage_1-406

Nella scheda Modelli :

chlimage_1-407

  • Includi componente secondario con sling:include

    Se questa opzione è deselezionata, la Guida ai componenti utilizzerà la risorsa esistente nell'archivio (un nodo jcr secondario di un nodo par).

    • il testo visualizzato è: "Questo componente è incluso tramite il relativo nodo par."

    Se questa opzione è selezionata, la Guida ai componenti utilizzerà la funzione sling per includere dinamicamente un componente del resourceType del nodo secondario (risorsa non esistente).

    • il testo visualizzato è: "Questo componente è incluso dinamicamente."

    Il valore predefinito è deselezionato.

Pubblicare le interazioni

Quando si utilizza la guida in un’istanza pubblicata, è possibile utilizzare i componenti e le funzioni come visitatore del sito (non ha effettuato l’accesso) e come membri con diversi privilegi al momento dell’accesso.

Nota

Tenete presente che se l’SRP viene lasciato impostato come predefinito su JSRP, l’UGC immesso nell’istanza di pubblicazione sarà visibile solo al momento della pubblicazione e *non sarà visibile dalla console di moderazione nell’istanza di creazione.

Librerie lato client

Le librerie (clientlibs) lato client elencate per ciascun componente sono quelle necessarie per fare riferimento quando il componente viene inserito in una pagina. I clientlibs forniscono uno strumento per gestire e ottimizzare il download di JavaScript e CSS utilizzati per il rendering del componente nel browser.

Per ulteriori informazioni, visita Clientlibs for Community Components.

Impersonazione

Nell’istanza di authoring, in cui un utente ha spesso effettuato l’accesso come amministratore o sviluppatore, per verificare che il componente abbia eseguito l’accesso come un altro utente, usate la casella di testo a sinistra del pulsante Impersona per digitare il nome utente o selezionarlo dall’elenco a discesa, quindi fate clic sul pulsante. Fate clic su Ripristina per uscire e terminare la rappresentazione.

L’istanza di pubblicazione non deve essere rappresentata. È sufficiente utilizzare il collegamento Login/Logout per rappresentare vari utenti, come gli utenti demo.

Personalizzazione

Quando attivato, ciascun componente SCF è disponibile per la creazione di prototipi di personalizzazioni possibili modificando temporaneamente il modello, i CSS e i dati del componente.

Abilitazione della personalizzazione

Nota

Questo strumento è di sola lettura. Nessuna delle modifiche apportate a modelli, CSS o dati viene salvata nella directory archivio.

Per sperimentare rapidamente le personalizzazioni, la scg:showIdeproprietà deve essere aggiunta al nodo JCR del contenuto della pagina del componente e impostata su true.

Utilizzando il componente commenti come esempio, nell’istanza di creazione o di pubblicazione, è stato effettuato l’accesso con privilegi di amministratore:

  1. Passa al CRXDE Lite

    Ad esempio, http://localhost:4503/crx/de

  2. Seleziona il nodo del jcr:content componente

    Esempio, /content/community-components/en/comments/jcr:content

  3. Aggiunta di una proprietà

    • Nome scg:showIde
    • Tipo String
    • Valore true

  4. Seleziona Salva tutto

  5. Ricaricare la pagina Commenti nella guida

    http://localhost:4503/content/community-components/en/comments.html

  6. Ora sono disponibili 3 schede per Modelli, CSS e Dati.

chlimage_1-408 chlimage_1-409

Scheda Modelli

Selezionate la scheda Modelli per visualizzare i modelli associati al componente.

L’Editor modelli consente di compilare e applicare le modifiche locali all’istanza del componente di esempio nella parte superiore della pagina, senza interferire con il componente presente nell’archivio.

L’esecuzione della compilazione sulle modifiche locali evidenzierà eventuali errori posizionando un punto nel rilegio e contrassegnando il testo in rosso.

Scheda CSS

Selezionate la scheda CSS per visualizzare il CSS associato al componente.

Se un componente è composto da più componenti, alcuni CSS possono essere elencati in uno degli altri componenti.

L’Editor CSS consente di modificare il CSS e applicarlo all’istanza del componente di esempio nella parte superiore della pagina.

È possibile selezionare una regola per evidenziare le parti del DOM che utilizzano tale regola facendo clic accanto alla regola nel rilegio.

Scheda Dati

Selezionate la scheda Dati per visualizzare i dati dell'endpoint .social.json. Questi dati sono modificabili e applicati all’istanza del componente di esempio.

Gli errori di sintassi possono essere contrassegnati nel rilegio e evidenziati nell'editor.

In questa pagina