Utveckla en anpassad komponent för AEM Screens as a Cloud Service developing-a-custom-component-for-aem-screens

Senaste Screens Feature Pack

AEM Screens Player

Lokal utvecklingsmiljö

Kontrollera att följande två paket är installerade i CRX Package Manager:

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

Screens Web.Retail Run Ui.Apps och Ui.Innehållspaket som installeras via CRX Package Manager

Paketet screens-weretail-run.ui.apps installerar kod under /apps/weretail-run.

Det här paketet innehåller koden som ansvarar för att återge anpassade komponenter för projektet. Paketet innehåller komponentkod och eventuell JavaScript eller CSS som behövs. Det här paketet bäddar även in screens-weretail-run.core-0.0.1-SNAPSHOT.jar som innehåller all Java™-kod som krävs för projektet.

Representation av ui.apps-koden i CRXDE Lite

Komponenten helloworld är bara en platshållare. Under kursen har funktioner lagts till som gör att en författare kan uppdatera det meddelande som visas av komponenten.

Paketet screens-weretail-run.ui.content installerar kod under:

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

Det här paketet innehåller det startinnehåll och den konfigurationsstruktur som krävs för projektet. /conf/we-retail-run innehåller alla konfigurationer för Web.Retail Run-projektet. /content/dam/we-retail-run innehåller inledande digitala resurser för projektet. /content/screens/we-retail-run innehåller innehållsstrukturen för Screens. Innehållet under dessa sökvägar uppdateras huvudsakligen i AEM. För att främja enhetlighet mellan miljöer (lokal, utvecklare, scen, produktion) sparas ofta en grundinnehållsstruktur i källkontrollen.

Navigera till AEM Screens > Kör projekt.Detaljhandel:

På AEM Start-meny > klickar du på Screens-ikonen. Verifiera att det går att se Kör projekt för webb.butik.

I CRXDE-Lite http://localhost:4502/crx/de/index.jsp (eller valfri IDE) går du till /apps/weretail-run/components/content/helloworld.

Lägg till följande egenskaper i komponenten helloworld:

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

Egenskaper för /apps/weretail-run/components/content/helpWorld

Komponenten helloworld utökar komponenten foundation/components/parbase så att den kan användas korrekt inuti en sekvenskanal.

Skapa en fil under /apps/weretail-run/components/content/helloworld med namnet helloworld.html.

Fyll filen med följande:

