Show Menu
TOPICS×

Sviluppo di componenti core

Panoramica

I componenti core forniscono componenti di base affidabili ed estensibili e i loro elementi di rilievo sono:
  • Funzionalità avanzate
    • Opzioni di configurazione flessibili per molti casi di utilizzo
    • Funzionalità preconfigurabili per definire quali funzioni sono disponibili per gli autori delle pagine
  • Consegna continua
    • Miglioramenti frequenti delle funzionalità incrementali
    • Disponibilità del codice sorgente su GitHub per consentire alla comunità di sviluppatori di fornire feedback e contribuire
    • Installazione tramite un pacchetto di contenuti rilasciato separatamente per gli aggiornamenti dei componenti da eseguire indipendentemente dagli aggiornamenti di AEM
  • Implementazione moderna
  • Marcatura iniziale
    • Seguente notazione del modificatore elemento blocco (BEM) a partire dalla release 2.0.0
      • Le versioni precedenti seguono le convenzioni di denominazione di Bootstrap
    • Utilizzabile per siti reattivi e mobili
  • Possibilità di serializzare come JSON il modello di contenuto per i casi di utilizzo headless CMS
  • Accessibili
I componenti core richiedono AEM 6.3 o versione successiva e Java 8 e richiedono l’uso di modelli modificabili
I componenti core non funzionano né con l’interfaccia classica né con i modelli statici.

Panoramica - Sessione Gems

Per un’introduzione ai componenti core, alle funzionalità offerte e alla modalità di utilizzo in AEM, vedi la pagina della sessione Gems di AEM dedicata ai componenti core di AEM
Gems on Adobe Experience Manager è una serie di approfondimenti tecnici offerti dagli esperti Adobe. Questa serie integra la documentazione di prodotto e di tutti gli altri canali tecnici, e consente agli sviluppatori di entrare in contatto e approfondire un argomento specifico.

Esercitazione per sviluppatori WKND

Get started developing AEM Sites with Core Components by following this step-by-step tutorial.

AEM Project Archetype

AEM Project Archetype crea un progetto Adobe Experience Manager minimo come punto di partenza per i tuoi progetti, incluso un esempio di componenti HTL personalizzati con SlingModels per la logica e la corretta implementazione dei componenti core con il pattern proxy consigliato.

Consegnato su GitHub

I componenti core sono sviluppati e forniti tramite GitHub.
CODICE SU GITHUB
Puoi trovare il codice di questa pagina su GitHub
Consultate la pagina della documentazione Utilizzo dei componenti core per apprendere come iniziare a utilizzarli nel progetto.
Disporre dei componenti core su GitHub consentirà di effettuare aggiornamenti frequenti e di ascoltare i commenti della comunità di sviluppatori AEM. Inoltre, questo dovrebbe aiutare clienti e partner a seguire pattern simili durante la creazione di componenti personalizzati.
Per essere aggiornati sulle ultime modifiche apportate ai componenti core, puoi vedere l’archivio Componenti principali su GitHub.

Libreria dei componenti

Consulta la Libreria aem_cmp_library componenti, che presenta la versione corrente dei componenti core e ne illustra l’utilizzo.

Componenti core integrati

I componenti core possono o non possono essere installati automaticamente a seconda di come si esegue AEM.

AEM come servizio cloud

Sebbene i componenti core siano completamente compatibili con AEM come servizio cloud, i componenti core devono essere installati manualmente e non sono disponibili out-of-the-box.

AEM On-Premise

Nelle installazioni in sede, i componenti core sono visibili in Quickstart quando il contenuto di esempio è presente, perché sono utilizzati dal sito di riferimento We.Retail. Tuttavia, in fase di produzione (in
nosamplecontent
modalità di esecuzione, senza che sia abilitato il contenuto di esempio), i componenti core non saranno più presenti e dovranno essere installati nell’istanza di AEM.
Negli ambienti di produzione locale, eseguite sempre il Quickstart in
nosamplecontent
modalità di esecuzione. Per utilizzare i componenti core in
nosamplecontent
modalità di esecuzione, segui le istruzioni della pagina della documentazione Uso dei componenti core.

Funzionalità tecniche

