AEM ontwikkelen

AEM componenten worden gebruikt om de inhoud die op uw webpagina's beschikbaar is, vast te houden, op te maken en weer te geven.

  • Wanneer ontwerpen, pagina'sMet deze componenten kunnen de auteurs de inhoud bewerken en configureren.

  • In de publicatie-instantie renderen de componenten uw inhoud en presenteren deze zoals u nodig hebt aan uw websitebezoekers.

OPMERKING

Deze pagina is een vervolg op het document Componenten AEM - De basisbeginselen.

LET OP

Onderliggende componenten /libs/cq/gui/components/authoring/dialog zijn alleen bedoeld voor gebruik in de Editor (componentdialoogvensters in Authoring). Als ze elders worden gebruikt (bijvoorbeeld in een wizard), gedragen ze zich mogelijk niet naar behoren.

Codevoorbeelden

Deze pagina bevat de referentiedocumentatie (of koppelingen naar referentiedocumentatie) die vereist is voor het ontwikkelen van nieuwe componenten voor AEM. Zie Ontwikkelen AEM componenten - Codevoorbeelden voor enkele praktische voorbeelden .

Structuur

De basisstructuur van een component wordt op de pagina bedekt Componenten AEM - De basisbeginselen. Dat document behandelt zowel de aanraakinterface als de klassieke gebruikersinterface. Zelfs als u niet de klassieke montages in uw nieuwe component te hoeven gebruiken kan het helpen om zich van hen bewust te zijn wanneer het erven van bestaande componenten.

Bestaande componenten en dialoogvensters uitbreiden

Afhankelijk van de component die u wilt implementeren, kan het mogelijk zijn een bestaande instantie uit te breiden of aan te passen in plaats van de gehele instantie te definiëren en te ontwikkelen structuur helemaal niet.

Wanneer u een bestaande component of een bestaand dialoogvenster uitbreidt of aanpast, kunt u de volledige structuur of de structuur die voor het dialoogvenster is vereist, kopiëren of repliceren voordat u de wijzigingen aanbrengt.

Een bestaande component uitbreiden

Een bestaande component uitbreiden kan worden bereikt met Hiërarchie van brontype en de daarmee samenhangende overervingsmechanismen.

OPMERKING

Componenten kunnen ook opnieuw worden gedefinieerd met een bedekking op basis van de logica van het zoekpad. In dat geval echter Samenvoegen van verkoopbronnen wordt niet geactiveerd en /apps moet de volledige overlay definiëren.

OPMERKING

De inhoudsfragmentcomponent kunnen ook worden aangepast en uitgebreid, hoewel rekening moet worden gehouden met de volledige structuur en relaties met activa.

Dialoogvenster Bestaande componenten aanpassen

Het is ook mogelijk een dialoogvenster component met de Samenvoegen van verkoopbronnen en de eigenschap definiëren sling:resourceSuperType.

Dit betekent dat u alleen de vereiste verschillen opnieuw hoeft te definiëren in plaats van het volledige dialoogvenster opnieuw te definiëren (met sling:resourceSuperType). Deze methode wordt nu aanbevolen voor het uitbreiden van een componentdialoogvenster

Zie de Samenvoegen van verkoopbronnen voor meer informatie .

Opmaak definiëren

Uw component wordt weergegeven met HTML. Uw component moet de HTML definiëren die nodig is om de vereiste inhoud te nemen en deze vervolgens naar wens weer te geven, zowel in de auteur- als in de publicatieomgeving.

De HTML Sjabloontaal gebruiken

De HTML Templating Language (HTL), die met AEM 6.0 is geïntroduceerd, vervangt JSP (JavaServer Pages) als voorkeurssjabloonsysteem en als aanbevolen sjabloonsysteem voor HTML. Voor webontwikkelaars die robuuste bedrijfswebsites moeten maken, helpt HTL om meer beveiliging en ontwikkelingsefficiëntie te bereiken.

OPMERKING

Hoewel zowel HTML als JSP voor het ontwikkelen van componenten kunnen worden gebruikt, zullen wij ontwikkeling met HTML op deze pagina illustreren, aangezien het de geadviseerde scripting taal voor AEM is.

