Utilizzo dei componenti core

Per iniziare a utilizzare i componenti core nel tuo progetto, sono disponibili quattro passaggi, descritti singolarmente nelle sezioni seguenti:

1. Download e installazione
2. Creare componenti proxy
3. Caricare gli stili di base
4. Abilitare i componenti

Download e installazione di

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 negli 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; vedere Installare i pacchetti. Inoltre, una volta eseguita un'istanza di pubblicazione, dovrete replicare il pacchetto all'editore; vedere Replica di pacchetti.

Crea componenti proxy

Per motivi illustrati nella sezione Proxy Component Pattern, 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 impedirà loro di essere visualizzati direttamente 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 di base 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 core, questi componenti proxy svolgono un ruolo essenziale per la marcatura e la personalizzazione logica.

Pertanto, per ogni componente di base che si desidera utilizzare per un sito, è necessario:

1. Create un componente proxy corrispondente nella cartella Components del sito.

   ​
   EsempioIn /apps/my-site/components creare un nodo titolo di tipo cq:Component

2. Puntare alla versione del componente core corrispondente con il super-tipo.

   EsempioAggiungi la proprietà
   seguente:
   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.

   EsempioAggiungi le proprietà seguenti:

   componentGroup="My Site"
   jcr:title="Title"  
   jcr:description="Section Heading"
   

Ad esempio, guardate il componente title del sito WKND, che è un buon esempio di un componente proxy costruito in quel modo.

Caricare gli stili di base

1. Se non ancora, create una libreria 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 proprietà embed.

   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  
   ]"
   

Accertatevi che i componenti proxy e le librerie client siano stati distribuiti nell'ambiente AEM prima di passare alla sezione successiva.

Consenti componenti

I passaggi seguenti vengono eseguiti nell' Editor 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:

• Personalizzazione dei componenti core - per imparare a personalizzare lo stile dei componenti core.
• Linee guida per i componenti - per apprendere i pattern di implementazione dei componenti core.