Creazione di un modello di modulo adattivo personalizzato

Prerequisiti

• Informazioni su AEM Modello di pagina e Creazione di moduli adattivi

• Informazioni sulle AEM librerie lato client

Modello di modulo adattivo

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.

Modelli di modulo adattivo predefiniti

AEM QuickStart offre i seguenti modelli di modulo adattivo:

• Base: Consente di creare un modulo adattivo con più schede utilizzando un layout tabulazioni a sinistra, in cui è possibile consultare le schede in qualsiasi ordine casuale.
• Base con Adobe Sign: Consente di creare un modulo con più schede e procedure guidate. Utilizza un layout tabulazioni a sinistra che consente di visitare le schede in qualsiasi ordine. Utilizza i servizi di progettazione Adobe Document Cloud per la firma e la verifica.
• Modello vuoto: Consente di creare un modulo senza intestazione, piè di pagina e contenuto iniziale. È possibile aggiungere componenti quali caselle di testo, pulsanti e immagini. Il modello vuoto consente di creare un modulo che è possibile incorporare AEM pagine del sito.

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:

Creazione di un modello di modulo adattivo utilizzando l'editor modelli

È 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:

• Aggiungere componenti di intestazione e piè di pagina di un modulo nel livello struttura
• Fornire il contenuto iniziale per il modulo.
• Specificate un tema.
• Specificate azioni quali Invia, Reimposta e Naviga.

Per ulteriori informazioni, vedere Editor modelli.

Creazione di un modello di modulo adattivo da CRXDE

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.

1. Passa al CRXDE Lite nell’istanza di authoring.

2. 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.

3. Andate alla cartella /libs/fd/af/templates.

4. Copiare il nodo simpleEnrollmentTemplate.

5. Andate alla cartella /apps/mycompany/templates. Fare clic con il pulsante destro del mouse su di esso e selezionare Incolla.

6. Se necessario, rinominare il nodo del modello copiato. Ad esempio, rinominatelo come modello di iscrizione.

7. Andate alla posizione /apps/mycompany/templates/enrollment-template.

8. Modificare le proprietà jcr:title e jcr:description del nodo jcr:content per distinguere il modello dal modello copiato.

9. 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.

10. Andate alla posizione /apps/mycompany/templates/enrollment-template/jcr:content.

11. Aprite la scheda Properties e modificate il valore della proprietà cq:designPath in /etc/designs/mycompany.

12. Ora create un nodo /etc/designs/mycompany per il tipo cq:Page.

Creare un componente pagina modulo adattivo

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.

1. Andate al nodo /apps/mycompany/templates/enrollment-template/jcr:content e modificate il valore della proprietà sling:resourceType in /apps/mycompany/components/page/enrollpage.

2. Copiate il nodo /libs/fd/af/components/page/base nella cartella /apps/mycompany/components/page.

3. Rinominare il componente copiato in enrollmentpage.

4. (Solo se disponete già di una pagina di contenuto) Effettuate i seguenti passaggi (a-d), se disponete di un contentpagecomponente esistente per il sito Web. Se non si dispone di un componente contentpageesistente per il sito Web, è possibile lasciare la proprietà resourceSuperTypeper puntare alla pagina di base OOTB.

   1. 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.

   2. 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.

   3. Includere tutti gli script nel file head.jsp per il componente contentpage nel file head.jsp per il componente enrollmentpage.

   4. 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.

Creazione di una libreria client per moduli adattivi

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:

• Definire un tema personalizzato e sostituire il tema predefinito guide.theme.simpleEnrollment con il tema personalizzato.
• Definite una nuova libreria client in /etc/designs/mycompany. Includete la libreria client dopo la voce tema predefinita nella pagina jsp. Includi tutti gli stili sovrascritti e i file Java Script aggiuntivi in questa libreria client.