AEM ontwikkelen developing-aem-components

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

Codevoorbeelden code-samples

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 structure

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 extending-existing-components-and-dialogs

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 extending-an-existing-component

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

Dialoogvenster Bestaande componenten aanpassen customizing-a-existing-component-dialog

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 defining-the-markup

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 using-the-html-template-language

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.

De Content Logic ontwikkelen developing-the-content-logic

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 using-java

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.

JavaScript gebruiken using-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 using-client-side-html-libraries

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 configuring-the-edit-behavior

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 configuring-the-preview-behavior

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.

Een dialoogvenster maken en configureren creating-and-configuring-a-dialog

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 coral-ui-and-granite-ui

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:

Een nieuw dialoogvenster maken creating-a-new-dialog

Dialoogvensters voor de interface met aanraakbediening:

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:

Dialoogvenstervelden aanpassen customizing-dialog-fields

Een nieuw veld maken creating-a-new-field

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.

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).

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 creating-a-client-library-for-style-and-behavior

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:

Een veld uitbreiden (overnemen van) extending-inheriting-from-a-field

Afhankelijk van uw vereisten kunt u:

Toegang tot dialoogvelden access-to-dialog-fields

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 handling-field-events

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 listeners-in-a-custom-client-library

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

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:

Listeners in de inhoudsstructuur listeners-in-the-content-structure

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 dialog-ready

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 field-validation

Verplicht veld mandatory-field

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

Zie voor een voorbeeld:

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

Veldvalidatie (graniet-UI) field-validation-granite-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:

Een ontwerpdialoogvenster maken en configureren creating-and-configuring-a-design-dialog

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:

Een Inplace Editor maken en configureren creating-and-configuring-an-inplace-editor

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 customizing-the-component-toolbar

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) configuring-a-component-for-the-references-rail-borrowed-lent

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

De component inschakelen en toevoegen aan het alineasysteem enabling-and-adding-your-component-to-the-paragraph-system

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 configuring-a-paragraph-system-so-that-dragging-an-asset-creates-a-component-instance

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:

Zie voor voorbeelden:

CODE VOOR GITHUB

U kunt de code van deze pagina op GitHub vinden

De extensie AEM accolades gebruiken using-the-aem-brackets-extension

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:

Migreren vanuit een klassieke component migrating-from-a-classic-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 migrating-cq-listener-code

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 documenting-your-component

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

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.

De ondersteunde markering is gelijk aan die voor inhoudsfragmenten.