De Content Logic ontwikkelen

Deze optionele logica selecteert en/of berekent de inhoud die moet worden gerenderd. Deze wordt aangeroepen vanuit HTML-expressies met het juiste gebruik-API-patroon.

Het mechanisme om logica en verschijning te scheiden helpt verduidelijken wat voor een bepaalde mening wordt vereist. Het staat ook verschillende logica voor verschillende meningen van het zelfde middel toe.

Java gebruiken

Met de HTML Java Use-API kan een HTML-bestand toegang krijgen tot hulplijnmethoden in een aangepaste Java-klasse. Hierdoor kunt u Java-code gebruiken om de logica voor het selecteren en configureren van de inhoud van de component te implementeren.

Werken met JavaScript

Met de HTML JavaScript Use-API kan een HTML-bestand toegang krijgen tot hulplijncode die in JavaScript is geschreven. Hierdoor kunt u JavaScript-code gebruiken om de logica voor het selecteren en configureren van de componentinhoud te implementeren.

Client-Side HTML-bibliotheken gebruiken

Moderne websites zijn sterk afhankelijk van verwerking op de client door complexe JavaScript- en CSS-code. Het organiseren en optimaliseren van het gebruik van deze code kan een ingewikkeld probleem zijn.

Om dit probleem te helpen oplossen, AEM Client-side bibliotheekmappen, waarmee u uw code aan de clientzijde in de gegevensopslagruimte kunt opslaan, kunt u deze in categorieën ordenen en bepalen wanneer en hoe elke categorie code aan de client moet worden aangeboden. Het client-side bibliotheeksysteem zorgt vervolgens voor het maken van de juiste koppelingen in de uiteindelijke webpagina om de juiste code te laden.

Lezen Client-Side HTML-bibliotheken gebruiken voor meer informatie .

Werking bewerken configureren

U kunt het bewerkingsgedrag van een component configureren, inclusief kenmerken zoals handelingen die beschikbaar zijn voor de component, kenmerken van de plaatsingseditor en listeners die betrekking hebben op gebeurtenissen in de component. De configuratie wordt gebruikt voor zowel de aanraakinterface als de klassieke gebruikersinterface, maar met bepaalde specifieke verschillen.

De bewerkingsgedrag van een component is geconfigureerd door een cq:editConfig knooppunt van type cq:EditConfig onder het componentknooppunt (van het type cq:Component) en door specifieke eigenschappen en onderliggende knooppunten toe te voegen.

Het gedrag Voorvertoning configureren

De WCM-modus cookie wordt ingesteld wanneer wordt geschakeld naar Voorvertoning zelfs als de pagina niet is vernieuwd.

Voor componenten met een teruggeven die voor de Wijze van WCM gevoelig zijn, moeten zij worden bepaald om zich specifiek te verfrissen, dan zich op de waarde van het koekje baseren.

OPMERKING

In de interface met aanraakfuncties alleen de waarden EDIT en PREVIEW worden gebruikt voor de WCM-modus cookie.

Een dialoogvenster maken en configureren

Dialogen worden gebruikt om auteur toe te staan om met de component in wisselwerking te staan. In een dialoogvenster kunnen auteurs en/of beheerders inhoud bewerken, de component configureren of ontwerpparameters definiëren (met behulp van een Ontwerpdialoogvenster)

Gebruikersinterface voor koralen en graniet

Koraalinterface en Graniet-interface de moderne kijk op de AEM bepalen.

De graniet-interface biedt een groot aantal basiscomponenten (widgets) nodig zijn om een dialoogvenster over de ontwerpomgeving te maken. Indien nodig kunt u deze selectie uitbreiden en uw eigen widget maken.

Zie voor meer informatie:

OPMERKING

Vanwege de aard van de graniet UI-componenten (en verschillen met de ExtJS-widgets) zijn er enkele verschillen tussen de manier waarop componenten communiceren met de interface met aanraakbediening en de interface klassieke gebruikersinterface.

Een nieuw dialoogvenster maken

