In questa pagina viene illustrato come creare un modello personalizzato per un layout con più aree.
Prima di creare un modello personalizzato in un layout con più aree è importante tenere presenti due considerazioni importanti:
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.
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.
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 |
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.
Seguite la sezione seguente per creare un modello personalizzato Left20-LandscapeHD3Zone con la seguente configurazione:
Il layout Left20-LandscapeHD3Zone consente di creare nel progetto il seguente layout a più zone:
Per creare un layout Left20-LandscapeHD3Zone per un progetto AEM Screens , effettuate le seguenti operazioni:
Create un progetto AEM Screens denominato custom template.
Andate a CRXDE Lite dall'istanza AEM —> Strumenti —> CRXDE Lite.
Create una cartella in apps con titolo customtemplate. Analogamente, create un'altra cartella denominata template in customtemplate, come illustrato nella figura riportata di seguito.
È 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.
Copiate il modello a sinistra da /libs/screens/core/templates/splitscreenchannel/lbar-left
a /apps/customtemplate/template
.
Rinominare il lbar-left (/apps/customtemplate/template
) copiato in my-custom-layout.
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.
Andate al nodo offline-config da /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config
e aggiornate jcr:title a Left20-LandscapeHD3Zone.
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.
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.
Queste classi personalizzate verranno utilizzate nel css per impostare larghezza/altezza per queste griglie reattive.
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).
Copiate /libs/settings/wcm/designs/screens
in /apps/settings/wcm/designs/
e rinominate la progettazione copiata come custom-template-designs.
Andate a /apps/settings/wcm/designs/custom-template-designs
e aggiornate la proprietà jcr:title di custom-template-designs su customtemplate-design.
Passare a /apps/settings/wcm/designs/custom-template-designs
e creare un file static.css.
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%;
}
Potete aggiornare le percentuali in modo che corrispondano ai requisiti per il modello personalizzato.
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
Si consiglia di digitare tutti gli stili invece di copiare o incollare, il che può causare problemi di stile CSS causati da spazi bianchi.
Per usare il modello personalizzato sopra riportato nel progetto AEM Screens , effettuate le seguenti operazioni:
Andate al progetto Screens che avete creato nel passaggio (1) e selezionate la cartella Channels.
Fare clic su Crea nella barra delle azioni e selezionare il modello Left20-LandscapeHD3Zone dalla procedura guidata Crea.
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.
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:
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: …; }