Een aangepaste component voor AEM Screens as a Cloud Service ontwikkelen developing-a-custom-component-for-aem-screens

Nieuwste schermoptiepakket

AEM Screens Player

Lokale ontwikkelomgeving

In CRX Package Managercontroleert u of de volgende twee pakketten zijn geïnstalleerd:

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

Schermen die wij.Retail Run UI.Apps en Ui.Content pakketten installeren via CRX Package Manager

De screens-weretail-run.ui.apps pakket installeert code onder /apps/weretail-run.

Dit pakket bevat de code die verantwoordelijk is voor het renderen van aangepaste componenten voor het project. Dit pakket bevat componentcode en eventuele benodigde JavaScript- of CSS-code. Dit pakket sluit ook in screens-weretail-run.core-0.0.1-SNAPSHOT.jar die Java™-code bevat die nodig is voor het project.

Weergave van de code ui.apps in CRXDE Lite

De helloworld is slechts een plaatsaanduiding. Tijdens de zelfstudie wordt functionaliteit toegevoegd waarmee een auteur het bericht kan bijwerken dat door de component wordt weergegeven.

De screens-weretail-run.ui.content pakket installeert code onder:

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

Dit pakket bevat de eerste inhoud en configuratiestructuur die nodig zijn voor het project. /conf/we-retail-run Bevat alle configuraties voor het project van de Looppas Wij.Retail. /content/dam/we-retail-run omvat het starten van digitale elementen voor het project. /content/screens/we-retail-run bevat de structuur van de inhoud van het Scherm. De inhoud onder deze paden wordt voornamelijk in AEM bijgewerkt. Om de consistentie tussen omgevingen (lokaal, Ontwikkelen, Stage, Prod) te bevorderen, wordt vaak een basisinhoudsstructuur opgeslagen in bronbeheer.

Navigeer naar het AEM Screens > We.Retail Run-project:

Klik in het menu AEM Start > op het pictogram Schermen. Verifieer het Web.Retail Project van de Looppas kan worden gezien.

In CRXDE-Lite http://localhost:4502/crx/de/index.jsp (of IDE van keus), navigeer aan /apps/weretail-run/components/content/helloworld.

Voeg de volgende eigenschappen toe aan de helloworld component:

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

Eigenschappen voor /apps/weretail-run/components/content/helloworld

De helloworld component breidt de stichting/componenten/parbase zodat deze op de juiste manier binnen een volgnummer kan worden gebruikt.

Een bestand maken onder /apps/weretail-run/components/content/helloworld benoemd helloworld.html.

Vul het bestand met het volgende:

<!--/*

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

Schermcomponenten vereisen twee verschillende weergaven afhankelijk van welke ontwerpmodus wordt gebruikt:

1. Productie: Modus Voorvertoning of Publiceren (wcmmode=disabled)
2. Bewerken: wordt gebruikt voor alle andere ontwerpmodi, dat wil zeggen, bewerken, ontwerpen, basisstructuur, ontwikkelaar…

helloworld.htmlhandelt als schakelaar, die welke auteurswijze controleert en aan een ander manuscript van HTML opnieuw richt. Een algemene regel die door rasteronderdelen wordt gebruikt, is het hebben van een edit.html script voor de bewerkingsmodus en een production.html script voor de productiemodus.

Een bestand maken onder /apps/weretail-run/components/content/helloworld benoemd production.html.

Vul het bestand met het volgende:

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

De productiemarkering hierboven is voor de Component van de Wereld van Hello. A data-duration wordt opgenomen aangezien de component op een kanaal van de Opeenvolging wordt gebruikt. De data-duration wordt gebruikt door het opeenvolgingskanaal om te weten hoe lang een opeenvolgingspunt moet worden getoond.

De component rendert een div en h1 -tag met tekst. ${properties.message} is een deel van het manuscript van HTML dat de inhoud van een bezit JCR genoemd uitvoert message. Later wordt een dialoogvenster gemaakt waarin een gebruiker een waarde voor het dialoogvenster message eigenschapstekst.

Merk ook op dat BEM-notatie (Block Element Modifier) wordt gebruikt met de component. BEM is een CSS-coderingsconventie die het gemakkelijker maakt om herbruikbare componenten te maken. BEM is de notatie die wordt gebruikt door AEM kerncomponenten.

Een bestand maken onder /apps/weretail-run/components/content/helloworld benoemd edit.html.

Vul het bestand met het volgende:

<!--/*

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

De bovenstaande bewerkingsmarkering is voor de Hello World-component. In het eerste blok wordt een bewerkingsversie van de component weergegeven als het dialoogvenster is gevuld.

Het tweede blok wordt teruggegeven als geen dialoogdoos is ingegaan. De cq-placeholder en data-emptytext het label renderen Hallo wereld als plaatsaanduiding in dat geval. De tekenreeks voor het label kan met i18n worden geïnternationaliseerd ter ondersteuning van ontwerpen in meerdere landinstellingen.

Het dialoogvenster Schermafbeelding kopiëren dat moet worden gebruikt voor de component Hello World.

Het is het gemakkelijkst om van een bestaande dialoog te beginnen en dan wijzigingen te maken.

1. Het dialoogvenster kopiëren van: /libs/screens/core/components/content/image/cq:dialog
2. Het dialoogvenster onder plakken /apps/weretail-run/components/content/helloworld

Werk het dialoogvenster Hello World bij en voeg een tabblad voor het bericht toe.

Werk het dialoogvenster bij, zodat dit overeenkomt met het volgende. De JCR-knooppuntstructuur van het laatste dialoogvenster wordt hieronder weergegeven 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>

De textfield for the Message is saved to a property named message en dat de numberfield for the Duration is saved to a property named duration. Naar deze twee eigenschappen wordt in /apps/weretail-run/components/content/helloworld/production.html door HTL als ${properties.message} en ${properties.duration}.

Hello World - dialoogvenster voltooid

Maak een map voor client-side bibliotheken voor de component Hello World.

Beneath /apps/weretail-run/components/content/helloworld, maakt u een map met de naam clientlibs.

Onder de clientlibs map, een knooppunt maken met de naam shared van het type cq:ClientLibraryFolder.

Voeg de volgende eigenschappen toe aan de gedeelde clientbibliotheek:

• allowProxy | Boolean | true

• categories| String[] | cq.screens.components

Eigenschappen voor /apps/weretail-run/components/content/helloworld/clientlibs/shared

De eigenschap category is een tekenreeks die de clientbibliotheek identificeert. De categorie cq.screens.component wordt gebruikt in zowel de modus Bewerken als de modus Voorbeeld/productie. Daarom wordt elke CSS/JS die in de sharedclientLib is gedefinieerd, in alle modi geladen.

Het is aan te raden geen paden in een productieomgeving rechtstreeks toegankelijk te maken voor /apps. De eigenschap allowProxy zorgt ervoor dat naar de CSS- en JS-client-bibliotheek wordt verwezen door middel van het voorvoegsel of/etc.clientlibs.

Bestandsnaam maken css.txt onder de gedeelde map.

Vul het bestand met het volgende:

#base=css

styles.less

Een map maken met de naam css onder de shared map. Een bestand met de naam toevoegen style.less onder de css map. De structuur van de clientbibliotheken moet er nu als volgt uitzien:

In plaats van CSS rechtstreeks te schrijven, gebruikt deze zelfstudie LESS. MINDER is een populaire CSS-voorcompiler die CSS-variabelen, -mixins en -functies ondersteunt. AEM clientbibliotheken ondersteunen native LESS-compilatie. De klasse of andere pre-compilers kunnen worden gebruikt maar moeten buiten AEM worden gecompileerd.

Vullen /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less met het volgende:

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

Kopieer en plak de shared clientbibliotheekmap om een clientbibliotheek te maken met de naam production.

Kopieer de gedeelde clientbibliotheek om een productieclientbibliotheek te maken.

Werk de categories bezit van de te produceren clientbibliotheek cq.screens.components.production.

Zo zorgt u ervoor dat de stijlen alleen worden geladen in de modus Voorbeeld/productie.

Eigenschappen voor /apps/weretail-run/components/content/helloworld/clientlibs/production

Vullen /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less met het volgende:

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

Bij de bovenstaande stijlen wordt het bericht gecentreerd weergegeven in het midden van het scherm, maar alleen in de productiemodus.

In CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs, navigeer naar /apps/settings/wcm/designs

Maak een knooppunt onder de map designs met de naam we-retail-run met een type cq:Page.

Onder de we-retail-run pagina, een ander knooppunt toevoegen met de naam jcr:content van het type nt:unstructured. Voeg de volgende eigenschappen toe aan de jcr:content knooppunt:

Ontwerppagina op /apps/settings/wcm/designs/we-Retail-run

Navigeer in het menu AEM Start naar Schermen > We.Retail Ru n > en selecteer Kanalen.

Klik op de knop Maken knop

1. Kies Entiteit maken

In de wizard Maken:

Sjabloonstap - kies Volgekanaal

1. Eigenschappenstap

• Basistabblad > Titel = Niet-actief kanaal
• Tabblad Kanaal > Controleren Kanaal online maken

Open de pagina-eigenschappen voor het onactieve kanaal. Het ontwerpveld bijwerken zodat het naar /apps/settings/wcm/designs/we-retail-run,de ontwerppagina die in de vorige sectie is gemaakt.

Ontwerpconfiguratie die wijst naar /apps/settings/wcm/designs/we-retail-run

Bewerk het gemaakte onactieve kanaal zodat u het kunt openen.

De paginamodus wijzigen in Ontwerp Modus.

1. Klik op de knop moersleutel Pictogram in Parsys zodat kunt u de toegestane componenten vormen.

2. Selecteer de Schermen en de We.Retail Run - Inhoud groep.

De paginamodus wijzigen in Bewerken. De component Hello World kan nu aan de pagina worden toegevoegd en met andere componenten van het opeenvolgingskanaal worden gecombineerd.

In CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par, navigeer naar /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. Let op: components eigenschap bevat nu group:Screens, group:We.Retail Run - Content.

Ontwerpconfiguratie onder /apps/settings/wcm/designs/we-retail-run