Dialoogvensters voor de interface met aanraakbediening:

  • are named cq:dialog.

  • worden gedefinieerd als een nt:unstructured knoop met sling:resourceType eigenschap ingesteld.

  • onder hun cq:Component en naast de componentdefinitie ervan.

  • worden op de server weergegeven (als Sling-componenten), op basis van hun inhoudsstructuur en de sling:resourceType eigenschap.

  • gebruik het Granite UI-framework.

  • bevatten een knoopstructuur die de gebieden binnen de dialoog beschrijft.

    • deze knooppunten zijn nt:unstructured met de vereiste sling:resourceType eigenschap.

Een voorbeeld van een knooppuntstructuur kan zijn:

newComponent (cq:Component)
  cq:dialog (nt:unstructured)
    content
      layout
      items
        column
          items
            file
            description

Het aanpassen van een dialoog is gelijkaardig aan het ontwikkelen van een component aangezien de dialoog zelf een component is (d.w.z. prijsverhoging die door een componentenmanuscript samen met gedrag/stijl die door een cliëntbibliotheek wordt verstrekt) wordt teruggegeven.

Zie voor voorbeelden:

  • /libs/foundation/components/text/cq:dialog
  • /libs/foundation/components/download/cq:dialog
OPMERKING

Als er voor een component geen dialoogvenster is gedefinieerd voor de interface met aanraakbediening, wordt het klassieke dialoogvenster UI gebruikt als fallback binnen een compatibiliteitslaag. Als u een dergelijk dialoogvenster wilt aanpassen, moet u het dialoogvenster voor klassieke gebruikersinterface aanpassen. Zie Componenten AEM voor de klassieke gebruikersinterface.

Dialoogvenstervelden aanpassen

OPMERKING

Zie:

Een nieuw veld maken

Widgets voor de interface met aanraakbediening worden geïmplementeerd als graniet-UI-componenten.

Als u een nieuwe widget wilt maken voor gebruik in een componentdialoogvenster voor de interface met aanraakbediening, moet u: een nieuwe granite UI-veldcomponent maken.

OPMERKING

Voor volledige informatie over de graniet-gebruikersinterface raadpleegt u de Granite UI-documentatie.

Als u het dialoogvenster beschouwt als een eenvoudige container voor een formulierelement, kunt u ook de primaire inhoud van het dialoogvenster zien als formuliervelden. Voor het maken van een nieuw formulierveld moet u een brontype maken; dit is hetzelfde als het maken van een nieuwe component. Om u in die taak te helpen, biedt granite UI een generische gebiedscomponent aan om van (het gebruiken van sling:resourceSuperType):

/libs/granite/ui/components/coral/foundation/form/field

Meer specifiek verstrekt granite UI een waaier van gebiedscomponenten die voor gebruik in dialogen (of, meer in het algemeen, in formulieren).

OPMERKING

Dit verschilt van de klassieke UI, waar widgets door worden vertegenwoordigd cq:Widgets knooppunten, elk met een bepaalde xtype om de relatie met de bijbehorende ExtJS-widget vast te stellen. Vanuit implementatiestandpunt zijn deze widgets weergegeven aan de clientzijde door het ExtJS-framework.

Zodra u uw middeltype hebt gecreeerd, kunt u uw gebied concretiseren door een nieuw knooppunt in uw dialoog, met het bezit toe te voegen sling:resourceType verwijzen naar het middeltype u net hebt geïntroduceerd.

Een clientbibliotheek maken voor stijl en gedrag

Als u stijlen en gedrag voor uw component wilt definiëren, kunt u een speciale clientbibliotheek die uw aangepaste CSS/LESS en JS definieert.

Als u de clientbibliotheek alleen voor het dialoogvenster van de component wilt laden (de bibliotheek wordt dus niet voor een andere component geladen), moet u de eigenschap instellen extraClientlibs van uw dialoogvenster naar de categorienaam van de clientbibliotheek die u zojuist hebt gemaakt. Dit is aan te raden als uw clientbibliotheek erg groot is en/of als uw veld specifiek is voor dat dialoogvenster en niet nodig is in andere dialoogvensters.

Als u de clientbibliotheek voor alle dialoogvensters wilt laden, stelt u de categorie-eigenschap van de clientbibliotheek in op cq.authoring.dialog. Dit is de categorienaam van de clientbibliotheek die standaard wordt opgenomen bij het renderen van alle dialoogvensters. U wilt dat doen als uw clientbibliotheek klein is en/of uw veld algemeen is en opnieuw kan worden gebruikt in andere dialoogvensters.