<!--/*

 /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" />

Screens-komponenter kräver två olika återgivningar beroende på vilket redigeringsläge som används:

1. Produktion: Förhandsgranska eller Publish-läge (wcmmode=disabled)
2. Redigera: används för alla andra redigeringslägen, d.v.s. redigering, design, ställningar, utvecklare…

helloworld.htmlfungerar som en växel, kontrollerar vilket redigeringsläge som är aktivt och omdirigerar till ett annat HTML-skript. En vanlig konvention som används för skärmkomponenter är att ha ett edit.html-skript för redigeringsläget och ett production.html-skript för produktionsläget.

Skapa en fil under /apps/weretail-run/components/content/helloworld med namnet production.html.

Fyll filen med följande:

<!--/*
 /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>

Produktionskoden ovan gäller Hello World-komponenten. Ett data-duration-attribut ingår eftersom komponenten används i en sekvenskanal. Attributet data-duration används av sekvenskanalen för att ta reda på hur länge ett sekvensobjekt ska visas.

Komponenten återger en div- och en h1-tagg med text. ${properties.message} är en del av HTML-skriptet som matar ut innehållet i en JCR-egenskap med namnet message. En dialogruta skapas senare där användaren kan ange ett värde för egenskapstexten message.

Observera också att BEM-notation (Block Element Modifier) används med komponenten. BEM är en CSS-kodkonvention som gör det enklare att skapa återanvändbara komponenter. BEM är den syntax som används av AEM kärnkomponenter.

Skapa en fil under /apps/weretail-run/components/content/helloworld med namnet edit.html.

Fyll filen med följande:

<!--/*

 /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>

Redigeringsmarkeringen ovan gäller Hello World-komponenten. Det första blocket visar en redigeringsversion av komponenten om dialogmeddelandet har fyllts i.

Det andra blocket återges om inget dialogrutemeddelande har angetts. cq-placeholder och data-emptytext återger etiketten Hello World som platshållare i så fall. Strängen för etiketten kan internationaliseras med i18n som stöd för redigering på flera språk.

Kopiera Screens Image Dialog som ska användas för Hello World-komponenten.

Det är enklast att börja från en befintlig dialogruta och sedan göra ändringar.

1. Kopiera dialogrutan från: /libs/screens/core/components/content/image/cq:dialog
2. Klistra in dialogrutan under /apps/weretail-run/components/content/helloworld

Uppdatera dialogrutan Hello World så att den innehåller en flik för meddelandet.

Uppdatera dialogrutan så att den matchar följande. JCR-nodstrukturen i den slutliga dialogrutan visas nedan i 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 för meddelandet sparas i egenskapen message och numberfield för Varaktighet sparas i egenskapen duration. Dessa två egenskaper refereras båda i /apps/weretail-run/components/content/helloworld/production.html av HTML som ${properties.message} och ${properties.duration}.

Hello World - slutförd dialogruta

Skapa en mapp för klientbibliotek för Hello World-komponenten.

Skapa en mapp med namnet clientlibs under /apps/weretail-run/components/content/helloworld.

Skapa en nod med namnet shared av typen cq:ClientLibraryFolder. under mappen clientlibs

Lägg till följande egenskaper i det delade klientbiblioteket:

• allowProxy | Boolean | true

• categories| Sträng [] | cq.screens.components

Egenskaper för /apps/weretail-run/components/content/helpWorld/clientlibs/shared

Egenskapen categories är en sträng som identifierar klientbiblioteket. Kategorin cq.screens.component används i både redigeringsläget och läget Förhandsgranska/produktion. Därför läses alla CSS/JS som definierats i SharedClientlib in i alla lägen.

Det är en god vana att aldrig visa några sökvägar direkt för /apps i en produktionsmiljö. Egenskapen allowProxy ser till att klientbibliotekets CSS och JS refereras via prefixet of/etc.clientlibs.

Skapa filen css.txt under den delade mappen.

Fyll filen med följande:

#base=css

styles.less

Skapa en mapp med namnet css under mappen shared. Lägg till filen style.less under mappen css. Klientbibliotekens struktur bör nu se ut så här:

I stället för att skriva CSS direkt använder den här självstudien LESS. LESS är en populär CSS-förkompilator som stöder CSS-variabler, mixins och funktioner. AEM klientbibliotek stöder LESS-kompilering. Sass eller andra förkompilatorer kan användas men måste kompileras utanför AEM.

Fyll i /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less med följande:

/**
    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;
 }
}

Kopiera och klistra in klientbiblioteksmappen shared för att skapa ett klientbibliotek med namnet production.

Kopiera det delade klientbiblioteket för att skapa ett produktionsklientbibliotek.

Uppdatera egenskapen categories för produktionsklientbiblioteket till cq.screens.components.production.

Om du gör det ser du till att formaten bara läses in i förhandsvisnings-/produktionsläge.

Egenskaper för /apps/weretail-run/components/content/help/world/clientlibs/production

Fyll i /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less med följande:

/**
    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%;
 }
}

Ovanstående format visar meddelandet centrerat mitt på skärmen, men endast i produktionsläge.

Navigera till /apps/settings/wcm/designs i CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs

Skapa en nod under designmappen med namnet we-retail-run och typen cq:Page.

Under sidan we-retail-run lägger du till en annan nod med namnet jcr:content av typen nt:unstructured. Lägg till följande egenskaper i noden jcr:content:

Designsida på /apps/settings/wcm/designs/we-retail-run

Gå till Screens > We.Retail Ru n > från AEM Start-meny och välj Channel.

Klicka på knappen Skapa

1. Välj Skapa entitet

I guiden Skapa:

Mallsteg - välj Sekvenskanal

1. Egenskapssteg

• Fliken Grundläggande > Titel = Inaktiv kanal
• Fliken Kanal > kontrollera Gör kanalen online

Öppna sidegenskaperna för inaktivitetskanalen. Uppdatera designfältet så att det pekar på /apps/settings/wcm/designs/we-retail-run,designsidan som skapades i föregående avsnitt.

Designkonfiguration som pekar på /apps/settings/wcm/designs/we-retail-run

Redigera den skapade inaktivitetskanalen så att du kan öppna den.

Växla sidläge till designläge.

1. Klicka på ikonen wrench i Parsys så att du kan konfigurera de tillåtna komponenterna.

2. Markera gruppen Screens och gruppen We.Retail Run - Content.

Växla sidläge till Redigera. Komponenten Hello World kan nu läggas till på sidan och kombineras med andra sekvenskanalkomponenter.

Navigera till /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par i CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par. Observera att egenskapen components nu innehåller group:Screens, group:We.Retail Run - Content.

Designkonfiguration under /apps/settings/wcm/designs/we-retail-run