AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.
Comprensione di AEM Modello di pagina e Authoring di moduli adattivi
Comprensione di AEM Librerie lato client
Un modello di modulo adattivo è specializzato AEM modello di pagina, con determinate proprietà e struttura del contenuto utilizzata per creare il modulo adattivo. Il modello dispone di layout, stili e struttura di contenuto iniziale di base preconfigurati.
Una volta creato un modulo, le eventuali modifiche apportate alla struttura del contenuto del modello originale non vengono applicate al modulo.
AEM QuickStart fornisce i seguenti modelli di modulo adattivo:
Questi modelli hanno sling:resourceType
impostata sul componente pagina corrispondente. Il componente pagina esegue il rendering della pagina CQ, contenente il contenitore di moduli adattivi, che a sua volta esegue il rendering del modulo adattivo.
La tabella seguente elenca l’associazione tra modelli e componente pagina:
Modello |
Componente Pagina |
/libs/fd/af/templates/surveyTemplate |
/libs/fd/af/components/page/survey |
/libs/fd/af/templates/simpleEnrollmentTemplate |
/libs/fd/af/components/page/base |
/libs/fd/af/templates/ttabsEnrollmentTemplate |
/libs/fd/af/components/page/tabbedenregistrazione |
/libs/fd/afaddon/templates/advancedEnrollmentTemplate |
/libs/fd/afaddon/components/page/advancedensubscription |
È possibile specificare la struttura e il contenuto iniziale di un modulo adattivo utilizzando Editor modelli. Ad esempio, si desidera che tutti gli autori dei moduli dispongano di alcune caselle di testo, dei pulsanti di navigazione e di un pulsante di invio in un modulo di iscrizione. È possibile creare un modello che gli autori possono utilizzare per creare un modulo coerente con gli altri moduli di iscrizione. AEM Editor modelli consente di:
Per ulteriori informazioni, consulta Editor modelli.
Invece di utilizzare i modelli disponibili, è possibile creare un modello e utilizzarlo per creare moduli adattivi. I modelli personalizzati si basano su vari componenti di pagina che fanno riferimento a contenitori di moduli adattivi e elementi di pagina, ad esempio intestazione e piè di pagina.
Puoi creare questi componenti utilizzando il componente pagina di base per il sito web. In alternativa, è possibile estendere il componente pagina del modulo adattivo utilizzato dai modelli predefiniti.
Esegui i seguenti passaggi per creare un modello personalizzato, ad esempio simpleEnRegistrationTemplate.
Passa ad CRXDE Lite nell’istanza di authoring.
Nella directory /apps , crea la struttura di cartelle per la tua applicazione. Ad esempio, se il nome dell’applicazione è azienda, crea una cartella con questo nome. In genere, la cartella dell'applicazione contiene componenti, configurazione, modelli, src e directory di installazione. Per questo esempio, crea le cartelle componenti, configurazione e modelli.
Passa alla cartella /libs/fd/af/templates.
Copia il simpleEnrollmentTemplate
nodo.
Passa alla cartella /apps/mycompany/templates. Fare clic con il pulsante destro del mouse e selezionare Incolla.
Se necessario, rinominare il nodo del modello copiato. Ad esempio, rinominalo come modello di registrazione.
Passa alla posizione /apps/mycompany/templates/enrollment-template.
Modifica la jcr:title
e jcr:description
proprietà per jcr:content
per distinguere il modello dal modello copiato.
La jcr:content
il nodo del modello modificato contiene guideContainer
e guideformtitle
componenti. guideContainer
è il contenitore che contiene il modulo adattivo. La guideformtitle
visualizza il nome dell’applicazione, la descrizione e così via.
Invece di guideformtitle
, puoi includere un componente personalizzato o parsys
componente. Ad esempio, rimuovi guideformtitle
e aggiungi un componente personalizzato o parsys
nodo componente. Assicurati che sling:resourceType
La proprietà del componente fa riferimento al componente e lo stesso è definito nella pagina component.jsp
file.
Passa alla posizione /apps/mycompany/templates/enrollment-template/jcr:content.
Apri Proprietà e modifica il valore del cq:designPath
a /etc/designs/mycompany.
Ora crea un nodo /etc/designs/mycompany per cq:Page
digitare.
Il modello personalizzato ha lo stesso stile del modello predefinito, perché fa riferimento al componente pagina /libs/fd/af/components/page/base. È possibile trovare il riferimento al componente come proprietà sling:resourceType
definito nel nodo /apps/mycompany/templates/enrollment-template/jcr:content. Poiché base è un componente di base del prodotto, non modificare questo componente.
Passa al nodo /apps/mycompany/templates/enrollment-template/jcr:content e modifica il valore della proprietà sling:resourceType
a /apps/mycompany/components/page/enrollpage
Copia il nodo /libs/fd/af/components/page/base nella cartella /apps/mycompany/components/page.
Rinomina il componente copiato in enrollmentpage
.
(Solo se disponi già di una pagina di contenuto) Esegui i seguenti passaggi (a-d), se disponi di un contentpage
per il sito web. Se non hai un contentpage
per il sito web, puoi lasciare il resourceSuperType
per puntare alla pagina di base OOTB.
Per enrollmentpage
nodo, imposta il valore della proprietà sling:resourceSuperType
alla mioazienda/componenti/pagina/contentpage. La contentpage
è il componente della pagina di base per il sito. È possibile estenderlo ad altri componenti della pagina. Rimuovi file di script in enrollmentpage
, tranne head.jsp
, content.jsp
e library.jsp
. La sling:resourceSuperType
componente, che è contentpage
in questo caso, include tutti questi script. Le intestazioni, comprese le barre di navigazione e i piè di pagina, vengono ereditate dal contentpage
componente.
Apri il file . head.jsp
.
Il file JSP contiene la riga <cq.include script="library.jsp"/>
.
La library.jsp
il file contiene guide.theme.simpleEnrollment
libreria client, che contiene lo stile del modulo adattivo.
Componente pagina enrollmentpage
ha un head.jsp
file che sostituisce il head.jsp
del contentpage
componente.
Includi tutti gli script nel head.jsp
per contentpage
nella head.jsp
per enrollmentpage
componente.
In content.jsp
è possibile aggiungere contenuto di pagina aggiuntivo o riferimenti ad altri componenti inclusi durante il rendering di una pagina. Ad esempio, se aggiungi il componente personalizzato applicationformheader
, accertati di aggiungere il seguente riferimento al componente nel file JSP:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
Allo stesso modo, se aggiungi un parsys
nella struttura del nodo del modello, includi anche il componente personalizzato.
La head.jsp
del enrollmentpage
il componente per il nuovo modello include una libreria client guide.theme.simpleEnrollment
. Il modello predefinito utilizza anche questa libreria client. Modificare lo stile nel nuovo modello utilizzando uno dei seguenti metodi:
guide.theme.simpleEnrollment
con il tema personalizzato.Il tema si riferisce a una libreria client inclusa nel componente pagina utilizzato per eseguire il rendering di un modulo adattivo. La libreria client gestisce principalmente l’aspetto di un modulo adattivo.