Componenttoewijzing voor AEM Sites

In het artikel wordt gesproken over de verschillende aspecten van componenttoewijzing voor AEM-sites (met samengestelde componenttoewijzing).

Componenttoewijzingsregels

Gebruik een JSON-array met regels (uw componentmapping.json ) om HTML om te zetten in componenten. Houd de regels zo eenvoudig, expliciet en specifiek mogelijk.

Het HTML-element en de bijbehorende klasse als doel instellen

Zorg bij het definiëren van de bovenstaande elementen voor het volgende:

attributeMap gebruiken om eigenschappen op te slaan op de JCR-node

Voeg items toe aan attributeMap om eigenschappen voor het uitvoerknooppunt in te stellen. Elk item produceert attrs[to] = value .
Algemene patronen:

// copy an attribute
{ "attribute": "src", "to": "image-src" }
// read content or tag name
{ "from": "textContent", "to": "jcr:title" }
{ "from": "outerHTML",  "to": "text" }
{ "from": "innerHTML",  "to": "text" }
{ "from": "name",       "to": "type" }  // the tag name, e.g., "h2"
// constant value
{ "value": true, "to": "textIsRich" }

Hieronder ziet u een voorbeeld voor HTML naar JSON voor een afbeeldingselement.

<img src="/content/dam/aemg-docs/tragopan.svg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="">

{
    "name": "img",
    "resourceType": "core/wcm/components/image/v2/image",
    "attributeMap": [
      {
        "from": "src",
        "to": "fileReference"
      },
      {
        "value": ["fileReference"],
        "to": "path-attributes"
      }
    ]
  }

Paden normaliseren via een toegewezen item

Als u (absolute) waarden wilt normaliseren, verklaar welke attributensleutels zouden moeten worden genormaliseerd gebruikend:

{
  "value": ["text"],
  "to": "path-attributes"
}

Zorgen voor de volgende belangrijke punten:

HTML-waarden extraheren voordat deze worden gesplitst in componenten

Met from kunt u opgeven hoe een waarde uit het element moet worden gelezen voordat het document in afzonderlijke componenten wordt gesplitst:

Voorbeelden:

{ "from": "textContent", "to": "jcr:title" }
{ "from": "outerHTML",  "to": "text" }
{ "from": "innerHTML",  "to": "snippet" }
{ "from": "src",        "to": "image#src" }

Minimale voorbeeld van begin tot eind in component entmapping.json

[
  {
    "name": "h1, h2",
    "class": "topic-title",
    "resourceType": "core/wcm/components/title/v2/title",
    "attributeMap": [
      { "from": "textContent", "to": "text" },
      { "from": "name",        "to": "type" }
    ]
  },
  {
    "name": "img",
    "class": "hero",
    "resourceType": "weretail/components/content/heroimage",
    "attributeMap": [
      { "from": "src", "to": "image#src" },
      { "value": ["image#src"], "to": "path-attributes" }
    ]
  },
  {
    "name": "#element",
    "resourceType": "core/wcm/components/text/v2/text",
    "attributeMap": [
      { "from": "outerHTML", "to": "text" },
      { "value": true,        "to": "textIsRich" }
    ]
  }
]

Definieer het element en de klasse waarop u wilt toepassen, gebruik attributeMap om de knoopeigenschappen in te stellen, voeg een path-attributes -item toe om paden te normaliseren en kies de juiste from waarden voor de waarden die u wilt extraheren. De heroimage die hierboven wordt gebruikt, is een component in een we-retail -site.

Nota: Het is belangrijk om de standaard rijke tekst te bespreken en de elementen te identificeren waarvoor het wordt gebruikt.

Een aangepaste component maken

Leer hoe u een aangepaste tabelcomponent maakt die afbeeldingen in de bijbehorende cellen weergeeft. Deze aanpak garandeert een schoon, herbruikbaar ontwerp voor dynamische inhoud. Het omvat wat u zult bouwen, waarom het efficiënt is, de belangrijkste eerste vereisten, ontwerp op hoog niveau, en meer.

Wat u gaat bouwen

Een aangepaste tabelcomponent die HTML-tabelinhoud accepteert en elke <img> binnenin deze component vervangt door de uitvoer van de AEM Core Image-component. Zo kunt u de functies van Core Image (responsieve afbeeldingen, alt-verwerking, toegankelijkheid) opnieuw gebruiken en de volledige controle over de tabelmarkeringen behouden.
Op deze manier kunt u andere aangepaste componenten voor uw AEM-site maken (met samengestelde componenttoewijzing).

Waarom deze aanpak

Vereisten

