Esempio di utilizzo del caso Left20-LandscapeHD3Zone Layout

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

  • Left20 - La zona superiore a sinistra copre il 20% delle dimensioni dello schermo orizzontale e verticale.
  • Landscape - Orientamento dello schermo.
  • HD - Proporzioni 16:9.
  • 3Zone - Tre aree della visualizzazione.

Rappresentazione visiva del layout MultiZone

Il layout Left20-LandscapeHD3Zone consente di creare il seguente layout multizona nel progetto:

immagine

Creazione di un layout Left20-LandscapeHD3Zone

Per creare un layout Left20-LandscapeHD3Zone per un progetto AEM Screens, eseguire la procedura seguente.

  1. Creare un progetto AEM Screens con titolo customtemplate.

    immagine

  2. Passa a CRXDE Liti dalla tua istanza AEM > Strumenti > CRXDE Liti.

  3. Crea una cartella in app con titolo customtemplate. Analogamente, creare un'altra cartella con titolo modello in customtemplate, come illustrato nella figura seguente.

    immagine

    NOTE
    Fare clic su Salva tutto nella barra delle azioni di CRXDE Lite ogni volta che si crea, si modifica o si copia contenuto in uno dei nodi. In caso contrario, non è possibile eseguire il commit degli aggiornamenti.
  4. Copia il modello a sinistra della barra da /libs/screens/core/templates/splitscreenchannel/lbar-left a /apps/customtemplate/template.

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

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

    immagine

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

    immagine

  8. Passa alla proprietà jcr:content di my-custom-template da /apps/customtemplate/template/my-custom-layout/jcr:content e aggiorna la proprietà cq:cssClass per poter utilizzare aem-Layout my-custom-layout.

    immagine

  9. Con riferimento al passaggio (4) in cui è stato copiato il modello barra a sinistra, è possibile visualizzare tre griglie reattive in my-custom-layout/jcr:content. Aggiungi una classe CSS personalizzata a ciascuna griglia reattiva nella proprietà cq:cssClass, ad esempio my-custom-layout-top-left per il nodo r1c1.

    immagine

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

    NOTE
    Queste classi personalizzate vengono utilizzate nel CSS per impostare la larghezza/altezza di queste griglie reattive.
    NOTE
    È possibile aggiungere o rimuovere le griglie reattive in base al numero di griglie totali desiderate. In questo esempio vengono visualizzate due griglie nella prima riga e una nella seconda riga, in modo da ottenere un totale di tre griglie reattive (r1c1, r1c2, r2c1).
  10. Copiare /libs/settings/wcm/designs/screens in /apps/settings/wcm/designs/ e rinominare la progettazione copiata come custom-template-designs.

  11. Passa a /apps/settings/wcm/designs/custom-template-designs e aggiorna la proprietà jcr:title di custom-template-designs in customtemplate-design.

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

  13. Copia il contenuto nel 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%;
      }
    
    NOTE
    Puoi aggiornare le percentuali in base ai requisiti del 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 in modo da poter caricare gli stili configurati in static.css.

    NOTE
    Digita tutti gli stili invece di copiare o incollare, il che può causare spazi bianchi che causano problemi di stile CSS.

Visualizzazione del risultato

Segui i passaggi seguenti per utilizzare il modello personalizzato di cui sopra nel tuo progetto AEM Screens:

  1. Passa al progetto Screens creato al passaggio 1 e fai clic sulla cartella Canali.

    immagine

  2. Fare clic su Crea nella barra delle azioni e fare clic sul modello Left20-LandscapeHD3Zone nella procedura guidata Crea.

    immagine

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

    immagine

Inserimento di un'immagine come livello di sfondo

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

È possibile regolare la regola CSS per utilizzare "data-uri" e allineare direttamente l'immagine (Base64 codificata) nel file CSS creato in (passaggio 13), static.css.

Questa disposizione viene eseguita come segue:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }

Oppure, puoi seguire i passaggi seguenti:

  1. Assicurati che l’immagine sia inclusa in qualche modo nella configurazione offline per il canale.
  2. Utilizza un collegamento diretto all’immagine nel CSS qui sopra, invece della variante "data-uri".