Informazioni su AEM Modello di pagina e Creazione di moduli adattivi
Informazioni sulle AEM librerie lato client
Un modello di modulo adattivo è un modello AEM pagina specializzato, con determinate proprietà e struttura del contenuto utilizzata per creare il modulo adattivo. Il modello dispone di layout, stili e struttura di contenuto iniziale preconfigurata.
Una volta creato il modulo, le modifiche apportate alla struttura del contenuto del modello originale non vengono applicate al modulo.
AEM QuickStart offre i seguenti modelli di modulo adattivo:
Per questi modelli la proprietà sling:resourceType
è impostata sul componente pagina corrispondente. Il componente Pagina esegue il rendering della pagina CQ, contenente un contenitore di moduli adattivi, che a sua volta esegue il rendering del modulo adattivo.
La tabella seguente elenca l'associazione tra i modelli e il 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/taccollEnrollmentTemplate |
/libs/fd/af/components/page/tabbedenrollment |
/libs/fd/afaddon/templates/advancedEnrollmentTemplate |
/libs/fd/afaddon/components/page/advancedenrollment |
È possibile specificare la struttura e il contenuto iniziale di un modulo adattivo utilizzando l'Editor modelli. Ad esempio, si desidera che tutti gli autori dei moduli dispongano di alcune caselle di testo, di pulsanti di navigazione e di un pulsante di invio in un modulo di iscrizione. È possibile creare un modello che gli autori possano utilizzare per creare un modulo coerente con altri moduli di iscrizione. AEM Editor modelli consente di:
Per ulteriori informazioni, vedere 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 ai contenitori di moduli adattivi e agli elementi di pagina, come intestazione e piè di pagina.
Per creare questi componenti, usate il componente Pagina di base per il sito Web. In alternativa, è possibile estendere il componente pagina del modulo adattivo utilizzato dai modelli predefiniti.
Per creare un modello personalizzato, ad esempio simpleEnrollmentTemplate, effettuate le seguenti operazioni.
Passa al CRXDE Lite nell’istanza di authoring.
Nella directory /apps, create la struttura di cartelle per l’applicazione. Ad esempio, se il nome dell’applicazione è una mia società, create una cartella con questo nome. In genere, la cartella dell'applicazione contiene componenti, configurazione, modelli, src e directory di installazione. Per questo esempio, create le cartelle componenti, configurazione e modelli.
Andate alla cartella /libs/fd/af/templates.
Copiare il nodo simpleEnrollmentTemplate
.
Andate alla cartella /apps/mycompany/templates. Fare clic con il pulsante destro del mouse su di esso e selezionare Incolla.
Se necessario, rinominare il nodo del modello copiato. Ad esempio, rinominatelo come modello di iscrizione.
Andate alla posizione /apps/mycompany/templates/enrollment-template.
Modificare le proprietà jcr:title
e jcr:description
del nodo jcr:content
per distinguere il modello dal modello copiato.
Il nodo jcr:content
del modello modificato contiene i componenti guideContainer
e guideformtitle
. guideContainer
è il contenitore che contiene il modulo adattivo. Il componente guideformtitle
visualizza il nome dell'applicazione, la descrizione e così via.
Invece di guideformtitle
, potete includere un componente personalizzato o il componente parsys
. Ad esempio, rimuovere guideformtitle
e aggiungere un componente personalizzato o il nodo del componente parsys
. Assicurarsi che la proprietà sling:resourceType
del componente faccia riferimento al componente e che lo stesso sia definito nel file di pagina component.jsp
.
Andate alla posizione /apps/mycompany/templates/enrollment-template/jcr:content.
Aprite la scheda Properties e modificate il valore della proprietà cq:designPath
in /etc/designs/mycompany.
Ora create un nodo /etc/designs/mycompany per il tipo cq:Page
.
Il modello personalizzato ha lo stesso stile del modello predefinito, in quanto fa riferimento al componente di pagina /libs/fd/af/components/page/base. Il riferimento al componente è riportato come proprietà sling:resourceType
definita nel nodo /apps/mycompany/templates/enrollment-template/jcr:content. Poiché base è un componente di base, non modificate questo componente.
Andate al nodo /apps/mycompany/templates/enrollment-template/jcr:content e modificate il valore della proprietà sling:resourceType
in /apps/mycompany/components/page/enrollpage.
Copiate il nodo /libs/fd/af/components/page/base nella cartella /apps/mycompany/components/page.
Rinominare il componente copiato in enrollmentpage
.
(Solo se disponete già di una pagina di contenuto) Effettuate i seguenti passaggi (a-d), se disponete di un contentpage
componente esistente per il sito Web. Se non si dispone di un componente contentpage
esistente per il sito Web, è possibile lasciare la proprietà resourceSuperType
per puntare alla pagina di base OOTB.
Per il nodo enrollmentpage
, imposta il valore della proprietà sling:resourceSuperType
su mycompany/components/page/contentpage. Il componente contentpage
è il componente della pagina di base per il sito. È possibile estendere anche altri componenti della pagina. Rimuovere i file di script in enrollmentpage
, ad eccezione di head.jsp
, content.jsp
e library.jsp
. Il componente sling:resourceSuperType
, in questo caso contentpage
, include tutti questi script. Le intestazioni, inclusa la barra di navigazione e il piè di pagina, vengono ereditate dal componente contentpage
.
Aprire il file head.jsp
.
Il file JSP contiene la riga <cq.include script="library.jsp"/>
.
Il file library.jsp
contiene la libreria client guide.theme.simpleEnrollment
, che contiene lo stile del modulo adattivo.
Il componente pagina enrollmentpage
dispone di un file head.jsp
esclusivo che sostituisce il file head.jsp
del componente contentpage
.
Includere tutti gli script nel file head.jsp
per il componente contentpage
nel file head.jsp
per il componente enrollmentpage
.
Nello script content.jsp
è possibile aggiungere contenuto di pagina aggiuntivo o riferimenti ad altri componenti inclusi durante il rendering di una pagina. Ad esempio, se aggiungete il componente personalizzato applicationformheader
, accertatevi di aggiungere il seguente riferimento al componente nel file JSP:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
Analogamente, se aggiungete un componente parsys
nella struttura del nodo del modello, includete anche il componente personalizzato.
Il file head.jsp
del componente enrollmentpage
per il nuovo modello include una libreria client guide.theme.simpleEnrollment
. Anche il modello predefinito utilizza questa libreria client. Modificate 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 della pagina utilizzato per eseguire il rendering di un modulo adattivo. La libreria del client regola principalmente l'aspetto di un modulo adattivo.