Ontwikkelen AEM componenten 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 het Ontwikkelen AEM Componenten - de Steekproeven van de Codevoor sommige praktische voorbeelden.

Structuur structure

De basisstructuur van een component is behandeld op de pagina Componenten AEM - de Grondbeginselen. In dat document worden zowel de aanraakinterface als de klassieke gebruikersinterface behandeld. 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 u wilt uitvoeren, zou het mogelijk kunnen zijn om een bestaande instantie uit te breiden of aan te passen, eerder dan het bepalen van en het ontwikkelen van de volledige structuurvan kras.

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

Het uitbreiden van een bestaande component kan met Hiërarchie van het Type van Middelen de verwante overervingsmechanismen worden bereikt.

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

Het is ook mogelijk om de de componentendialoog van a met voeten te treden gebruikend de Verschuivende Fusie van het Middelen het bepalen van het bezit 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 Verschuivende Fusie van het Middelvoor meer details.

Opmaak definiëren defining-the-markup

Uw component zal met HTMLworden teruggegeven. 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 Templating Templating Taal van de HTML (HTML), die met AEM 6.0 wordt geïntroduceerd, neemt de plaats van JSP (de Pagina's van JavaServer) als aangewezen en geadviseerd server-zijmalplaatjesysteem 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

HTML Java gebruiken-API laat een HTML- dossier toe om helpermethodes in een klasse van douaneJavatoegang te hebben. Hiermee kunt u Java-code gebruiken om de logica voor het selecteren en configureren van de componentinhoud te implementeren.

JavaScript gebruiken using-javascript

HTML JavaScript gebruiken-API laat een HTML- dossier toe om tot helpercode toegang te hebben die in JavaScriptwordt geschreven. Hiermee 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 met deze kwestie te helpen behandelen, AEM verstrekt Cliënt-zijOmslagen van de Bibliotheek, die u uw cliënt-zijcode in de bewaarplaats laten opslaan, het in categorieën organiseren en bepalen wanneer en hoe elke categorie van code aan de cliënt moet worden gediend. Het client-side bibliotheeksysteem zorgt vervolgens voor het maken van de juiste koppelingen in de uiteindelijke webpagina om de juiste code te laden.

Lees Gebruikend de Bibliotheken van de HTML van client-zijvoor 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.

Het geeft gedrag van een component uit wordt gevormddoor a cq:editConfig knoop van type cq:EditConfig onder de componentenknoop (van type cq:Component) toe te voegen en door specifieke eigenschappen en kindknopen toe te voegen.

Het gedrag Voorvertoning configureren configuring-the-preview-behavior

Het 🔗 koekje van de Wijze WCM wordt geplaatst wanneer het schakelen naar 3} wijze van de Voorproef {zelfs wanneer de pagina niet wordt verfrist.

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. Het gebruiken van een dialoog staat auteurs en/of beheerders toe om inhoud uit te geven, de component te vormen of ontwerpparameters te bepalen (gebruikend de Dialoog van het Ontwerp van de a 🔗)

Gebruikersinterface voor koralen en graniet coral-ui-and-granite-ui

Koraal UIen graniet UIbepaalt het moderne blik en het gevoel van AEM.

graniet UI verstrekt een grote waaier van de basiscomponenten (widgets)nodig om uw dialoog over het auteursmilieu tot stand te brengen. Indien nodig kunt u deze selectie uitbreiden en uw eigen widgetcreëren.

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 (namelijk prijsverhoging die door een componentenmanuscript samen met gedrag/stijl door een cliëntbibliotheek 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.

Om een widget voor gebruik in een componentendialoogvakje voor aanraking-toegelaten UI te creëren vereist u een graniet UI gebiedscomponentcreëren.

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 formulierveld moet u een brontype maken. Dit is hetzelfde als het maken van een component. Om u in die taak te helpen, biedt granite UI een generische gebiedscomponent aan om van (het gebruiken van sling:resourceSuperType) te erven:

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

Specifieker verstrekt UI een waaier van gebiedscomponenten die voor gebruik in dialogen (of, meer in het algemeen, in vormen) geschikt zijn.

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

Een clientbibliotheek maken voor stijl en gedrag creating-a-client-library-for-style-and-behavior

Als u het stileren en het gedrag voor uw component wilt bepalen, kunt u een specifieke cliëntbibliotheektot stand brengen die uw douane CSS/LESS en JS bepaalt.

Als u de clientbibliotheek alleen voor het dialoogvenster van de component wilt laden (dat wil zeggen dat deze niet voor een andere component wordt geladen), moet u de eigenschap extraClientlibs van het dialoogvenster instellen op de categorienaam van de clientbibliotheek die u 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 wanneer alle dialoogvensters worden weergegeven. 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 ( rendercondition ) gebruiken om te bepalen wie toegang heeft tot specifieke tabbladen/velden in het 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 om gebeurtenissen op dialooggebieden te behandelen wordt nu gedaan met luisteraars in een bibliotheek van de douanecliënt. Dit is een verandering van de oudere methode om luisteraars in de inhoudsstructuurte hebben.

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 documentatie van de Koraal UIom te identificeren aan welke gebeurtenis u wilt reageren. Dit lijkt 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 gebeurtenis-API.

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 zou (moeten) niet de aard van de onderliggende widget moeten 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 gebeurtenis dialog-ready .

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 kan worden gebruikt om in aangepaste JavaScript-code die aanpassingen uitvoert op de velden in een dialoogvenster of vergelijkbare taken, aan elkaar te koppelen.

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 Granite en de componenten van de gebruikersinterface van Granite (equivalent aan widgets) wordt uitgevoerd met de API foundation-validation . zie de foundation-valdiation documentatie van Granite voor details.

Zie voor voorbeelden:

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

De dialoog van het Ontwerp wordt verstrekt wanneer een component ontwerpdetails heeft die in Wijze van het Ontwerpkunnen worden uitgegeven.

De definitie is zeer gelijkaardig aan dat van a dialoog die voor het uitgeven van inhoudwordt gebruikt, met het verschil dat het als knoop wordt bepaald:

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 Uitbreidend de Authoring van de Pagina - voeg Nieuwe Inplace Redacteurvoor meer informatie toe.

De werkbalk Component aanpassen customizing-the-component-toolbar

De Toolbar van de Componentgeeft de gebruikerstoegang tot een waaier van acties voor de component zoals uitgeven, vormen, kopiëren, en schrappen.

Zie Uitbreidend de Authoring van de Pagina - voeg Nieuwe Actie aan Toolbar van de Componentvoor meer informatie toe.

Een component voor de referentierail configureren (geleend/geleend) configuring-a-component-for-the-references-rail-borrowed-lent

Als uw nieuwe componentenverwijzingen inhoud van andere pagina's dan u kunt overwegen of u het de Geleende Inhoud en Lent Inhoud secties van het Rail van Verwijzingen wilt beïnvloeden.

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

Maak een 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 aan om een paragraafsysteem op uw pagina te vormen zodat een geval van uw nieuwe component automatisch wordt gecreeerd wanneer een gebruiker (aangewezen) activa op een geval van die pagina(in plaats van het moeten altijd een lege component aan de pagina) sleept.

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 AEM Uitbreiding van Bracketsverstrekt een vlotte werkschema om AEM componenten en cliëntbibliotheken uit te geven. Het is gebaseerd op de 🔗 coderedacteur 0} Brackets {.

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 zou cq:listener code (en component verwante clientlibs) functies kunnen gebruiken die voor klassieke UI (zoals CQ.wcm.*) specifiek zijn. 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 eenvoudig om bestaande documentatiemarkering die u binnen de component zelf beschikbaar hebt, te maken.

Plaats een README.md -bestand in de componentstructuur. Deze prijsdaling wordt getoond in de componentenconsole.

De gesteunde prijsdaling is het zelfde als dat voor inhoudsfragmenten.