Creazione di modelli personalizzati per layout multi-zona

In questa pagina viene illustrato come creare un modello personalizzato per un layout con più aree.

Considerazioni importanti

Prima di creare un modello personalizzato in un layout con più aree è importante tenere presenti due considerazioni importanti:

1. Dimensioni o percentuali fisse in pixel:

   È necessario decidere se utilizzare la dimensione in pixel fissa per aree diverse per il layout personalizzato o se si desidera creare un layout personalizzato utilizzando le percentuali.

   NOTA

   Il vantaggio derivante dall’utilizzo della percentuale per impostare le aree per il layout personalizzato consente di riutilizzare il modello in diverse dimensioni di schermo.

2. Convenzione di denominazione:

   Prima di comprendere come creare modelli personalizzati per più aree da utilizzare in un progetto AEM Screens , si consiglia di comprendere la versione dei modelli da creare.

   Nome layout	Descrizione
   Left20-LandscapeHD3Zone	Si riferisce a un layout orizzontale a 3 zone che consente di creare 3 zone con la zona 1 come 20% dello schermo orizzontale e verticale da sinistra, la zona 2 come 80% dello schermo orizzontale e il 20% dello schermo verticale giustificato, la zona 3 come 100% dello schermo orizzontale e l'80% dello schermo verticale con proporzioni pari a 16:9
   Upper20-PortraitHD2Zone	Si riferisce a un modello verticale a 2 zone che copre il 20% dello schermo dalla parte superiore, con proporzioni pari a 16:9
   Right20-LandscapeSD3Zone	Si riferisce a un modello a 3 zone che copre il 20% dello schermo da destra, con proporzioni pari a 4:3

   IMPORTANTE

   Le aree definite all'interno del layout personalizzato potrebbero non corrispondere alle proporzioni complessive dell'intero layout. La convenzione di denominazione seguita in questo documento specifica le proporzioni dell'intero layout personalizzato.

Esempio di utilizzo Case Left20-LandscapeHD3Zone Layout

Seguite la sezione seguente per creare un modello personalizzato Left20-LandscapeHD3Zone con la seguente configurazione:

• Left20 fa riferimento alla zona superiore sinistra che copre il 20% delle dimensioni orizzontale e verticale dello schermo.
• Orizzontale per visualizzare l'orientamento dello schermo
• ​​HD: rapporto di formato 16:9
• 3 Zonerefers a tre zone del display

Rappresentazione visiva del layout multi-zone

Il layout Left20-LandscapeHD3Zone consente di creare nel progetto il seguente layout a più zone:

Creazione di un layout Left20-LandscapeHD3Zone

Per creare un layout Left20-LandscapeHD3Zone per un progetto AEM Screens , effettuate le seguenti operazioni:

1. Create un progetto AEM Screens denominato custom template.

   

2. Andate a CRXDE Lite dall'istanza AEM —> Strumenti —> CRXDE Lite.

3. Create una cartella in apps con titolo customtemplate. Analogamente, create un'altra cartella denominata template in customtemplate, come illustrato nella figura riportata di seguito.

   

   NOTA

   È consigliabile fare clic su Salva tutto dalla barra delle azioni in CRXDE Lite ogni volta che si crea, si modifica o si copia il contenuto in uno dei nodi, altrimenti non sarà possibile eseguire il commit degli aggiornamenti.

4. Copiate il modello a sinistra da /libs/screens/core/templates/splitscreenchannel/lbar-left a /apps/customtemplate/template.

5. Rinominare il lbar-left (/apps/customtemplate/template) copiato in my-custom-layout.
   

6. Passare a /apps/customtemplate/template/my-custom-layout e aggiornare le proprietà jcr:description a Template for Left20-LandscapeHD3Zone e jcr:title a Left20-LandscapeHD3Zone.

   

7. Andate al nodo offline-config da /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config e aggiornate jcr:title a Left20-LandscapeHD3Zone.

   

8. Andate alla proprietà jcr:content di my-custom-template da /apps/customtemplate/template/my-custom-layout/jcr:content e aggiornate la proprietà cq:cssClass su aem-Layout my-custom-layout.

   

9. Facendo riferimento al passaggio (4), in cui avete copiato il modello a sinistra, potete visualizzare 3 griglie reattive sotto my-custom-layout/jcr:content. Aggiungi classe css personalizzata a ciascuna griglia reattiva nella proprietà cq:cssClass, ad esempio my-custom-layout—top-left per il nodo r1c1.

   

   Allo stesso modo, aggiungete my-custom-layout—top-right per r1c2 e, my-custom-layout—bottom per il nodo r2c1.

   NOTA

   Queste classi personalizzate verranno utilizzate nel css per impostare larghezza/altezza per queste griglie reattive.

   NOTA

   Potete aggiungere o rimuovere le griglie reattive in base al numero totale di griglie desiderato. In questo esempio, vengono mostrate 2 griglie nella prima riga e 1 griglia nella seconda riga, quindi ci sono un totale di 3 griglie reattive (r1c1, r1c2, r2c1).

10. Copiate /libs/settings/wcm/designs/screens in /apps/settings/wcm/designs/ e rinominate la progettazione copiata come custom-template-designs.

11. Andate a /apps/settings/wcm/designs/custom-template-designs e aggiornate la proprietà jcr:title di custom-template-designs su customtemplate-design.

12. Passare a /apps/settings/wcm/designs/custom-template-designs e creare un file static.css.

13. Copiate il contenuto in un file static.css:

        /*my-custom-layout styles*/
       .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
        width:20%;
        height: 36%;
       float: left !important;
       }
      .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
       width:80%;
       height: 36%;
      float: left !important;
      }
      .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
      width:100%;
      height: 64%;
      }
    

    NOTA

    Potete aggiornare le percentuali in modo che corrispondano ai requisiti per il modello personalizzato.

14. Passare a /apps/<project>/templates/my-custom-layout/jcr:content e aggiornare la proprietà cq:designPath a /apps/settings/wcm/designs/customtemplate-designs per caricare gli stili configurati in static.css

    NOTA

    Si consiglia di digitare tutti gli stili invece di copiare o incollare, il che può causare problemi di stile CSS causati da spazi bianchi.

Visualizzazione del risultato

Per usare il modello personalizzato sopra riportato nel progetto AEM Screens , effettuate le seguenti operazioni:

1. Andate al progetto Screens che avete creato nel passaggio (1) e selezionate la cartella Channels.

   

2. Fare clic su Crea nella barra delle azioni e selezionare il modello Left20-LandscapeHD3Zone dalla procedura guidata Crea.

   

3. Dopo aver creato un canale con il modello personalizzato, potete aggiungere risorse al canale dall’editor. La seguente anteprima mostra le immagini in un modello personalizzato.

   

Inserimento di un'immagine come livello di sfondo

Potete inserire nel layout un’immagine come livello di sfondo:

Potete regolare la regola CSS in modo da utilizzare ciò che viene chiamato "data-uri" e direttamente inline l'immagine (con codifica Base64) nel file CSS, creato in (passaggio 13), static.css.

Tale operazione è effettuata come segue:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }

In alternativa, puoi seguire i passaggi seguenti:

1. Accertatevi che l'immagine sia in qualche modo inclusa nella configurazione offline per il canale
2. Utilizzate un collegamento diretto all'immagine nel CSS precedente, invece della variante "data-uri"

Aggiornamento del colore di sfondo

Per modificare il colore di sfondo, aggiungete il codice seguente al file xml (passaggio 13), static.css.

.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }