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: tutorial WKND
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.
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:
Create un componente proxy corrispondente nella cartella Components del sito.
EsempioIn /apps/my-site/components
creare un nodo titolo di tipo cq:Component
Puntare alla versione del componente core corrispondente con il super-tipo.
EsempioAggiungi la proprietà
seguente:
sling:resourceSuperType="core/wcm/components/title/v1/title"
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.
Se non ancora, create una libreria client che contenga tutti i file CSS e JS necessari per il sito.
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.
I passaggi seguenti vengono eseguiti nell' Editor modelli.
È tutto! Nelle pagine create dal modello modificato, è ora possibile utilizzare i componenti appena creati.
Articolo successivo: