Utveckla AEM

AEM används för att lagra, formatera och återge innehåll som är tillgängligt på dina webbsidor.

  • När du redigerar sidor tillåter komponenterna författarna att redigera och konfigurera innehållet.

    • När du skapar en Commerce-plats kan komponenterna t.ex. samla in och återge information från katalogen.
      Mer information finns i Utveckla e-handel.

    • När du skapar en Communities-plats kan komponenterna tillhandahålla information till och samla in information från besökarna.
      Mer information finns i Utveckla användargrupper.

  • I publiceringsinstansen återger komponenterna ditt innehåll och presenterar det som du vill för webbplatsens besökare.

OBSERVERA

Den här sidan är en fortsättning av dokumentet AEM Components - The Basics.

FÖRSIKTIGHET

Komponenter under /libs/cq/gui/components/authoring/dialog ska bara användas i redigeraren (komponentdialogrutor i redigering). Om de används någon annanstans (t.ex. i en guidedialogruta) kanske de inte fungerar som förväntat.

Kodexempel

Den här sidan innehåller referensdokumentation (eller länkar till referensdokumentation) som krävs för att utveckla nya komponenter för AEM. Se Utveckla AEM - Kodexempel för några praktiska exempel.

Struktur

En komponents grundläggande struktur beskrivs på sidan AEM Components - The Basics. Dokumentet omfattar både pekaktiverade och klassiska användargränssnitt. Även om du inte behöver använda de klassiska inställningarna i den nya komponenten kan det vara bra att känna till dem när du ärver från befintliga komponenter.

Utöka befintliga komponenter och dialogrutor

Beroende på vilken komponent du vill implementera kan det vara möjligt att utöka eller anpassa en befintlig instans i stället för att definiera och utveckla hela strukturen från början.

När du utökar eller anpassar en befintlig komponent eller dialogruta kan du kopiera eller replikera antingen hela strukturen eller den struktur som krävs för dialogrutan innan du gör ändringarna.

Utöka en befintlig komponent

Du kan utöka en befintlig komponent med Resurstyphierarki och relaterade arvsmekanismer.

OBSERVERA

Komponenter kan också definieras om med en övertäckning som baseras på sökvägslogiken. I så fall aktiveras inte Sling Resource Merger och /apps måste definiera hela övertäckningen.

OBSERVERA

Innehållsfragmentkomponenten 🔗 kan också anpassas och utökas, men den fullständiga strukturen och relationerna med Assets måste beaktas.

Anpassa en befintlig komponentdialogruta

Det går också att åsidosätta en komponentdialogruta med Sling Resource Merger och definiera egenskapen sling:resourceSuperType.

Det innebär att du bara behöver definiera om skillnaderna, i stället för att definiera om hela dialogrutan (med sling:resourceSuperType). Den här metoden rekommenderas nu för att utöka en komponentdialogruta

Mer information finns i Sling Resource Merger.

Definiera markeringen

Komponenten återges med HTML. Komponenten måste definiera den HTML som behövs för att ta det önskade innehållet och sedan återge det som det behövs, både i författarmiljön och i publiceringsmiljön.

Använda HTML-mallspråket

HTML-mallsspråket (HTL), som introducerades med AEM 6.0, ersätter JSP (JavaServer Pages) som det rekommenderade serversidesmallsystemet för HTML. För webbutvecklare som behöver bygga robusta företagswebbplatser kan HTML bidra till ökad säkerhet och effektivare utveckling.

OBSERVERA

Även om både HTML och JSP kan användas för att utveckla komponenter illustrerar vi utvecklingen med HTML på den här sidan, eftersom det är det rekommenderade skriptspråket för AEM.

Utveckla innehållslogiken

Denna valfria logik markerar och/eller beräknar innehållet som ska återges. Den anropas från HTML-uttryck med rätt Use-API-mönster.

Mekanismen för att skilja logik från utseende gör det lättare att klargöra vad som krävs för en viss vy. Det möjliggör också olika logik för olika vyer av samma resurs.

Använda Java

Med HTL Java Use-API:t kan en HTML-fil få åtkomst till hjälpmetoder i en anpassad Java-klass. På så sätt kan du använda Java-kod för att implementera logiken för att välja och konfigurera komponentinnehållet.

Använda JavaScript

Använd-API:t för HTML JavaScript gör att en HTML-fil kan få åtkomst till hjälpkod som skrivits i JavaScript. På så sätt kan du använda JavaScript-kod för att implementera logiken för att välja och konfigurera komponentinnehållet.

Använda HTML-bibliotek på klientsidan

Moderna webbplatser är starkt beroende av bearbetning på klientsidan som styrs av komplex JavaScript- och CSS-kod. Det kan vara komplicerat att organisera och optimera serveringen av koden.

För att underlätta hanteringen av det här problemet tillhandahåller AEM Biblioteksmappar på klientsidan, som gör att du kan lagra koden på klientsidan i databasen, ordna den i kategorier och definiera när och hur varje kodkategori ska skickas till klienten. Klientsidans bibliotekssystem tar sedan hand om att skapa rätt länkar på den slutliga webbsidan för att läsa in rätt kod.

Läs Använda HTML-bibliotek på klientsidan om du vill ha mer information.

Konfigurera redigeringsbeteendet

Du kan konfigurera redigeringsbeteendet för en komponent, inklusive attribut som åtgärder som är tillgängliga för komponenten, egenskaper för redigeraren och avlyssnare som är relaterade till händelser för komponenten. Konfigurationen är gemensam för det beröringsaktiverade och klassiska användargränssnittet, men med vissa specifika skillnader.

Redigeringsbeteendet för en komponent konfigureras genom att lägga till en cq:editConfig-nod av typen cq:EditConfig under komponentnoden (av typen cq:Component) och genom att lägga till specifika egenskaper och underordnade noder.

Konfigurera förhandsvisningsbeteendet

Cookien WCM-läge anges när du växlar till läget Förhandsgranska även när sidan inte uppdateras.

Komponenter med en återgivning som är känslig för WCM-läget måste definieras så att de uppdateras specifikt och sedan baseras på värdet för cookien.

OBSERVERA

I det beröringsaktiverade användargränssnittet används endast värdena EDIT och PREVIEW för cookien WCM-läge.

Skapa och konfigurera en dialogruta

I dialogrutor kan författaren interagera med komponenten. Med en dialogruta kan författare och/eller administratörer redigera innehåll, konfigurera komponenten eller definiera designparametrar (med en designdialogruta)

Gränssnittet för korall och GRENITE

Gränssnittet Coral UI och Granite definierar det moderna AEM.

I Granite-gränssnittet finns ett stort urval av de grundläggande komponenter (widgetar) som behövs för att skapa en dialogruta i redigeringsmiljön. Vid behov kan du utöka den här markeringen och skapa en egen widget.

Mer information finns i:

OBSERVERA

På grund av typen av GRE-komponenter (och skillnader i ExtJS-widgetar) finns det vissa skillnader mellan hur komponenterna interagerar med det beröringsaktiverade gränssnittet och det klassiska användargränssnittet.

Skapa en ny dialogruta

Dialogrutor för det beröringskänsliga användargränssnittet:

  • har namnet cq:dialog.

  • definieras som en nt:unstructured-nod med sling:resourceType-egenskapsuppsättningen.

  • finns under deras cq:Component-nod och bredvid deras komponentdefinition.

  • återges på serversidan (som Sling-komponenter), baserat på deras innehållsstruktur och egenskapen sling:resourceType.

  • använda GRI-ramverket för Granite.

  • innehåller en nodstruktur som beskriver fälten i dialogrutan.

    • dessa noder är nt:unstructured med den obligatoriska egenskapen sling:resourceType.

En exempelnodstruktur kan vara:

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

Att anpassa en dialogruta liknar att utveckla en komponent eftersom dialogrutan i sig är en komponent (d.v.s. markering som återges av ett komponentskript tillsammans med beteende/stil som tillhandahålls av ett klientbibliotek).

Se till exempel:

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

Om en komponent inte har någon dialogruta definierad för det beröringsaktiverade användargränssnittet, används den klassiska användargränssnittsdialogrutan som reserv i ett kompatibilitetslager. Om du vill anpassa en sådan dialogruta måste du anpassa den klassiska användargränssnittsdialogrutan. Se AEM komponenter för det klassiska användargränssnittet.

Anpassa dialogrutefält

OBSERVERA

Se:

Skapa ett nytt fält

Widgetar för det beröringsaktiverade användargränssnittet implementeras som GRE-komponenter.

Om du vill skapa en ny widget som ska användas i en komponentdialogruta för det beröringsaktiverade användargränssnittet måste du skapa en ny GRI-fältkomponent.

OBSERVERA

Mer information om GREND finns i dokumentationen för GRÄNSSNITT för Granite.

Om du ser dialogrutan som en enkel behållare för ett formulärelement kan du även se det primära innehållet i dialogrutan som formulärfält. Om du skapar ett nytt formulärfält måste du skapa en resurstyp; motsvarar att skapa en ny komponent. För att du ska få hjälp med den här uppgiften erbjuder Granite UI en generisk fältkomponent att ärva från (med sling:resourceSuperType):

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

Mer specifikt ger GRE UI ett antal fältkomponenter som är lämpliga att använda i dialogrutor (eller mer allmänt i formulär).

OBSERVERA

Detta skiljer sig från det klassiska användargränssnittet, där widgetar representeras av cq:Widgets-noder, där var och en har en viss xtype för att etablera relationen med sin motsvarande ExtJS-widget. Från en implementeringssynvinkel renderades dessa widgetar på klientsidan av ExtJS-ramverket.

När du har skapat resurstypen kan du skapa en instans av fältet genom att lägga till en ny nod i dialogrutan där egenskapen sling:resourceType refererar till den resurstyp som du just har introducerat.

Skapa ett klientbibliotek för stil och beteende

Om du vill definiera format och beteende för komponenten kan du skapa ett dedikerat klientbibliotek som definierar din anpassade CSS/LESS och JS.

Om du vill att klientbiblioteket endast ska läsas in för komponentdialogrutan (d.v.s. inte ska läsas in för en annan komponent) måste du ställa in egenskapen extraClientlibs**​ **​i dialogrutan till kategorinamnet för det klientbibliotek som du just har skapat. Detta rekommenderas om klientbiblioteket är stort och/eller om fältet är specifikt för den dialogrutan och inte behövs i andra dialogrutor.

Om du vill att klientbiblioteket ska läsas in för alla dialogrutor anger du egenskapen category för klientbiblioteket till cq.authoring.dialog. Det här är kategorinamnet för klientbiblioteket som inkluderas som standard när alla dialogrutor återges. Du vill göra det om klientbiblioteket är litet och/eller fältet är generiskt och kan återanvändas i andra dialogrutor.

Se följande exempel:

  • cqgems/customizingfield/components/colorpicker/clientlibs

Utöka (ärva från) ett fält

Beroende på dina behov kan du antingen:

  • Utöka ett visst GRE-fält efter komponentarv ( sling:resourceSuperType)
  • Utöka en given widget från det underliggande widgetbiblioteket (för Granite-gränssnittet är det korallgränssnitt) genom att följa widgetens biblioteks-API (JS/CSS-arv)

Åtkomst till dialogrutefält

Du kan också använda återgivningsvillkor ( rendercondition) för att styra vem som har åtkomst till specifika flikar/fält i dialogrutan. till exempel:

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

Hantera fälthändelser

Metoden för att hantera händelser i dialogrutefält görs nu med avlyssnare i ett anpassat klientbibliotek. Detta är en ändring från den äldre metoden att ha avlyssnare i innehållsstrukturen.

Lyssnare i ett anpassat klientbibliotek

För att lägga in logik i fältet bör du:

  1. Låt fältet vara markerat med en viss CSS-klass (kroken).
  2. I klientbiblioteket definierar du en JS-avlyssnare som är kopplad till det CSS-klassnamnet (detta garanterar att din anpassade logik endast omfattar fältet och inte påverkar andra fält av samma typ).

För att uppnå detta måste du känna till det underliggande widgetbiblioteket som du vill interagera med. Se Coral UI-dokumentationen för att identifiera vilken händelse du vill reagera på. Detta liknar den process du tidigare använde för att utföra ExtJS: hitta dokumentationssidan för en viss widget och kontrollera sedan informationen om dess händelse-API.

Se följande exempel:

  • cqgems/customizingfield/components/clientlibs/customizingfield

Lyssnare i innehållsstrukturen

I det klassiska användargränssnittet med ExtJS var det vanligt att ha avlyssnare för en viss widget i innehållsstrukturen. Att uppnå samma sak i det beröringskänsliga användargränssnittet skiljer sig från JS-avlyssnarkoden (eller vilken kod som helst) som inte längre är definierad i innehållet.

Innehållsstrukturen beskriver den semantiska strukturen. det ska (måste) inte antyda den underliggande widgetens karaktär. Genom att inte ha JS-kod i innehållsstrukturen kan du ändra implementeringsinformationen utan att behöva ändra innehållsstrukturen. Du kan med andra ord ändra widgetbiblioteket utan att behöva ändra innehållsstrukturen.

Dialogrutans tillgänglighet identifieras

Om du har ett anpassat JavaScript som bara behöver köras när dialogrutan är tillgänglig och klar bör du avlyssna händelsen dialog-ready.

Den här händelsen utlöses när dialogrutan läses in (eller läses in igen) och är klar att användas, vilket innebär när det finns en ändring (skapa/uppdatera) i DOM för dialogrutan.

dialog-ready kan användas för att koppla i anpassad JavaScript-kod som utför anpassningar av fälten i en dialogruta eller liknande åtgärder.

Fältvalidering

Obligatoriskt fält

Om du vill markera ett givet fält som obligatoriskt anger du följande egenskap på innehållsnoden i fältet:

  • Namn: required
  • Typ: Boolean

Se följande exempel:

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

Fältvalidering (GRÄNSSNITT)

Fältvalidering i GRA-gränssnittet och GRA-gränssnittskomponenterna (motsvarar widgetar) görs med hjälp av API:t foundation-validation. Mer information finns i dokumentationen för foundation-valdiation Granite.

Se till exempel:

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

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

Skapa och konfigurera en designdialogruta

Dialogrutan Design visas när en komponent har designdetaljer som kan redigeras i designläge.

Definitionen liknar den i en dialogruta som används för att redigera innehåll, men skillnaden är att den är definierad som en nod:

  • Nodnamn: cq:design_dialog
  • Typ: nt:unstructured

Skapa och konfigurera en Inplace-redigerare

Med en infogningsredigerare kan användaren redigera innehåll direkt i styckeflödet utan att behöva öppna en dialogruta. Standardkomponenterna Text och Title har till exempel båda en infogad redigerare.

En infogningsredigerare är inte nödvändig/meningsfull för varje komponenttyp.

Mer information finns i Utöka sidredigering - Lägg till ny infogningsredigerare.

Anpassa komponentverktygsfältet

Verktygsfältet Komponent ger användaren åtkomst till en rad åtgärder för komponenten, som att redigera, konfigurera, kopiera och ta bort.

Mer information finns i Utöka sidredigering - Lägg till ny åtgärd i ett komponentverktygsfält.

Konfigurera en komponent för referenslinjen (lånad/lånad)

Om den nya komponenten refererar till innehåll från andra sidor kan du överväga om du vill att den ska påverka avsnitten Lånat innehåll och Lånat innehåll i Referenser Rail.

AEM markerar bara komponenten Reference. Om du vill lägga till din komponent måste du konfigurera OSGi-paketet WCM Authoring Content Reference Configuration.

Skapa en ny post i definitionen som anger komponenten tillsammans med den egenskap som ska kontrolleras. Till exempel:

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

OBSERVERA

När du arbetar med AEM finns det flera sätt att hantera konfigurationsinställningarna för sådana tjänster. Mer information och rekommenderade tillvägagångssätt finns i Konfigurera OSGi.

Aktivera och lägga till komponenten i styckesystemet

När komponenten har utvecklats måste den aktiveras för användning i ett lämpligt styckesystem, så att den kan användas på de sidor som krävs.

Detta kan göras antingen genom att:

Konfigurera ett styckesystem så att en komponentinstans skapas när en resurs dras

AEM erbjuder möjlighet att konfigurera ett styckesystem på sidan så att en instans av den nya komponenten skapas automatiskt när en användare drar en (lämplig) resurs till en instans av sidan (i stället för att alltid behöva dra en tom komponent till sidan).

Detta beteende och den nödvändiga relationen mellan resurser och komponenter kan konfigureras:

  1. Under styckedefinitionen för siddesignen. Till exempel:

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

    Skapa en ny nod:

    • Namn: cq:authoring
    • Typ: nt:unstructured
  2. Skapa en ny nod under detta för att innehålla alla mappningar av resurs-till-komponent:

    • Namn: assetToComponentMapping
    • Typ: nt:unstructured
  3. Skapa en nod för varje resurs-till-komponent-mappning:

    • Namn: text, Det rekommenderas att namnet anger tillgången och den relaterade komponenttypen. till exempel bild
    • Typ: nt:unstructured

    Var och en med följande egenskaper:

    • assetGroup:

      • Typ: String
      • Värde: den grupp som den relaterade tillgången tillhör, till exempel media
    • assetMimetype:

      • Typ: String
      • Värde: Mime-typen för den relaterade tillgången. till exempel image/*
    • droptarget:

      • Typ: String
      • Värde: släppmålet, till exempel image
    • resourceType:

      • Typ: String
      • Värde: den tillhörande komponentresursen, till exempel foundation/components/image
    • type:

      • Typ: String
      • Värde: typen, till exempel Images

Exempel:

  • /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

KOD PÅ GITHUB

Koden för den här sidan finns på GitHub

OBSERVERA

Det automatiska skapandet av komponentinstanser kan nu enkelt konfigureras i användargränssnittet när du använder kärnkomponenter och redigerbara mallar. Se Skapa sidmallar för mer information om hur du definierar vilka komponenter som automatiskt associeras med de angivna medietyperna.

Använda AEM Brackets Extension

AEM Brackets Extension ger ett smidigt arbetsflöde för att redigera AEM komponenter och klientbibliotek. Den baseras på kodredigeraren Brackets.

Tillägget:

  • Förenklar synkronisering (ingen Maven eller filvalv krävs) för att öka utvecklarens effektivitet och även hjälpa gränssnittsutvecklare med begränsade AEM att delta i projekt.
  • Ger stöd för HTML, mallspråket som är utformat för att förenkla komponentutveckling och öka säkerheten.
OBSERVERA

Hakparenteser är den rekommenderade mekanismen för att skapa komponenter. Den ersätter funktionaliteten CRXDE Lite - Skapa komponent, som har utformats för det klassiska användargränssnittet.

Migrera från en klassisk komponent

När du migrerar en komponent som har utformats för användning med det klassiska användargränssnittet till en komponent som kan användas med det beröringsaktiverade användargränssnittet (antingen enbart eller tillsammans) bör du tänka på följande:

  • HTL

    • Det är inte obligatoriskt att använda HTML, men om komponenten behöver uppdateras är det ett bra tillfälle att överväga att migrera från JSP till HTML.
  • Komponenter

  • Dialogrutor

    • Du måste skapa en ny dialogruta för användning i det beröringsaktiverade användargränssnittet. Av kompatibilitetsskäl kan emellertid det beröringsaktiverade användargränssnittet använda definitionen för en klassisk användargränssnittsdialogruta när ingen dialogruta har definierats för det beröringsaktiverade användargränssnittet.
    • AEM Moderniseringsverktygen är till hjälp när du ska utöka befintliga komponenter.
    • Genom att mappa ExtJS till Granite UI- komponenter får du en bekväm översikt över ExtJS-xtyper och nodtyper med motsvarande Granite UI-resurstyper.
    • Mer information om hur du anpassar fält finns i AEM Gems-sessionen på Anpassa dialogrutefält.
    • Migrera från typer till Bevilja gränssnittsvalidering
    • Mer information om hur du använder JS-avlyssnare finns i Hantera fälthändelser och AEM Gems-sessionen på Anpassa dialogrutefält.

Migrera cq:avlyssnarkod

Om du migrerar ett projekt som är utformat för det klassiska användargränssnittet kan cq:listener-koden (och komponentrelaterade klientlistor) använda funktioner som är specifika för det klassiska användargränssnittet (till exempel CQ.wcm.*). För migreringen måste du uppdatera sådan kod med motsvarande objekt/funktioner i det beröringsaktiverade användargränssnittet.

Om ditt projekt ska migreras helt till det beröringskänsliga användargränssnittet måste du ersätta den koden för att använda de objekt och funktioner som är relevanta för det beröringskänsliga användargränssnittet.

Om ditt projekt måste tillgodose både det klassiska användargränssnittet och det beröringsaktiverade användargränssnittet under migreringsperioden (det vanliga scenariot) måste du implementera en switch för att särskilja den separata koden som refererar till lämpliga objekt.

Den här switchmekanismen kan implementeras som:

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

Dokumentera komponenten

Som utvecklare vill du ha enkel åtkomst till komponentdokumentation så att du snabbt kan förstå:

  • Beskrivning
  • Avsedd användning
  • Innehållsstruktur och egenskaper
  • Exponerade API:er och tilläggspunkter
  • osv.

Därför är det ganska enkelt att göra befintliga dokumentationsmarkeringar tillgängliga i själva komponenten.

Allt du behöver göra är att placera en README.md-fil i komponentstrukturen. Den här markeringen visas sedan i komponentkonsolen.

chlimage_1-7

Den kod som stöds är densamma som för innehållsfragment.

På denna sida