Show Menu
TOPICS×

Utilizzo dei componenti core

Per iniziare a utilizzare i componenti core nel tuo progetto, sono disponibili quattro passaggi, descritti singolarmente nelle sezioni seguenti:
In alternativa, per istruzioni più ampie su come iniziare da zero con la configurazione del progetto, i componenti core, i modelli modificabili, le librerie client e lo sviluppo di componenti, potrebbe essere interessante la seguente esercitazione multiparte: Guida introduttiva ad AEM Sites - Esercitazione WKND

Download e installazione

Una delle idee che stanno dietro ai componenti core è la flessibilità. Rilasciando nuove versioni dei componenti core più spesso, Adobe è più flessibile nel fornire nuove funzioni. Gli sviluppatori possono a loro volta essere flessibili in base ai componenti che scelgono di integrare nei loro progetti e alla frequenza con cui desiderano aggiornarli.
Per questo motivo, i componenti core non fanno parte del lancio rapido quando si avvia in modalità di produzione (senza contenuti di esempio). Pertanto, il primo passaggio consiste nel scaricare l’ultimo pacchetto di contenuti rilasciato da GitHub e installarlo nei vostri ambienti AEM.
Esistono diversi modi per automatizzare questo processo, ma il modo più semplice per installare rapidamente un pacchetto di contenuti in un'istanza è utilizzare Gestione pacchetti; consultate Installare i pacchetti . Inoltre, una volta eseguita un'istanza di pubblicazione, dovrete replicare il pacchetto all'editore; consultate Replica dei pacchetti .

Creare componenti proxy

Per motivi illustrati nella sezione Pattern componente proxy, i componenti core non devono essere direttamente citati dal contenuto. Per evitare che ciò accada, appartengono tutti a un gruppo di componenti nascosto (
.core-wcm
o
.core-wcm-form
), il che ne impedisce la visualizzazione diretta nell’editor.
Occorre invece creare componenti specifici per il sito, che definiscano il nome e il gruppo del componente desiderato da visualizzare agli autori della pagina, e che facciano riferimento a ciascun componente core come super-tipo. Questi componenti specifici del sito sono talvolta denominati "componenti proxy", perché non devono contenere nulla e servono principalmente a definire la versione di un componente da utilizzare per il sito. Tuttavia, quando si personalizzano i componenti Personalizzazione dei componenti core core, questi componenti proxy svolgono un ruolo essenziale per la marcatura e la personalizzazione logica.
Pertanto, per ogni componente core che si desidera utilizzare per un sito, è necessario:
  1. Create un componente proxy corrispondente nella cartella Components del sito.
    Esempio
    In
    /apps/my-site/components
    creare un nodo titolo di tipo
    cq:Component
  2. Puntare alla versione del componente core corrispondente con il super-tipo.
    Esempio
    Aggiungi la seguente proprietà:
    sling:resourceSuperType="core/wcm/components/title/v1/title"
  3. Definire il gruppo, il titolo e, facoltativamente, la descrizione del componente. Questi valori sono specifici del progetto e determinano in che modo il componente viene esposto agli autori.
    Esempio
    : aggiungere le seguenti proprietà:
    componentGroup="My Site" jcr:title="Title" jcr:description="Section Heading"
Ad esempio, guardate il componente titolo del sito di riferimento We.Retail, che è un buon esempio di un componente proxy creato in quel modo.

Caricare gli stili di base

  1. Se non ancora, create una libreria clientlibs.html client che contenga tutti i file CSS e JS necessari per il sito.
  2. Nella libreria client del sito, aggiungere le dipendenze ai componenti core eventualmente necessari. Questa operazione viene eseguita aggiungendo una
    embed
    proprietà.
    Ad esempio, per includere le librerie client di tutti i componenti core v1, la proprietà da aggiungere sarà:
    embed="[ core.wcm.components.image.v1, core.wcm.components.list.v1, core.wcm.components.breadcrumb.v1, core.wcm.components.form.container.v1, core.wcm.components.form.text.v1 ]"
Prima di passare alla sezione successiva, accertati che i componenti proxy e le librerie client siano stati distribuiti nell’ambiente AEM.

Consenti componenti

La procedura seguente viene eseguita nell'Editor templates.html modelli.
  1. Nell'Editor modelli, selezionare il Contenitore di layout e aprire il relativo criterio.
  2. Nell’elenco Componenti consentiti, selezionare i componenti proxy creati in precedenza, che devono essere visualizzati sotto il gruppo di componenti assegnato. Al termine, applicate le modifiche.
  3. Facoltativamente, per i componenti che dispongono di una finestra di dialogo di progettazione possono essere preconfigurati.
È tutto! Nelle pagine create dal modello modificato, è ora possibile utilizzare i componenti appena creati.
Articolo successivo: