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

AEM 6.5 plus det senaste Screens-funktionspaketet.

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 We.Retail Kör Ui.Apps- och Ui.Content-paket som installeras med 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 Hello World ä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 projektet We.Retail Run. /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 i alla 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 > We.Retail Kör projekt:

Klicka på ikonen Screens på AEM Start-meny. Verifiera att körningsprojektet We.Retail visas.

I CRXDE-Lite http://localhost:4502/crx/de/index.jsp (eller valfri IDE) navigerar 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 Hello World utökar komponenten grund, komponenter, parbase så att den kan användas i 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 (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<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, t.ex. 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>

Ovanstående är produktionsmarkeringen för Hello World-komponenten. Ett data-duration-attribut ingår eftersom komponenten används i en sekvenskanal. Attributet data-duration används av Sequence-kanalen 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>

Ovanstående är den redigerade koden för Hello World-komponenten. Det första blocket visar en redigerad version 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 presenteras 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 (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

Textfältet för meddelandet sparas i egenskapen message och nummerfältet 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 Edit- och Preview-Production-läge. Därför läses alla CSS- och JS-format som definieras i SharedClientlib in i alla lägen.

Som en god praxis bör sökvägar som är direkt till /apps i en produktionsmiljö aldrig exponeras. Egenskapen allowProxy ser till att klientbibliotekets CSS och JS refereras via prefixet /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 läget Förhandsvisa/producera.

Egenskaper för /apps/weretail-run/components/content/helloworld/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.RetailKör > och klicka på Kanaler på AEM Start-meny.

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 nya 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. Klicka på gruppen Screens och gruppen We.RetailKör - innehåll .

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

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