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

Nieuwste Screens-functiepakket

AEM Screens Player

Lokale ontwikkelomgeving

In ​ de Manager van het Pakket van CRX ​, verifieer dat de volgende twee pakketten geïnstalleerd zijn:

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 en Ui.Content pakketten geïnstalleerd via CRX Package Manager

Het 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 eventueel benodigde JavaScript of CSS. Dit pakket sluit ook schermen-weretail-run.core-0.0.1-SNAPSHOT.jar in die om het even welke code Java™ bevat nodig door het project.

Weergave van de code ui.apps in CRXDE Lite

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

Het 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 Web.Retail-project Run. /content/dam/we-retail-run bevat startende digitale elementen voor het project. /content/screens/we-retail-run bevat de Screens-inhoudsstructuur. 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 aan AEM Screens > Wij.Retail project van de Looppas:

Kies AEM Global Navigation > Click the Screens the icon. Verifieer het Web.Retail Project van de Looppas kan worden gezien.

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

Voeg de volgende eigenschappen toe aan de component helloworld :

    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 component uit zodat kan het behoorlijk binnen een opeenvolgingskanaal worden gebruikt.

Een bestand maken onder de naam /apps/weretail-run/components/content/helloworld 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" />

De componenten van Screens vereisen twee verschillende teruggaven afhankelijk van welke ​ auteurswijze ​ wordt gebruikt:

1. Productie: Voorproef of publiceer wijze (wcmmode=disabled)
2. geeft uit: gebruikt voor alle andere auteurswijzen, namelijk uitgeven, ontwerp, steigers, ontwikkelaar…

helloworld.html doet dienst als schakelaar, die welke auteurswijze actief is en aan een ander manuscript opnieuw richt HTML controleert. Schermcomponenten worden vaak gebruikt met een edit.html -script voor de bewerkingsmodus en een production.html -script voor de productiemodus.

Een bestand maken onder de naam /apps/weretail-run/components/content/helloworld 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. Een attribuut data-duration wordt opgenomen aangezien de component op een kanaal van de Opeenvolging wordt gebruikt. Het attribuut data-duration wordt gebruikt door het opeenvolgingskanaal om te weten hoe lang een opeenvolgingspunt moet worden getoond.

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

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 aantekening die door ​ wordt gebruikt de Componenten van de Kern van AEM ​.

Een bestand maken onder de naam /apps/weretail-run/components/content/helloworld 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. cq-placeholder en data-emptytext geven de etiket Wereld van Hello als plaatsaanduiding in dat geval terug. De tekenreeks voor het label kan met i18n worden geïnternationaliseerd ter ondersteuning van ontwerpen in meerdere landinstellingen.

de Dialoogvenster van het Beeld van Screens van het Exemplaar dat voor de component van de Wereld van Hello moet worden gebruikt.

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

Update de dialoog van de Wereld van Hello om een lusje voor bericht te omvatten.

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 waarde textfield voor het bericht wordt opgeslagen naar een eigenschap met de naam message en de waarde numberfield voor de duur wordt opgeslagen naar een eigenschap met de naam duration . In /apps/weretail-run/components/content/helloworld/production.html door HTML wordt naar deze twee eigenschappen verwezen als ${properties.message} en ${properties.duration} .

Hello World - dialoogvenster voltooid

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

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

Onder de map clientlibs maakt u een knooppunt met de naam shared of 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.

Maak een bestand met de naam css.txt onder de gedeelde map.

Vul het bestand met het volgende:

#base=css

styles.less

Maak een map met de naam css onder de map shared . Voeg een bestand met de naam style.less toe onder de map css . De structuur van de clientbibliotheken moet er nu als volgt uitzien:

In plaats van CSS rechtstreeks te schrijven, gebruikt deze zelfstudie LESS. ​ LESS ​ is populaire CSS pre-compiler die CSS variabelen, mixins, en functies steunt. AEM-clientbibliotheken bieden native ondersteuning voor LESS-compilatie. Sassa's of andere voorcompilers kunnen worden gebruikt, maar moeten buiten AEM worden samengesteld.

Vul /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 clientbibliotheekmap van shared om een clientbibliotheek met de naam production te maken.

Kopieer de gedeelde clientbibliotheek om een productieclientbibliotheek te maken.

Werk de eigenschap categories van de productiekatentbibliotheek bij als 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

Vul /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 aan /apps/settings/wcm/designs

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

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

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

Van de Globale Navigatie van AEM, navigeer aan Screens > Wij.Retail Ru n > en selecteer Kanalen.

Klik creëren knoop

1. Kies tot Entiteit leiden

In de wizard Maken:

De Stap van het malplaatje - kies Kanaal van de Reeks 0}

1. Eigenschappenstap

• Basis Lusje > Titel = Onactief Kanaal
• Het Lusje van het kanaal > controle maakt kanaal online

Open de pagina-eigenschappen voor het onactieve kanaal. Werk het gebied van het Ontwerp bij zodat richt het aan /apps/settings/wcm/designs/we-retail-run, de ontwerppagina die in de vorige sectie wordt gecreeerd.

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

Bewerk het gemaakte onactieve kanaal zodat u het kunt openen.

Schakelaar de paginamodus aan Wijze van het Ontwerp.

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

2. Selecteer de Screens groep en Wij.Retail looppas - de groep van de Inhoud.

Schakelaar de paginamodus aan geeft uit. 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 aan /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. De eigenschap components bevat nu group:Screens , group:We.Retail Run - Content .

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