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

AEM 6.5plus het Meest recente Pak van de Eigenschap van Screens.

Speler van AEM Screens

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 We.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™ nodig door het project bevat.

Weergave van de code ui.apps in CRXDE Lite

De World van Hello component is enkel placeholder. 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 We.Retail -project uitvoeren. /content/dam/we-retail-run bevat startende digitale elementen voor het project. /content/screens/we-retail-run bevat de Screens-inhoudsstructuur. De inhoud van al 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 > We.Retail project van de Looppas:

Klik in het menu AEM Start op het Screens-pictogram. Controleer of het We.Retail Run-project wordt weergegeven.

In CRXDE-Lite http://localhost:4502/crx/de/index.jsp (of winde van keus) navigeren 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 component van de Wereld van 0} Hello breidt de stichting, componenten, parbase component uit zodat kan het behoorlijk binnen een kanaal van de Opeenvolging 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 (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" />

De componenten van Screens vereisen twee verschillende teruggaven afhankelijk van welke auteurswijzewordt gebruikt:

1. Productie: Voorproef of de wijze van Publish (wcmmode=disabled)
2. geeft uit: gebruikt voor alle andere auteurswijzen, d.w.z. geeft uit, 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>

Het bovenstaande is de productiemarkering voor de component Hello World. 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 kanaal van de Opeenvolging 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 AEM de Componenten van de Kern.

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>

Het bovenstaande is de bewerkte markering voor de component Hello World. In het eerste blok wordt een bewerkte versie van de component weergegeven als het dialoogvenster is gevuld.

Het tweede blok wordt teruggegeven als geen bericht van de 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 eenvoudigst om vanuit een bestaand dialoogvenster te beginnen en vervolgens wijzigingen aan te brengen.

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

werk het de dialoogvakje van de Wereld van Hello bij 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 in XML weergegeven:

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

Het tekstveld voor het bericht wordt opgeslagen naar een eigenschap met de naam message en dat het nummerveld 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 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 cq.screens.componentCategorie wordt gebruikt in zowel Edit als voorproef-Productie wijze. Daarom wordt elke CSS of JS die in de sharedclientlib is gedefinieerd, in alle modi geladen.

Het is aan te raden paden die rechtstreeks naar /apps in een productieomgeving gaan, nooit te zien. De eigenschap allowProxy zorgt ervoor dat naar de CSS- en JS-client-bibliotheek wordt verwezen via een voorvoegsel /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. LESSis populaire CSS pre-compiler die CSS variabelen, mixins, en functies steunt. AEM clientbibliotheken ondersteunen native LESS-compilatie. De klasse of andere pre-compilers kunnen worden gebruikt maar moeten buiten AEM worden gecompileerd.

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.

De eigenschap categories van de productieclientbibliotheek bijwerken naar cq.screens.components.production.

Zo zorgt u ervoor dat de stijlen alleen worden geladen in de modus Voorvertoning-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 bij /apps/settings/wcm/designs/we-retail-run .

Van het AEM Menu van het Begin, navigeer aan Screens > We.RetailLooppas > en klik 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 ontwerpveld bij, zodat het naar /apps/settings/wcm/designs/we-retail-run verwijst, de ontwerppagina die in de vorige sectie is gemaakt.

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

Bewerk het nieuwe inactieve 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. Klik de Screens groep en de We.RetailLooppas - de groep van de Inhoud.

Schakelaar de paginamodus aan geeft uit. De Hello World-component kan nu aan de pagina worden toegevoegd en met andere het kanaalcomponenten van de Opeenvolging 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