Sviluppo di un componente personalizzato per AEM Screens as a Cloud Service developing-a-custom-component-for-aem-screens

Feature Pack di Screens più recente

Lettore AEM Screens

Ambiente di sviluppo locale

In Gestione pacchetti CRX, verificare che siano installati i due pacchetti seguenti:

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

Screens We.Retail Esegui pacchetti Ui.Apps e Ui.Content installati tramite CRX Package Manager

Il pacchetto screens-weretail-run.ui.apps installa il codice sotto /apps/weretail-run.

Questo pacchetto contiene il codice responsabile del rendering dei componenti personalizzati per il progetto. Questo pacchetto include il codice del componente ed eventuali JavaScript o CSS necessari. Questo pacchetto incorpora anche screens-weretail-run.core-0.0.1-SNAPSHOT.jar che contiene il codice Java™ necessario per il progetto.

Rappresentazione del codice ui.apps in CRXDE Lite

Il componente helloworld è solo un segnaposto. Nel corso dell’esercitazione, viene aggiunta una funzionalità che consente all’autore di aggiornare il messaggio visualizzato dal componente.

Il pacchetto screens-weretail-run.ui.content installa il codice sotto:

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

Questo pacchetto contiene il contenuto iniziale e la struttura di configurazione necessaria per il progetto. /conf/we-retail-run contiene tutte le configurazioni per il progetto di esecuzione We.Retail. /content/dam/we-retail-run include l'avvio delle risorse digitali per il progetto. /content/screens/we-retail-run contiene la struttura del contenuto di Screens. Il contenuto sotto questi percorsi viene aggiornato principalmente in AEM. Per promuovere la coerenza tra gli ambienti (locale, di sviluppo, di staging, di produzione) spesso nel controllo del codice sorgente viene salvata una struttura di contenuto di base.

Passa al progetto AEM Screens > Esecuzione We.Retail:

Dal menu Start dell’AEM > fai clic sull’icona del Screens. Verifica che sia visibile il progetto di esecuzione We.Retail.

In CRXDE-Lite http://localhost:4502/crx/de/index.jsp (o IDE scelto), passa a /apps/weretail-run/components/content/helloworld.

Aggiungi le seguenti proprietà al componente helloworld:

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

Proprietà per /apps/weretail-run/components/content/helloworld

Il componente helloworld estende il componente foundation/components/parbase in modo che possa essere utilizzato correttamente in un canale di sequenza.

Crea un file sotto /apps/weretail-run/components/content/helloworld denominato helloworld.html.