Ontwerp op hoog niveau

Uw tabel wordt één keer uitgevoerd en bevat al de markering Core Image. Er is geen client-side DOM-manipulatie nodig.

Mapstructuur en sleutelbestanden (in dit antwoord)

Implementatiestappen

bepaalt de component van de Lijst (componentenknoop)

Maak de component onder apps/guides-components/components/table . Als u er nog geen hebt, voegt u een minimale .content.xml zoals hieronder toe om deze in het zijpaneel te registreren.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:Component"
          jcr:title="Table"
          componentGroup="Guides - Custom"/>

Geeft aan AEM door dat dit een component is die auteurs kunnen toevoegen aan pagina's.

geeft met HTML terug en omvat stijlen

Gebruik een verkoopmodel en voer de verwerkte HTML uit. Neem de clientlib-categorie op voor CSS/JS.

<sly data-sly-use.model="com.adobe.guides.aem.components.core.models.TableModel"
     data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
</sly>
<sly data-sly-call="${clientLib.css @ categories='guides-components.table'}"></sly>
<sly data-sly-test="${wcmmode.edit && !model.hasContent}">
  <div class="cq-placeholder" data-emptytext="${component.title}"></div>
</sly>
<div data-sly-test="${model.hasContent}"
     class="gu-table-wrapper ${model.enableResponsive ? 'gu-table--responsive' : ''} gu-table--style-${model.tableStyle}"
     id="${model.componentId}">
  ${model.processedTableHtml @ context='unsafe'}
</div>

Het model retourneert complete HTML met Core Image al gerenderd, dus HTL drukt deze gewoon af.

voeg het het Verdelen Model toe om HTML te verwerken en het Beeld van de Kern terug te geven

Het model leest dialooggebieden, ontleedt de lijst HTML, vindt elk <img>, en vervangt het met het Beeld van de Kern HTML via de dienst.

Hier volgen enkele belangrijke kennis van TableModel :

@Model(adaptables = {Resource.class, SlingHttpServletRequest.class},
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class TableModel {
  @ValueMapValue private String tableHtml;
  @ValueMapValue private boolean enableResponsive;
  @ValueMapValue private String tableStyle;
  @OSGiService private ImageComponentRenderer imageRenderer;
  // ...
  @PostConstruct
  protected void init() {
    // parse HTML, for each <img> build image props (fileReference, alt, title)
    // call imageRenderer.renderImageComponent(...)
    // replace <img> with returned Core Image HTML
  }
  public String getProcessedTableHtml() { /* return final HTML */ }
}

Dit centraliseert de logica op de server en gebruikt het gedrag van het Beeld van de Kern opnieuw.

geeft het Beeld van de Kern via de dienst terug (server-kant omvat)

ImageComponentRenderer rendert de component Core Image en legt de uitvoer vast. IT

@Component(service = ImageComponentRenderer.class)
public class ImageComponentRenderer {
  private static final String IMAGE_RESOURCE_TYPE = "core/wcm/components/image/v2/image";
  public String renderImageComponent(Resource base, Map<String,Object> props,
                                     SlingHttpServletRequest req, SlingHttpServletResponse resp) {
    // create wrapped resource with IMAGE_RESOURCE_TYPE and props
    // dispatcher.include(...) with a response wrapper to capture HTML
    // return captured HTML
  }
}

Dit laat u in Beeld van de Kern vallen waar u het, niet alleen als kindcomponent nodig hebt.

de bibliotheken van de Cliënt

Maak een clientlib voor kleine stijlen of toekomstige JS. De HTML boven laadt de categorie guides-components.table .

clientlibs/css.txt
  #base=css
  table.css
clientlibs/js.txt
  #base=js
  table.js

Zo blijven de stijlen/scripts modulair en kunnen ze worden gedetecteerd.

de gebieden van de Dialoog (de input van de Auteur)

Voeg een dialoogvenster toe met ten minste de volgende eigenschappen:

Deze kaart 1 :1 aan de eigenschappen van het Sling Model en controle het teruggeven.

sta de component op malplaatjes toe

In de Redacteur van het Malplaatje, geef het beleid van de Container van de Lay-out uit > Toegestane Componenten > laat uw component van de Lijst onder Gidsen - Douane toe.

Auteurs kunnen geen componenten toevoegen tot het beleid hen toestaat.

Tips voor ontwerpen

Restricties

Snelle referentie (implementatie)

Dit patroon toont hoe te om een douanecomponent met een server-kant van de Component van de Kern samen te stellen, die uw prijsverhoging terwijl het hergebruiken van de logica van de Kern houdt.