Zie voor een voorbeeld:

  • cqgems/customizingfield/components/colorpicker/clientlibs

Een veld uitbreiden (overnemen van)

Afhankelijk van uw vereisten kunt u:

  • Een bepaald veld voor een graniet-UI uitbreiden naar componentovererving ( sling:resourceSuperType)
  • Een bepaalde widget uitbreiden vanuit de onderliggende widgetbibliotheek (in het geval van een graniet-interface is dit de Coral-UI) door de API voor de widgetbibliotheek (JS/CSS-overerving) te volgen

Toegang tot dialoogvelden

U kunt ook rendervoorwaarden gebruiken ( rendercondition) om te bepalen wie toegang heeft tot specifieke tabbladen/velden in uw dialoogvenster; bijvoorbeeld:

+ mybutton
  - sling:resourceType = granite/ui/components/coral/foundation/button
  + rendercondition
    - sling:resourceType = myapp/components/renderconditions/group
    - groups = ["administrators"]

Veldgebeurtenissen afhandelen

De methode voor het verwerken van gebeurtenissen in dialoogvelden is nu voltooid met listeners in een aangepaste clientbibliotheek. Dit is een wijziging ten opzichte van de oude methode van listeners in de inhoudsstructuur.

Listeners in een aangepaste clientbibliotheek

Om logica in uw gebied te injecteren, zou u moeten:

  1. Laat uw veld gemarkeerd zijn met een bepaalde CSS-klasse (de haak).
  2. Definieer in uw clientbibliotheek een JS-listener die is gekoppeld aan de naam van die CSS-klasse (dit zorgt ervoor dat uw aangepaste logica alleen binnen het bereik van uw veld valt en niet van invloed is op andere velden van hetzelfde type).

Hiervoor moet u weten welke onderliggende widgetbibliotheek u wilt gebruiken. Zie de Coral UI-documentatie om aan te geven op welke gebeurtenis u wilt reageren. Dit lijkt erg op het proces dat u in het verleden met ExtJS moest uitvoeren: Zoek de documentatiepagina van een bepaalde widget en controleer vervolgens de details van de bijbehorende API voor gebeurtenissen.

Zie voor een voorbeeld:

  • cqgems/customizingfield/components/clientlibs/customizingfield

Listeners in de inhoudsstructuur

In de klassieke UI met ExtJS, was het gebruikelijk om luisteraars voor een bepaalde widget in de inhoudsstructuur te hebben. Hetzelfde bereiken in de interface met aanraakbediening is anders dan het bereiken van JS-listenercode (of enige andere code) wordt niet meer gedefinieerd in de inhoud.

De inhoudstructuur beschrijft de semantische structuur; het mag (moet) niet de aard van de onderliggende widget impliceren. Als u geen JS-code hebt in de inhoudsstructuur, kunt u de implementatiedetails wijzigen zonder de inhoudsstructuur te wijzigen. Met andere woorden, u kunt de widgetbibliotheek wijzigen zonder de inhoudsstructuur aan te raken.

Beschikbaarheid van dialoogvenster vaststellen

Als u een aangepaste JavaScript hebt die alleen moet worden uitgevoerd wanneer het dialoogvenster beschikbaar en gereed is, moet u luisteren naar de dialog-ready gebeurtenis.

Deze gebeurtenis wordt geactiveerd wanneer het dialoogvenster wordt geladen (of opnieuw wordt geladen) en klaar voor gebruik is. Dit houdt in dat telkens wanneer er een wijziging (maken/bijwerken) plaatsvindt in de DOM van het dialoogvenster.

dialog-ready U kunt dit gebruiken om aangepaste JavaScript-code te koppelen die aanpassingen uitvoert op de velden in een dialoogvenster of vergelijkbare taken.

Veldvalidatie

Verplicht veld

Als u een bepaald veld wilt markeren als een verplicht veld, stelt u de volgende eigenschap in op het inhoudsknooppunt van het veld:

  • Naam: required
  • Type: Boolean

Zie voor een voorbeeld:

/libs/foundation/components/page/cq:dialog/content/items/tabs/items/basic/items/column/items/title/items/title

Veldvalidatie (graniet-UI)

Veldvalidatie in de gebruikersinterface van graniet en de componenten van de gebruikersinterface van graniet (equivalent aan widgets) wordt uitgevoerd met de foundation-validation API. Zie de foundation-valdiation Korte documentatie voor meer informatie.

Zie voor voorbeelden:

  • cqgems/customizingfield/components/clientlibs/customizingfield/js/validations.js

  • /libs/cq/gui/components/authoring/dialog/clientlibs/dialog/js/validations.js

Een ontwerpdialoogvenster maken en configureren

Het dialoogvenster Ontwerpen wordt weergegeven wanneer een component ontwerpdetails bevat die kunnen worden bewerkt Ontwerpmodus.

De definitie lijkt sterk op die van een dialoogvenster voor het bewerken van inhoud, met het verschil dat het als knoop wordt gedefinieerd:

  • Node name: cq:design_dialog
  • Type: nt:unstructured

Een Inplace Editor maken en configureren

Met een installatieeditor kan de gebruiker inhoud rechtstreeks in de alineasstroom bewerken, zonder dat een dialoogvenster hoeft te worden geopend. De standaardcomponenten Tekst en Titel hebben bijvoorbeeld beide een geïntegreerde editor.

Een plaatsredacteur is niet noodzakelijk/zinvol voor elk componenttype.

Zie Pagina-authoring uitbreiden - Nieuwe plaatsingseditor toevoegen voor meer informatie .

De werkbalk Component aanpassen

De Werkbalk Component geeft de gebruiker toegang tot een waaier van acties voor de component zoals uitgeven, vormen, kopiëren, en schrappen.

Zie Pagina-authoring uitbreiden - Nieuwe handeling toevoegen aan een componentwerkbalk voor meer informatie .

Een component voor de referentierail configureren (geleend/geleend)

Als uw nieuwe component verwijst naar inhoud van andere pagina's, kunt u overwegen of u het effect wilt hebben op Geleende inhoud en Inhoud van regel van de Verwijzingen Rail.

Uit-de-doos AEM slechts de component van de Verwijzing. Om uw component toe te voegen moet u de bundel vormen OSGi Configuratie van WCM-ontwerpnaslaggids.

Maak een nieuw item in de definitie en geef de component op, samen met de eigenschap die moet worden gecontroleerd. Bijvoorbeeld:

/apps/<your-Project>/components/reference@parentPath

OPMERKING

Wanneer het werken met AEM zijn er verscheidene methodes om de configuratiemontages voor dergelijke diensten te beheren. Zie OSGi configureren voor meer details en de aanbevolen werkwijzen.

De component inschakelen en toevoegen aan het alineasysteem

Nadat het onderdeel is ontwikkeld, moet het zijn ingeschakeld voor gebruik in een geschikt alineasysteem, zodat het op de vereiste pagina's kan worden gebruikt.

Dit kan gebeuren door:

Een alineasysteem configureren, zodat een componentinstantie wordt gemaakt wanneer u een element sleept

AEM biedt de mogelijkheid een alineasysteem op uw pagina te configureren zodat er wordt automatisch een instantie van de nieuwe component gemaakt wanneer een gebruiker een (geschikt) element naar een instantie van die pagina sleept (in plaats van altijd een lege component naar de pagina te slepen).