La tabella seguente fornisce una panoramica delle differenze tra i componenti core e i componenti di base.
Per informazioni dettagliate sulle funzionalità di authoring e sulle opzioni per la preconfigurazione, consultare la pagina dedicata all’authoring.
Funzionalità
Componente core
Componente Foundation
Implementazione logica
Java POJO con annotazioni Sling Models
Codice JSP
Definizione di markup
Codice JSP
Scarico XSS
Automatizzato da HTL
Principalmente manuale
Denominazione delle classi CSS
Convenzione di denominazione standard basata sulla notazione del modificatore di elementi di blocco (BEM) (dalla release 2.0.0)
Schemi personalizzati
Definizione finestra di dialogo
Corallo 2 + Interfaccia classica
Uscita JSON
Servlet Sling predefinito
Gestione versioni
Nessuno
Test
Test di unità + test di integrazione
Test di integrazione
Consegna
Via Quickstart
Licenza
Proprietà Adobe
Contributo
Tramite richiesta pull
Impossibile
Accessibilità
Completamente conforme allo standard # WCAG 2.0 AA(https://docs.adobe.com/content/help/en/experience-manager-cloud-service/sites/authoring/fundamentals/accessible-content.html
Solo parzialmente conforme allo standard WCAG 2.0 AA

Elenco componenti

Nella tabella seguente sono elencati i componenti core disponibili, che si collegano all'API e indicano quali componenti di base sostituire.
Componente core
Descrizione
Componenti di base sostituiti
Pagina reattiva che utilizza l’editor modelli
/libs/foundation/components/page /libs/wcm/foundation/components/page
Navigazione gerarchica delle pagine
/libs/foundation/components/breadcrumb
Titolo H1-H6
/libs/foundation/components/title /libs/wcm/foundation/components/title
RTF
/libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
Caricamento intelligente e pigro delle dimensioni di rappresentazione ottimali
/libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image
Elenco di pagine
/libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
widget di condivisione Facebook e Pinterest
-
Sistema paragrafo modulo reattivo
/libs/foundation/components/form/start /libs/foundation/components/form/end
Campo di immissione testo
/libs/foundation/components/form/text /libs/foundation/components/form/password
Campo di immissione opzioni multiple
/libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
Campo di input nascosto
/libs/foundation/components/form/hidden
Pulsante Invia o personalizzato
/libs/foundation/components/form/submit
Un componente di navigazione del sito che elenca la gerarchia di pagine nidificata
/libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
Uno switcher di lingua e Paese che elenca la struttura globale della lingua
-
Componente di ricerca che visualizza i risultati come suggerimenti inseriti in un menu a discesa
/libs/foundation/components/search
Consente all’autore del contenuto di creare facilmente un teaser per l’ulteriore contenuto utilizzando un’immagine, un titolo o un RTF e collegando altri contenuti o altre azioni
-
Consente all’autore del contenuto di organizzare il contenuto della pagina all’interno di più schede
-
Consente all’autore del contenuto di organizzare il contenuto in un carosello rotante di diapositive
/libs/foundation/components/carousel
Consente la visualizzazione di un frammento di contenuto
-
Consente di visualizzare un elenco dei frammenti di contenuto
-
Separa il contenuto di una pagina
-
Organizzare i pannelli dei contenuti in un ambiente comprimibile
-
Organizzare i componenti all’interno di un contenitore
-
Creare un pulsante su una pagina
-
Aggiunta di una risorsa scaricabile a una pagina
-
Aggiunta di un frammento esperienza a una pagina
/libs/cq/experience-fragments/editor/components/experiencefragment
Incorporare una risorsa esterna in una pagina
-

Componenti in arrivo

Per una panoramica della road map dei componenti core, consulta il progetto wiki su GitHub .

Aggiornamento dei componenti core

Un vantaggio dei componenti con versione è rappresentato dal fatto che consente di separare la migrazione a una nuova versione di AEM dalla migrazione alle nuove versioni dei componenti. Inoltre, se sono disponibili nuove versioni di componenti, è possibile migrare singolarmente ogni componente alla nuova versione.
Le migrazioni a una nuova versione di AEM non avranno alcun impatto sul funzionamento dei componenti core, a condizione che le loro versioni supportino anche la nuova versione di AEM in cui viene eseguita la migrazione. Le personalizzazioni effettuate sui componenti core non devono essere influenzate, a condizione che non utilizzino API che sono state obsolete o rimosse .
Le migrazioni a nuove versioni dei componenti core non influiranno neanche sul funzionamento del componente, ma potrebbero essere introdotte nuove funzionalità agli autori di pagine, che potrebbero richiedere alcune configurazioni da parte di un editor modelli, nel caso in cui il comportamento predefinito non sia desiderato. Potrebbe tuttavia essere necessario adattare le personalizzazioni, per ulteriori dettagli consultate la pagina Personalizzazione dei componenti core.

