L’esercitazione seguente illustra i passaggi e le best practice per l’estensione dei componenti predefiniti di AEM Screens. Il componente Immagine viene esteso per aggiungere una sovrapposizione di testo modificabile.
Questa esercitazione è destinata agli sviluppatori che hanno poca esperienza con AEM Screens. In questa esercitazione, il componente Immagine Screens viene esteso per creare un componente Poster. Titolo, descrizione e logo vengono sovrapposti su un’immagine per creare un’esperienza coinvolgente in un Canale per sequenza.
Prima di avviare questa esercitazione, è consigliabile completare l'esercitazione: Sviluppo di un componente personalizzato per AEM Screens.
Il componente Poster personalizzato viene creato estendendo il componente Immagine .
Per completare questa esercitazione, è necessario quanto segue:
I passaggi del tutorial e le schermate vengono eseguiti utilizzando CRXDE-Lite. Eclipse o IntelliJ Gli IDE possono anche essere utilizzati per completare l’esercitazione. Ulteriori informazioni sull’utilizzo di un IDE per sviluppare con AEM si trova qui.
Il codice sorgente di un progetto Screens viene generalmente gestito come progetto Maven con più moduli. Per accelerare l’esercitazione, è stato pregenerato un progetto utilizzando Archetipo di progetto AEM 13. Maggiori dettagli su la creazione di un progetto con Maven AEM Project Archetype si trova qui.
http://localhost:4502/crx/packmgr/index.jsp)r:
Ottieni file
Facoltativamente, se lavori con Eclipse o un altro IDE, scarica il pacchetto sorgente seguente. Distribuisci il progetto in un’istanza AEM locale utilizzando il comando Maven:
mvn -PautoInstallPackage clean install
Progetto di esecuzione We.Retail di SRC Start Screens
In Gestione pacchetti CRX http://localhost:4502/crx/packmgr/index.jsp
sono installati i due pacchetti seguenti:
Schermi I.Retail Esegui pacchetti Ui.Apps e Ui.Content installati tramite CRX Package Manager
Il componente Poster estende il componente Immagine della schermata predefinita. Meccanismo di Sling, sling:resourceSuperType
, viene utilizzato per ereditare le funzionalità di base del componente Immagine senza dover copiare e incollare. Ulteriori informazioni sulle nozioni di base di Sling Request Processing si trova qui.
Il componente Poster viene riprodotto a schermo intero in modalità anteprima/produzione. In modalità di modifica, è importante eseguire il rendering del componente in modo diverso per facilitare l’authoring del canale per sequenza.
In CRXDE-Lite http://localhost:4502/crx/de/index.jsp
(o IDE di scelta) sotto a /apps/weretail-run/components/content
creare un cq:Component
denominato poster
.
Aggiungi le seguenti proprietà al poster
componente:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Component"
jcr:title="Poster"
sling:resourceSuperType="screens/core/components/content/image"
componentGroup="We.Retail Run - Content"/>
Proprietà per /apps/weretail-run/components/content/poster
Impostando sling:resourceSuperType
proprietà uguale a screens/core/components/content/image
il componente Poster eredita efficacemente tutte le funzionalità del componente Immagine . Nodi e file equivalenti trovati sotto screens/core/components/content/image
può essere aggiunto sotto la poster
per sovrascrivere ed estendere la funzionalità .
Copia il cq:editConfig
nodo sotto /libs/screens/core/components/content/image.
Incolla cq:editConfig
sotto il /apps/weretail-run/components/content/poster
componente.
Sulla cq:editConfig/cq:dropTargets/image/parameters
aggiorna il nodo sling:resourceType
proprietà uguale weretail-run/components/content/poster
.
La rappresentazione XML della cq:editConfig rappresentata di seguito:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:EditConfig">
<cq:dropTargets jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="cq:DropTargetConfig"
accept="[image/.*]"
groups="[media]"
propertyName="./fileReference">
<parameters
jcr:primaryType="nt:unstructured"
sling:resourceType="weretail-run/components/content/poster"
imageCrop=""
imageMap=""
imageRotate=""/>
</image>
</cq:dropTargets>
</jcr:root>
Copia di WCM Foundation image
della finestra di dialogo poster
componente.
È più semplice iniziare da una finestra di dialogo esistente e quindi apportare modifiche.
/libs/wcm/foundation/components/image/cq:dialog
/apps/weretail-run/components/content/poster
Finestra di dialogo copiata da /libs/wcm/foundation/components/image/cq:dialog a /apps/weretail-run/components/content/poster
Schermi image
il componente è sostituito da WCM Foundation image
componente. Pertanto, poster
il componente eredita funzionalità da entrambi. La finestra di dialogo per il componente poster è composta da una combinazione delle finestre di dialogo Screens e Foundation. Funzioni del Sling Resource Merger vengono utilizzati per nascondere i campi e le schede di dialogo non rilevanti ereditati dai componenti superati.
Aggiorna cq:dialog sotto /apps/weretail-run/components/content/poster
con le seguenti modifiche rappresentate in XML:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Poster"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/tabs"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
jcr:title="Elements"
sling:resourceType="granite/ui/components/foundation/section">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items
jcr:primaryType="nt:unstructured"
sling:hideChildren="[linkURL,size]">
<file
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
autoStart="{Boolean}false"
class="cq-droptarget"
fieldLabel="Image asset"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image]"
multiple="{Boolean}false"
name="./file"
title="Upload Image Asset"
uploadUrl="${suffix.path}"
useHTML5="{Boolean}true"/>
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Title"
name="./jcr:title"/>
<description
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textarea"
fieldLabel="Description"
name="./jcr:description"/>
<position
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Text Position"
name="./textPosition">
<items jcr:primaryType="nt:unstructured">
<left
jcr:primaryType="nt:unstructured"
text="Left"
value="left"/>
<center
jcr:primaryType="nt:unstructured"
text="Center"
value="center"/>
<right
jcr:primaryType="nt:unstructured"
text="Right"
value="right"/>
</items>
</position>
<color
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Text Color"
name="./textColor">
<items jcr:primaryType="nt:unstructured">
<light
jcr:primaryType="nt:unstructured"
text="Light"
value="light"/>
<dark
jcr:primaryType="nt:unstructured"
text="Dark"
value="dark"/>
</items>
</color>
</items>
</column>
</items>
</image>
<accessibility
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
</items>
</content>
</jcr:root>
La proprietà sling:hideChildren
= "[linkURL,size]
" viene utilizzato nella items
per garantire che linkURL e size i campi sono nascosti dalla finestra di dialogo. La rimozione di questi nodi dalla finestra di dialogo poster non è sufficiente. La proprietà sling:hideResource="{Boolean}true"
nella scheda accessibilità viene utilizzata per nascondere l’intera scheda .
Nella finestra di dialogo vengono aggiunti due campi di selezione per consentire agli autori di controllare la posizione del testo e il colore del titolo e della descrizione.
Poster - Struttura della finestra di dialogo finale
A questo punto, un'istanza del poster
può essere aggiunto al Canale inattivo nel progetto di esecuzione We.Retail: http://localhost:4502/editor.html/content/screens/we-retail-run/channels/idle-channel.edit.html
.
Campi della finestra di dialogo miniatura
Crea un file sotto /apps/weretail-run/components/content/poster
denominato production.html.
Compila il file con le seguenti caratteristiche:
<!--/*
/apps/weretail-run/components/content/poster/production.html
*/-->
<div data-sly-use.image="image.js"
data-duration="${properties.duration}"
class="cmp-poster"
style="background-image: url(${request.contextPath @ context='uri'}${image.src @ context='uri'});">
<div class="cmp-poster__text
cmp-poster__text--${properties.textPosition @ context='attribute'}
cmp-poster__text--${properties.textColor @ context='attribute'}">
<h1 class="cmp-poster__title">${properties.jcr:title}</h1>
<h2 class="cmp-poster__description">${properties.jcr:description}</h2>
</div>
<img class="cmp-poster__logo" src="/content/dam/we-retail-run/logos/we-retail-run_dark.png" alt="we-retail-logo" />
</div>
Sopra è riportato il markup di produzione per il componente Poster. Ignorare lo script HTL screens/core/components/content/image/production.html
. La image.js
è uno script lato server che crea un oggetto immagine simile a POJO. L’oggetto Immagine può quindi essere chiamato per eseguire il rendering del src
come immagine di sfondo in linea.
The h1
e i tag h2 aggiunti visualizzano Titolo e Descrizione in base alle proprietà del componente: ${properties.jcr:title}
e ${properties.jcr:description}
.
Circondato h1
e h2
tags è un wrapper div con tre classi CSS con varianti di " cmp-poster__text
". Il valore per textPosition
e textColor
Le proprietà vengono utilizzate per modificare la classe CSS di cui è stato eseguito il rendering in base alla selezione della finestra di dialogo dell'autore. Nella sezione successiva vengono scritti CSS dalle librerie client per abilitare queste modifiche nella visualizzazione.
Nel componente è incluso anche un logo come sovrapposizione. In questo esempio, il percorso del logo We.Retail è codificato in modo rigido nel DAM. A seconda del caso d’uso, potrebbe essere più sensato creare un campo di dialogo per rendere il percorso del logo un valore popolato in modo dinamico.
Inoltre, con il componente viene utilizzata la notazione BEM (modificatore elemento di blocco). BEM è una convenzione di codifica CSS che facilita la creazione di componenti riutilizzabili. BEM è la notazione utilizzata da Componenti core AEM.
Crea un file sotto /apps/weretail-run/components/content/poster
denominato edit.html.
Compila il file con le seguenti caratteristiche:
<!--/*
/apps/weretail-run/components/content/poster/edit.html
*/-->
<div class="aem-Screens-editWrapper ${image.cssClass} cmp-poster" data-sly-use.image="image.js" data-emptytext="${'Poster' @ i18n, locale=request.locale}">
<img class="cmp-poster__image" src="${request.contextPath}${image.src @ context='uri'}" width="100%" />
<div class="cmp-poster__text
cmp-poster__text--${properties.textPosition @ context='attribute'}
cmp-poster__text--${properties.textColor @ context='attribute'}">
<p class="cmp-poster__title">${properties.jcr:title}</p>
<p class="cmp-poster__description">${properties.jcr:description}</p>
</div>
</div>
Sopra è modifica Marcatura per il componente Poster. Ignorare lo script HTL /libs/screens/core/components/content/image/edit.html
. Il markup è simile al production.html
visualizza il titolo e la descrizione sopra l’immagine.
La aem-Screens-editWrapper
viene aggiunto in modo che nell’editor non venga eseguito il rendering del componente a schermo intero. La data-emptytext
assicura che venga visualizzato un segnaposto quando non è stata compilata alcuna immagine o contenuto.
Le librerie lato client forniscono un meccanismo per organizzare e gestire i file CSS e JavaScript necessari per un’implementazione AEM. Ulteriori informazioni sull'utilizzo Le librerie lato client si trovano qui.
I componenti di AEM Screens vengono riprodotti in modo diverso in modalità Modifica rispetto alla modalità Anteprima/Produzione. Vengono creati due set di librerie client, uno per la modalità Modifica e uno per l’anteprima/produzione.
Crea una cartella per le librerie lato client per il componente Poster.
Sotto /apps/weretail-run/components/content/poster,
creare una cartella denominata clientlibs
.
Sotto clientlibs
creare una cartella denominata shared
di tipo cq:ClientLibraryFolder.
Aggiungi le seguenti proprietà alla libreria client condivisa:
allowProxy
| Booleano | true
categories
| Stringa[] | cq.screens.components
Proprietà per /apps/weretail-run/components/content/poster/clientlibs/shared
La categories
è una stringa che identifica la libreria client. La cq.screens.components
Questa categoria viene utilizzata sia in modalità Modifica che in modalità Anteprima/Produzione. Pertanto, qualsiasi CSS/JS definito nel shared
clientlib viene caricato in tutte le modalità.
È consigliabile non esporre mai alcun percorso direttamente a /apps in un ambiente di produzione. La allowProxy
assicura che la libreria client faccia riferimento a CSS e JS tramite un prefisso /etc.clientlibs
. Ulteriori informazioni sulle La proprietà allowProxy si trova qui.
Crea file con nome css.txt
sotto la cartella condivisa.
Compila il file con le seguenti caratteristiche:
#base=css
styles.less
Crea una cartella denominata css
sotto il shared
cartella. Aggiungi un file denominato style.less
sotto il css
cartella. La struttura delle librerie client dovrebbe ora essere simile alla seguente:
Invece di scrivere CSS direttamente, questa esercitazione utilizza LESS. MENO è un precompilatore CSS popolare che supporta variabili CSS, mixin e funzioni. AEM librerie client supportano in modo nativo la compilazione LESS. Sass o altri precompilatori possono essere utilizzati ma devono essere compilati al di fuori di AEM.
Popolare /apps/weretail-run/components/content/poster/clientlibs/shared/css/styles.less
con le seguenti caratteristiche:
/*
/apps/weretail-run/components/content/poster/clientlibs/shared/css/styles.less
Poster Component - Shared Style
*/
@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans:400i');
@text-light-color: #fff;
@text-dark-color: #000;
@title-font-family: 'Fjalla One', sans-serif;
@description-font-family: 'Open Sans', sans-serif;
.cmp-poster {
&__text {
position: absolute;
color: @text-light-color;
top: 0;
text-align:center;
width: 100%;
&--left {
text-align: left;
margin-left: 1em;
}
&--right {
text-align: right;
margin-right: 1em;
}
&--dark {
color: @text-dark-color;
}
}
&__title {
font-weight: bold;
font-family: @title-font-family;
font-size: 1.2em;
}
&__description {
font-style: italic;
font-family: @description-font-family;
}
}
I Web Fonts Google vengono utilizzati per le famiglie di font. I Web Fonts richiedono la connettività Internet e non tutte le implementazioni di schermi offrono una connessione affidabile. La pianificazione della modalità offline è un aspetto importante per le distribuzioni di Screens.
Copia il shared
cartella della libreria client. Incollalo come elemento di pari livello e rinominalo in production
.
Aggiorna categories
proprietà della libreria client di produzione da cq.screens.components.production.
La cq.screens.components.production
Questa categoria assicura che gli stili vengano caricati solo in modalità Anteprima/Produzione.
Proprietà per /apps/weretail-run/components/content/poster/clientlibs/production
Popolare /apps/weretail-run/components/content/poster/clientlibs/production/css/styles.less
con le seguenti caratteristiche:
/*
/apps/weretail-run/components/content/poster/clientlibs/production/css/styles.less
Poster Component - Production Style
*/
.cmp-poster {
background-size: cover;
height: 100%;
width: 100%;
position:absolute;
&__text {
top: 2em;
&--left {
width: 40%;
top: 5em;
}
&--right {
width: 40%;
right: 1em;
}
}
&__title {
font-size: 5rem;
font-weight: 900;
margin: 0.1rem;
}
&__description {
font-size: 2rem;
margin: 0.1rem;
font-weight: 400;
}
&__logo {
position: absolute;
max-width: 200px;
top: 1em;
left: 0;
}
}
Gli stili di cui sopra presentano il Titolo e la Descrizione in posizione assoluta sullo schermo. Il titolo viene visualizzato più grande della descrizione. La notazione BEM del componente semplifica l'ambito degli stili all'interno della classe cmp-poster.
Una terza categoria di clientlibrary: cq.screens.components.edit
può essere utilizzato per aggiungere al componente Modifica solo stili specifici.
Categoria clientlib | Utilizzo |
---|---|
cq.screens.components |
Stili e script condivisi tra le modalità di modifica e di produzione |
cq.screens.components.edit |
Stili e script utilizzati solo in modalità di modifica |
cq.screens.components.production |
Stili e script utilizzati solo in modalità di produzione |
Il componente Poster viene utilizzato su un canale per sequenza. Il pacchetto iniziale per questa esercitazione includeva un canale inattivo. Il canale inattivo è preconfigurato per consentire i componenti del gruppo Esecuzione We.Retail - Contenuto. Il gruppo del componente Poster è impostato su We.Retail Run - Content
ed è disponibile per essere aggiunto al canale.
Apri il Canale inattivo dal progetto We.Retail Run: http://localhost:4502/editor.html/content/screens/we-retail-run/channels/idle-channel.edit.html
Trascina + rilascia una nuova istanza del Miniatura dalla barra laterale alla pagina.
Modifica la finestra di dialogo del componente Poster per aggiungere un’immagine, un titolo, una descrizione. Utilizza le scelte Posizione testo e Colore testo per garantire che il Titolo/Descrizione sia leggibile sull’immagine.
Ripeti i passaggi precedenti per aggiungere alcuni componenti Poster. Aggiungi transizioni tra i componenti.
Il video seguente mostra il componente finito e come può essere aggiunto a un canale Sequenza. Il canale viene quindi aggiunto a una visualizzazione Posizione e infine assegnato a un lettore Screens.
Di seguito è riportato il codice finito dell'esercitazione. La screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip e screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip sono i pacchetti compilati AEM. Il SRC-screens-weretail-run-0.0.1.zip è il codice sorgente non compilato che può essere distribuito utilizzando Maven.
Progetto di esecuzione We.Retail di SRC Screens finali