Dit gedrag, en de vereiste activa-aan-component verhouding kan worden gevormd:

  1. Onder de alinea-definitie van het paginaontwerp. Bijvoorbeeld:

    • /etc/designs/<myApp>/page/par

    Een nieuw knooppunt maken:

    • Naam: cq:authoring
    • Type: nt:unstructured
  2. Onder dit creeer een nieuwe knoop om al activa-aan-component afbeeldingen te houden:

    • Naam: assetToComponentMapping
    • Type: nt:unstructured
  3. Voor elke element-aan-component afbeelding creeer een knoop:

    • Naam: tekst; het verdient aanbeveling dat de naam het element en het type van het verwante onderdeel aanduidt; bijvoorbeeld
    • Type: nt:unstructured

    Elke eigenschap heeft de volgende eigenschappen:

    • assetGroup:

      • Type: String
      • Waarde: de groep waartoe het gerelateerde actief behoort; bijvoorbeeld: media
    • assetMimetype:

      • Type: String
      • Waarde: het mime-type van het gerelateerde actief; bijvoorbeeld image/*
    • droptarget:

      • Type: String
      • Waarde: de neerzetbestemming; bijvoorbeeld: image
    • resourceType:

      • Type: String
      • Waarde: de daarmee verband houdende component-bron; bijvoorbeeld: foundation/components/image
    • type:

      • Type: String
      • Waarde: het type, bijvoorbeeld Images

Zie voor voorbeelden:

  • /etc/designs/geometrixx/jcr:content/page/par/cq:authoring
  • /etc/designs/geometrixx-outdoors/jcr:content/page/par/cq:authoring
  • /etc/designs/geometrixx-media/jcr:content/article/article-content-par/cq:authoring

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

OPMERKING

De automatische verwezenlijking van componenteninstanties kan nu gemakkelijk binnen UI worden gevormd wanneer het gebruiken Kernonderdelen en bewerkbare sjablonen. Zie Paginasjablonen maken voor meer informatie over het bepalen van welke componenten automatisch met bepaalde media types worden geassocieerd.

De extensie AEM accolades gebruiken

De Extensie AEM biedt een vloeiende workflow voor het bewerken van AEM componenten en clientbibliotheken. Het is gebaseerd op de Haakjes code-editor.

De extensie:

  • Vereenvoudigt synchronisatie (geen Maven of File Vault vereist) om de efficiëntie van ontwikkelaars te verhogen en helpt ook front-end ontwikkelaars met beperkte AEM kennis om aan projecten deel te nemen.
  • Bevat enkele HTL ondersteuning, de sjabloontaal die is ontworpen om de ontwikkeling van componenten te vereenvoudigen en de beveiliging te verhogen.
OPMERKING

Brackets is het aanbevolen mechanisme voor het maken van componenten. Het vervangt CRXDE Lite - creeer de functionaliteit van de Component, die voor klassieke UI werd ontworpen.

Migreren vanuit een klassieke component

Bij het migreren van een component die is ontworpen voor gebruik met de klassieke UI naar een component die met touch-enabled UI (of slechts of gezamenlijk) kan worden gebruikt zouden de volgende kwesties moeten worden overwogen:

cq:listenercode migreren

Als u een project migreert dat voor klassieke UI werd ontworpen, dan cq:listener de code (en component verwante clientlibs) zou functies kunnen gebruiken die voor klassieke UI (zoals CQ.wcm.*). Voor de migratie moet u dergelijke code bijwerken met behulp van de equivalente objecten/functies in de interface met aanraakbediening.

Als uw project volledig wordt gemigreerd naar de interface met aanraakbediening, moet u deze code vervangen om de objecten en functies te gebruiken die relevant zijn voor de interface met aanraakbediening.

Nochtans, als uw project zowel klassieke UI als aanraking-toegelaten UI tijdens de migratieperiode (het gebruikelijke scenario) moet behandelen, dan moet u een schakelaar uitvoeren om de afzonderlijke code te onderscheiden die de aangewezen voorwerpen van verwijzingen voorziet.

Dit schakelaarmechanisme kan als worden uitgevoerd:

if (Granite.author) {
    // touch UI
} else {
    // classic UI
}

Uw component documenteren

Als ontwikkelaar wilt u gemakkelijk toegang tot componentendocumentatie zodat u snel kunt begrijpen:

  • Beschrijving
  • Beoogd gebruik
  • Inhoudsstructuur en eigenschappen
  • Toegankelijke API's en uitbreidingspunten
  • enz.

Daarom is het vrij gemakkelijk om het even welke bestaande documentatiemarkering te maken u binnen de component zelf beschikbaar hebt.

U hoeft alleen maar een README.md in de componentstructuur. Deze markering wordt dan weergegeven in het dialoogvenster componentconsole.

chlimage_1-225

De ondersteunde markering is gelijk aan die voor inhoudsfragmenten.

Op deze pagina