When to Use the Core Components?

Poiché i componenti core sono completamente nuovi e offrono molteplici vantaggi, si consiglia di utilizzarli nei nuovi progetti AEM. Per i progetti esistenti, la migrazione dei componenti dovrà essere eseguita nell’ambito di un’attività più ampia, ad esempio in occasione di un progetto di rebranding o riformattazione generale.
Di conseguenza, Adobe fornisce le seguenti raccomandazioni:
  • Nuovi progetti
    I nuovi progetti devono sempre tentare di utilizzare i componenti core. Se i componenti core non possono essere utilizzati direttamente o estesi per soddisfare i requisiti del progetto, create un componente personalizzato seguendo l’architettura dei componenti impostata nei componenti core. Eccetto dove non altrimenti possibile, evitare di utilizzare i componenti Sviluppo di componenti core di base.
  • La
    raccomandazione progetti esistenti viene mantenuta utilizzando i componenti di base, a meno che non sia pianificato il refactoring di un sito o di un componente. Poiché sono ampiamente utilizzati dalla maggior parte dei progetti esistenti, i componenti di base continueranno ad essere sostenuti.
  • Nuovi componenti
    personalizzati Se è possibile personalizzare un componente core esistente. In caso contrario, si consiglia di creare un nuovo componente personalizzato seguendo le linee guida sui componenti.
  • Componenti
    personalizzati esistenti Se i componenti funzionano come previsto, mantenerli come sono. In caso contrario, fare riferimento a "Nuovi componenti personalizzati" sopra.

Migrazione ai componenti core

Qualsiasi nuovo progetto deve essere implementato con i componenti core. Tuttavia, i progetti esistenti avranno generalmente ampie implementazioni dei componenti di base.
Uno sforzo maggiore su un progetto esistente (ad esempio un rebranding o un refactoring complessivo) spesso offre la possibilità di eseguire la migrazione ai componenti core. Per facilitare questa migrazione, Adobe ha fornito una serie di strumenti di migrazione per incoraggiare l'adozione dei componenti core e della più recente tecnologia AEM.
Gli strumenti di modernizzazione AEM consentono di convertire facilmente:
  • Modelli statici per modelli modificabili
  • Progettare configurazioni per i criteri
  • Componenti di base per componenti core
  • Interfaccia classica per interfaccia touch
Per ulteriori informazioni sull’utilizzo di questi strumenti, consulta la relativa documentazione .
Gli strumenti AEM Modernize sono uno sforzo della community e non sono supportati o giustificati da Adobe.

Supporto dei componenti core

I componenti core sono parte integrante di AEM e sono supportati così come sono. Sono soggetti agli stessi termini e condizioni dei prodotti forniti con Quickstart.
Come per le altre funzioni del prodotto AEM, la regola generale è: I componenti vengono inizialmente dichiarati obsoleti e i primi rimossi per la seguente release di AEM. Questo consente ai clienti di passare alla nuova versione del componente almeno un ciclo di rilascio prima di lasciarne indietro il supporto.
La versione di ogni componente indica chiaramente le versioni di AEM che supporta. Quando cessa il supporto per una versione di AEM, cessa anche il supporto dei componenti core per tale versione di AEM.
Per informazioni dettagliate sul supporto delle personalizzazioni dei componenti, consultate la pagina Personalizzazione dei componenti core.

Supporto dei componenti di base (“foundation”)

Poiché i componenti di base sono stati utilizzati come base per lo sviluppo di molti progetti in molte versioni di AEM, continueranno a essere supportati nel prossimo futuro.
However, Adobe's development emphasis has shifted to the Core Components and new features will be added to them, whereas nearly all Foundation Components have been deprecated with AEM 6.5 and only bug fixes will be made to the Foundation Components going forward.
Articolo successivo:
  • Utilizzo dei componenti di base: per iniziare a usare i componenti di base nel tuo progetto.
  • Linee guida per i componenti - per apprendere i pattern di implementazione dei componenti core.