Compila il file con quanto segue:

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (that is, on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, that is, edit, design, scaffolding, and so on. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

I componenti Screens richiedono due rendering diversi a seconda della modalità di authoring utilizzata:

1. Produzione: modalità Anteprima o Publish (wcmmode=disabled)
2. Modifica: utilizzato per tutte le altre modalità di creazione, ovvero modifica, progettazione, scaffolding, sviluppatore…

helloworld.htmlfunge da commutatore, controllando quale modalità di authoring è attiva e reindirizzando a un altro script HTL. Una convenzione comune utilizzata dai componenti Screens consiste nell'avere uno script edit.html per la modalità di modifica e uno script production.html per la modalità di produzione.

Crea un file sotto /apps/weretail-run/components/content/helloworld denominato production.html.

Compila il file con quanto segue:

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

Il markup di produzione riportato sopra si riferisce al componente Hello World. Poiché il componente viene utilizzato su un canale Sequenza, è incluso un attributo data-duration. L'attributo data-duration viene utilizzato dal canale della sequenza per sapere per quanto tempo deve essere visualizzato un elemento della sequenza.

Il componente esegue il rendering di un tag div e h1 con testo. ${properties.message} è una parte dello script HTL che restituisce il contenuto di una proprietà JCR denominata message. In seguito viene creata una finestra di dialogo che consente all'utente di immettere un valore per il testo della proprietà message.

Si noti inoltre che con il componente viene utilizzata la notazione BEM (Block Element Modifier). BEM è una convenzione di codifica CSS che semplifica la creazione di componenti riutilizzabili. BEM è la notazione utilizzata da Componenti core dell'AEM.

Crea un file sotto /apps/weretail-run/components/content/helloworld denominato edit.html.

Compila il file con quanto segue:

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

Il markup di modifica qui sopra si riferisce al componente Hello World. Nel primo blocco viene visualizzata una versione di modifica del componente, se il messaggio della finestra di dialogo è stato popolato.

Se non è stato immesso alcun messaggio di dialogo, viene eseguito il rendering del secondo blocco. cq-placeholder e data-emptytext eseguono il rendering dell'etichetta Hello World come segnaposto in questo caso. La stringa per l’etichetta può essere internazionalizzata utilizzando i18n per supportare l’authoring in più lingue.

Copia finestra di dialogo immagine Screens da utilizzare per il componente Hello World.

È più semplice iniziare da una finestra di dialogo esistente e quindi apportare modifiche.

1. Copia la finestra di dialogo da: /libs/screens/core/components/content/image/cq:dialog
2. Incolla la finestra di dialogo sotto /apps/weretail-run/components/content/helloworld

Aggiorna finestra di dialogo Hello World per includere una scheda per il messaggio.

Aggiorna la finestra di dialogo in modo che corrisponda a quanto segue. La struttura dei nodi JCR della finestra di dialogo finale è presentata di seguito 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="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <message
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (ms)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

textfield per il messaggio viene salvato in una proprietà denominata message e numberfield per la durata viene salvato in una proprietà denominata duration. In /apps/weretail-run/components/content/helloworld/production.html HTL fa riferimento a entrambe queste proprietà come ${properties.message} e ${properties.duration}.

Finestra di dialogo Hello World - completato

Crea una cartella per le librerie lato client per il componente Hello World.

Sotto /apps/weretail-run/components/content/helloworld, creare una cartella denominata clientlibs.

Nella cartella clientlibs creare un nodo denominato 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/helloworld/clientlibs/shared

La proprietà Categories è una stringa che identifica la libreria client. La categoria cq.screens.component viene utilizzata sia in modalità Modifica che Anteprima/Produzione. Di conseguenza, qualsiasi CSS/JS definito nella libreria client condivisa viene caricato in tutte le modalità.

È consigliabile non esporre mai percorsi direttamente a /apps in un ambiente di produzione. La proprietà allowProxy garantisce che venga fatto riferimento alla libreria client CSS e JS tramite un prefisso of/etc.clientlibs.

Crea il file denominato css.txt sotto la cartella condivisa.

Compila il file con quanto segue:

#base=css

styles.less

Creare una cartella denominata css sotto la cartella shared. Aggiungere un file denominato style.less sotto la cartella css. La struttura delle librerie client ora dovrebbe essere simile alla seguente:

Invece di scrivere direttamente CSS, questa esercitazione utilizza MENO. LESS è un popolare precompilatore CSS che supporta variabili, mixin e funzioni CSS. Le librerie client AEM supportano in modo nativo la compilazione LESS. È possibile utilizzare gli Sass o altri precompilatori, ma questi devono essere compilati al di fuori dell’AEM.

Popolare /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less con quanto segue:

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

Copiare e incollare la cartella della libreria client shared per creare una libreria client denominata production.

Copia la libreria client condivisa per creare una libreria client di produzione.

Aggiorna la proprietà categories della libreria client di produzione in modo che sia cq.screens.components.production.

In questo modo gli stili vengono caricati solo in modalità Anteprima/Produzione.

Proprietà per /apps/weretail-run/components/content/helloworld/clientlibs/production

Popolare /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less con quanto segue:

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

Gli stili di cui sopra visualizzano il messaggio centrato al centro dello schermo, ma solo in modalità di produzione.

In CRXDE Liti http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs, passa a /apps/settings/wcm/designs

Creare un nodo sotto la cartella delle progettazioni, denominato we-retail-run con un tipo di cq:Page.

Nella pagina we-retail-run aggiungere un altro nodo denominato jcr:content di tipo nt:unstructured. Aggiungi le seguenti proprietà al nodo jcr:content:

Pagina di progettazione in /apps/settings/wcm/designs/we-retail-run

Dal menu Start AEM, passa a Screens > We.Retail Ru n > e seleziona Canali.

Fai clic sul pulsante Crea

1. Scegli Crea entità

Nella procedura guidata Crea:

Passaggio modello - scegli Canale sequenza

1. Passaggio proprietà

• Scheda Base > Titolo = Canale Inattivo
• Scheda Canale > seleziona Rendi canale online

Apri le proprietà della pagina per il canale inattivo. Aggiornare il campo Struttura in modo che punti a /apps/settings/wcm/designs/we-retail-run, la pagina di progettazione creata nella sezione precedente.

Configurazione di progettazione che punta a /apps/settings/wcm/designs/we-retail-run

Modifica il canale inattivo creato per aprirlo.

Passa alla modalità pagina Progettazione.

1. Fai clic sull'icona chiave inglese in Parsys per configurare i componenti consentiti.

2. Selezionare il gruppo Screens e il gruppo Esecuzione We.Retail - Contenuto.

Passa alla modalità pagina Modifica. Il componente Hello World può ora essere aggiunto alla pagina e combinato con altri componenti del canale di sequenza.

In CRXDE Liti http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par, passa a /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. La proprietà components ora include group:Screens, group:We.Retail Run - Content.

Configurazione del progetto in /apps/settings/wcm/designs/we-retail-run