Guida ai componenti della community community-components-guide

La guida dei componenti community è uno strumento di sviluppo interattivo per il framework dei componenti social (SCF). Fornisce un elenco dei componenti disponibili di Adobe Experience Manager (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 come configurarli o personalizzarli.

Per informazioni sulle nozioni di base di sviluppo relative a ciascun componente, vedi Nozioni di base sulle funzionalità e sui componenti.

Guida introduttiva getting-started

La guida deve essere utilizzata nelle installazioni di sviluppo di istanze di authoring (localhost:4502) e di pubblicazione (localhost:4503).

Per accedere al sito Componenti community, vai a

Le interazioni con i componenti Community variano a seconda di:

  • Il server (di authoring o pubblicazione).
  • Indica se il visitatore del sito ha effettuato o meno l'accesso.
  • Se l'accesso è stato eseguito, i privilegi assegnati al membro.
  • Indica se l'SRP predefinito, JSRP, è in uso.

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

NOTE
Quando si esegue l’authoring in modalità Modifica, i collegamenti presenti in una pagina non sono attivi.
Per passare a una pagina di un componente, seleziona innanzitutto la modalità Anteprima per attivare i collegamenti.
Con la pagina del componente visualizzata nel browser, torna alla modalità Modifica per aprire la finestra di dialogo per modifica del componente.
Per informazioni generali sull'authoring, consulta la guida rapida all'authoring delle pagine.
Se non conosci l'AEM, consulta la documentazione sulle operazioni di base.

Pagina home home-page

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

Guida ai componenti visualizzata in un’istanza Autore in modalità Modifica:

componente-community1

Pagine dei componenti component-pages

Seleziona un componente dall’elenco lungo il lato sinistro della pagina.

pagine-componenti-community

Il corpo principale della guida mostra:

  1. Titolo: nome del componente selezionato

  2. Librerie lato client: elenco di una o più categorie richieste

  3. Inclusivo: se il componente può essere incluso in modo dinamico, lo stato può essere attivato nella modalità di modifica dell'autore:

    • Se aggiunto, il testo visualizzato è: "Questo componente è incluso tramite il suo nodo par".
    • Se incluso, il testo visualizzato è: "Questo componente è incluso in modo dinamico".
    • Se non è disponibile, non viene visualizzato alcun testo
  4. Componente o feature di esempio: un'istanza attiva del componente o della feature. Se un componente viene modificato, può essere modificato con modifiche apportate ai modelli, CSS e dati forniti nella sezione Scheda.

NOTE
Dopo aver effettuato una selezione dal lato sinistro, il componente viene visualizzato sotto l’elenco dei componenti, anziché accanto, quando la finestra del browser è troppo stretta.

Interazioni autore author-interactions

Quando utilizzi la guida su un’istanza dell’autore, puoi provare a configurare un componente aprendo la relativa finestra di dialogo. Le informazioni per gli sviluppatori sono fornite nella sezione Component and Feature Essentials della documentazione, mentre le impostazioni della finestra di dialogo sono descritte nella sezione Communities Components per gli autori.

Nella guida dei componenti della community, alcune impostazioni della finestra di dialogo dei componenti sono sovrapposte con lo stato di attivazione/disattivazione Includable. Per passare dall’utilizzo della risorsa esistente all’utilizzo di una risorsa inclusa dinamicamente, in modalità di modifica seleziona sia il componente che il testo da includere e fai doppio clic per aprire la finestra di dialogo di modifica:

componente community3

Nella scheda Modelli:

componente-community4

  • Includi il componente secondario con sling:include

    Se questa opzione è deselezionata, la Guida dei componenti utilizza la risorsa esistente nell’archivio (un nodo jcr che è figlio di un nodo par).

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

    Se questa opzione è selezionata, nella Guida dei componenti viene utilizzato sling per includere in modo dinamico un componente del resourceType del nodo figlio (risorsa non esistente).

    • il testo visualizzato è: "Questo componente è incluso in modo dinamico".

    L'impostazione predefinita è deselezionata.

Interazioni Publish publish-interactions

Quando si utilizza la guida in un’istanza di pubblicazione, è possibile provare i componenti e le funzionalità come visitatore del sito (non connesso) e come membri con vari privilegi quando si è connessi.

NOTE
Tieni 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 moderazione nell'istanza di authoring.

Librerie lato client client-side-libraries

Le librerie lato client (clientlibs) elencate per ogni componente sono quelle obbligatorie a cui fare riferimento quando il componente viene inserito in una pagina. Le clientlibs consentono di gestire e ottimizzare il download del JavaScript e dei CSS utilizzati per il rendering del componente nel browser.

Per ulteriori informazioni, visitare Clientlibs for Communities Components.

Impersonazione impersonation

Nell'istanza di authoring, in cui si è spesso connessi come amministratore o sviluppatore, per visualizzare il componente connesso come altro utente, utilizzare la casella di testo a sinistra del pulsante Impersona per digitare il nome utente o selezionarlo dall'elenco a discesa, quindi fare clic sul pulsante. Fai clic su Ripristina per uscire e terminare la rappresentazione.

Non è necessario che l’istanza Publish sia rappresentata. È sufficiente utilizzare il collegamento Login/Logout per rappresentare vari utenti, ad esempio utenti demo.

Personalizzazione customization

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

Abilitazione della personalizzazione enabling-customization

NOTE
Strumento di sola lettura. Nessuna delle modifiche apportate a modelli, CSS o dati viene salvata nell’archivio.

Per sperimentare rapidamente le personalizzazioni, la proprietà scg:showIde 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 authoring o di pubblicazione è stato effettuato l’accesso con privilegi di amministratore:

  1. Passa a CRXDE Liti

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

  2. Seleziona il nodo jcr:content del componente

    Ad esempio /content/community-components/en/comments/jcr:content

  3. Aggiungi una proprietà

    • Nome scg:showIde
    • Tipo String
    • Valore true
  4. Seleziona Salva tutto

  5. Ricarica la pagina Commenti nella guida

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

  6. Da notare che ora sono disponibili tre schede per Modelli, CSS e Dati.

componente-community5

componente-community6

Scheda Modelli templates-tab

Seleziona la scheda modelli per visualizzare i modelli associati al componente.

L’Editor modelli consente di compilare e applicare modifiche locali all’istanza del componente di esempio nella parte superiore della pagina senza influire sul componente nell’archivio.

L'esecuzione della compilazione su modifiche locali evidenzia gli eventuali errori posizionando un punto nella rilegatura e contrassegnando il testo in rosso.

Scheda CSS css-tab

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

Se un componente è un composito di 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 su accanto alla regola nella griglia.

Scheda Dati data-tab

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

Gli errori di sintassi possono essere contrassegnati nel contagocce ed evidenziati nell’editor.

recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791