Utveckla AEM (Classic UI) developing-aem-components-classic-ui

CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

I det klassiska användargränssnittet används ExtJS för att skapa widgetar som ger komponenternas utseende och känsla. På grund av dessa widgetars karaktär finns det vissa skillnader mellan hur komponenterna interagerar med det klassiska användargränssnittet och pekaktiverat användargränssnitt.

NOTE
Många aspekter av komponentutveckling är gemensamma för både det klassiska användargränssnittet och det beröringskänsliga användargränssnittet, så du måste läsa AEM - Grunderna före på den här sidan, som handlar om det klassiska användargränssnittet.
NOTE
Även om både HTML (HTML Template Language) och JSP kan användas för att utveckla komponenter för det klassiska användargränssnittet, illustrerar den här sidan utvecklingen med JSP. Detta beror enbart på historiken med att använda JSP i det klassiska användargränssnittet.
HTML är nu det rekommenderade skriptspråket för AEM. Se HTL och Utveckla AEM för att jämföra metoder.

Struktur structure

En komponents grundläggande struktur beskrivs på sidan AEM - Grunderna, som använder både pekgränssnittet och det klassiska gränssnittet. Även om du inte behöver använda inställningarna för det beröringsaktiverade användargränssnittet i den nya komponenten kan det hjälpa att vara medveten om dem när du ärver från befintliga komponenter.

JSP-skript jsp-scripts

JSP-skript eller -servrar kan användas för att återge komponenter. Enligt reglerna för behandling av begäranden i Sling är standardskriptets namn:

<*componentname*>.jsp

global.jsp global-jsp

JSP-skriptfilen global.jsp används för att ge snabb åtkomst till specifika objekt (t.ex. för att komma åt innehåll) till alla JSP-skriptfiler som används för att återge en komponent.

Därför global.jsp bör ingå i alla komponentåtergivnings-JSP-skript där ett eller flera av objekten i global.jsp används.

Standardplatsen global.jsp är:

/libs/foundation/global.jsp

NOTE
Banan /libs/wcm/global.jspsom användes av versionerna CQ 5.3 och tidigare är nu föråldrad.

Funktion för global.jsp, använda API:er och taglibs function-of-global-jsp-used-apis-and-taglibs

Följande visar de viktigaste objekten som finns i standardinställningarna global.jsp:

Sammanfattning:

  • <cq:defineObjects />

    • slingRequest - Det omslutna objektet för begäran ( SlingHttpServletRequest).
    • slingResponse - det figursatta svarsobjektet ( SlingHttpServletResponse).
    • resource - Sling Resource-objektet ( slingRequest.getResource();).
    • resourceResolver - Sling Resource Resolver-objektet ( slingRequest.getResoucreResolver();).
    • currentNode - Den matchade JCR-noden för begäran.
    • log - Standardloggaren ().
    • sling - Handledaren i Sling-manuset.
    • properties - Den adresserade resursens egenskaper ( resource.adaptTo(ValueMap.class);).
    • pageProperties - Egenskaperna för sidan för den adresserade resursen.
    • pageManager - Sidhanteraren för åtkomst AEM innehållssidor ( resourceResolver.adaptTo(PageManager.class);).
    • component - Komponentobjektet för den aktuella AEM.
    • designer - Designerobjektet för att hämta designinformation ( resourceResolver.adaptTo(Designer.class);).
    • currentDesign - Den adresserade resursens design.
    • currentStyle - Den adresserade resursens format.

Åtkomst till innehåll accessing-content

Det finns tre sätt att komma åt innehåll i AEM WCM:

  • Via egenskapsobjektet som introducerades i global.jsp:

    Egenskapsobjektet är en instans av en ValueMap (se Sling API) och innehåller alla egenskaper för den aktuella resursen.

    Exempel: String pageTitle = properties.get("jcr:title", "no title"); används i återgivningsskriptet för en sidkomponent.

    Exempel: String paragraphTitle = properties.get("jcr:title", "no title"); används i återgivningsskriptet för en standardstyckekomponent.

  • Via currentPage objekt som introducerats i global.jsp:

    The currentPage objektet är en instans av en sida (se AEM API). Klassen page innehåller vissa metoder för att komma åt innehåll.

    Exempel: String pageTitle = currentPage.getTitle();

  • Via currentNode objekt som introducerats i global.jsp:

    The currentNode objektet är en instans av en nod (se JCR API). Egenskaperna för en nod kan nås av getProperty() -metod.

    Exempel: String pageTitle = currentNode.getProperty("jcr:title");

JSP-taggbibliotek jsp-tag-libraries

CQ- och Sling-taggbiblioteken ger dig tillgång till specifika funktioner som du kan använda i JSP-skriptet för dina mallar och komponenter.

Mer information finns i dokumentet Taggbibliotek.

Använda HTML-bibliotek på klientsidan using-client-side-html-libraries

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.

AEM tillhandahåller Biblioteksmappar på klientsidan, som gör att du kan lagra din klientkod 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.

Se dokumentet Använda HTML-bibliotek på klientsidan för mer information.

Dialog dialog

Komponenten måste ha en dialogruta där författare kan lägga till och konfigurera innehållet.

Se AEM - Grunderna för mer information.

Konfigurera redigeringsbeteendet configuring-the-edit-behavior

Du kan konfigurera redigeringsbeteendet för en komponent. Detta inkluderar attribut som åtgärder som är tillgängliga för komponenten, egenskaper för infogningsredigeraren och avlyssnare som relaterar till händelser för komponenten. Konfigurationen är gemensam för både beröringsaktiverade och klassiska användargränssnitt, men med vissa, specifika skillnader.

The redigeringsbeteendet för en komponent är konfigurerat genom att lägga till en cq:editConfig nod av typen cq:EditConfig nedanför komponentnoden (av typen cq:Component) och genom att lägga till specifika egenskaper och underordnade noder.

Använda och utöka ExtJS-widgetar using-and-extending-extjs-widgets

Se Använda och utöka ExtJS-widgetar för mer information.

Använda xtypes för ExtJS-widgetar using-xtypes-for-extjs-widgets

Se Använda xtypes för mer information.

Utveckla nya komponenter developing-new-components

I det här avsnittet beskrivs hur du skapar egna komponenter och lägger till dem i styckesystemet.

Ett snabbt sätt att komma igång är att kopiera en befintlig komponent och sedan göra de ändringar du vill.

Ett exempel på hur du utvecklar en komponent beskrivs i detalj i Utöka text- och bildkomponenten - ett exempel.

Utveckla en ny komponent (Anpassa befintlig komponent) develop-a-new-component-adapt-existing-component

Om du vill utveckla nya komponenter för AEM baserat på en befintlig komponent kan du kopiera komponenten, skapa en javascript-fil för den nya komponenten och lagra den på en plats som är tillgänglig för AEM (se även Anpassa komponenter och andra element):

  1. Skapa en ny komponentmapp i CRXDE Lite:

    / apps/<myProject>/components/<myComponent>

    Återskapa nodstrukturen som i libs och kopiera sedan definitionen av en befintlig komponent, till exempel komponenten Text. Så här anpassar du komponentkopian Text:

    • från /libs/foundation/components/text
    • till /apps/myProject/components/text
  2. Ändra jcr:title för att återspegla dess nya namn.

  3. Öppna den nya komponentmappen och gör de ändringar du behöver. Ta även bort eventuell överflödig information i mappen.

    Du kan göra ändringar som:

    • lägga till ett nytt fält i dialogrutan

      • cq:dialog - dialogruta för det beröringsaktiverade användargränssnittet
      • dialog - dialogruta för det klassiska användargränssnittet
    • ersätta .jsp fil (namnge den efter den nya komponenten)

    • eller helt och hållet omarbeta hela komponenten om du vill

    Om du till exempel kopierar standardkomponenten för text kan du lägga till ytterligare ett fält i dialogrutan och sedan uppdatera .jsp för att bearbeta indata som gjorts där.

    note note
    NOTE
    En komponent för:
    • Pekaktiverat användargränssnitt använder Granit komponenter
    • Klassiskt användargränssnitt använder ExtJS-widgetar
    note note
    NOTE
    En dialogruta som definieras för det klassiska användargränssnittet fungerar i det beröringsaktiverade användargränssnittet.
    En dialogruta som definierats för det beröringsaktiverade användargränssnittet fungerar inte i det klassiska användargränssnittet.
    Beroende på vilken instans- och redigeringsmiljö du använder kan du definiera båda typerna av dialogrutor för komponenten.
  4. En av följande noder bör finnas och vara korrekt initierad för att den nya komponenten ska visas:

    • cq:dialog - dialogruta för det beröringsaktiverade användargränssnittet
    • dialog - dialogruta för det klassiska användargränssnittet
    • cq:editConfig - hur komponenterna fungerar i redigeringsmiljön (t.ex. dra och släpp)
    • design_dialog - dialogruta för designläge (endast klassiskt användargränssnitt)
  5. Aktivera den nya komponenten i styckesystemet genom att antingen:

    • använda CRXDE Lite för att lägga till värdet <path-to-component> (t.ex. /apps/geometrixx/components/myComponent) till nodens egenskapskomponenter /etc/designs/geometrixx/jcr:content/contentpage/par
    • följa instruktionerna i Lägga till nya komponenter i styckesystem
  6. I AEM WCM öppnar du en sida på webbplatsen och infogar ett nytt stycke av den typ som du just skapade för att säkerställa att komponenten fungerar som den ska.

NOTE
Om du vill se tidsstatistik för sidinläsning kan du använda Ctrl-Skift-U med ?debugClientLibs=true anges i URL:en.

Lägga till en ny komponent i styckesystemet (designläge) adding-a-new-component-to-the-paragraph-system-design-mode

När komponenten har utvecklats lägger du till den i styckesystemet, vilket gör att författare kan markera och använda komponenten när en sida redigeras.

  1. Öppna en sida i redigeringsmiljön som t.ex. använder styckesystemet <contentPath>/Test.html.

  2. Växla till designläge genom att antingen:

    • lägga till ?wcmmode=design till slutet av URL:en och till exempel få åtkomst igen:

      <contextPath>/ Test.html?wcmmode=design

    • klicka på Design i Sidekick

    Du är nu i designläge och kan redigera styckesystemet.

  3. Klicka på Redigera.

    En lista över komponenter som hör till styckesystemet visas. Din nya komponent visas också.

    Komponenterna kan aktiveras (eller inaktiveras) för att bestämma vilka som ska erbjudas författaren när en sida redigeras.

  4. Aktivera komponenten och återgå sedan till normalt redigeringsläge för att bekräfta att den är tillgänglig för användning.

Utöka text- och bildkomponenten - ett exempel extending-the-text-and-image-component-an-example

I det här avsnittet finns ett exempel på hur du kan utöka den ofta använda text- och bildstandardkomponenten med en konfigurerbar bildplaceringsfunktion.

Tillägget till text- och bildkomponenten gör att redigerare kan använda alla befintliga funktioner i komponenten plus ett extra alternativ för att ange bildens placering:

  • Till vänster om texten (nuvarande och ny standard)
  • samt till höger

När du har utökat den här komponenten kan du konfigurera bildplaceringen via komponentens dialogruta.

Följande tekniker beskrivs i denna övning:

  • Kopiera befintlig komponentnod och ändra dess metadata
  • Ändra komponentens dialogruta, inklusive arv av widgetar från överordnade dialogrutor
  • Ändra komponentens skript för att implementera den nya funktionen
NOTE
Det här exemplet riktar sig till det klassiska användargränssnittet.
NOTE
Det här exemplet baseras på exempelinnehållet i Geometrixx, som inte längre levereras med AEM, som har ersatts av We.Retail. Se dokumentet Implementering av referens för Vi.butik för att hämta och installera Geometrixx.

Utöka befintlig textimage-komponent extending-the-existing-textimage-component

För att skapa den nya komponenten använder vi standardkomponenten för textimage som bas och ändrar den. Vi lagrar den nya komponenten i exempelprogrammet för Geometrixx AEM WCM.

  1. Kopiera standardtextimagekomponenten från /libs/foundation/components/textimage till Geometrixx komponentmapp, /apps/geometrixx/components, med textimage som målnodnamn. (Kopiera komponenten genom att navigera till komponenten, högerklicka och välja Kopiera och bläddra till målkatalogen.)

    chlimage_1-59

  2. Om du vill att det här exemplet ska vara enkelt navigerar du till komponenten som du kopierade och tar bort alla undernoder till den nya textimage-noden förutom följande:

    • dialogdefinition: textimage/dialog
    • komponentskript: textimage/textimage.jsp
    • redigera konfigurationsnod (tillåter dra och släpp av resurser): textimage/cq:editConfig
    note note
    NOTE
    Dialogrutedefinitionen är beroende av användargränssnittet:
    • Pekaktiverat användargränssnitt: textimage/cq:dialog
    • Klassiskt användargränssnitt: textimage/dialog
  3. Redigera komponentmetadata:

    • Komponentnamn

      • Ange jcr:description till Text Image Component (Extended)
      • Ange jcr:title till Text Image (Extended)
    • Grupp, där komponenten är listad i sidosparken (lämna som den är)

      • Lämna componentGroup ange till General
    • Överordnad komponent för den nya komponenten (standardkomponenten för textimage)

      • Ange sling:resourceSuperType till foundation/components/textimage

    Efter det här steget ser komponentnoden ut så här:

    chlimage_1-60

  4. Ändra sling:resourceType egenskap för redigeringskonfigurationsnoden för bilden (egenskap: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) till geometrixx/components/textimage.

    På så sätt, när en bild släpps till komponenten på sidan, visas sling:resourceType egenskapen för den utökade textimage-komponenten är inställd på: geometrixx/components/textimage.

  5. Ändra komponentens dialogruta så att den innehåller det nya alternativet. Den nya komponenten ärver de delar av dialogrutan som är desamma som i originalet. Det enda vi kan göra är att utöka Avancerat flik, lägga till Bildposition listruta, med alternativ Vänster och Höger:

    • Lämna textimage/dialogegenskaperna ändras inte.

    Anteckna hur textimage/dialog/items har fyra undernoder, tab1 till tab4, som representerar de fyra flikarna i textimagedialogrutan.

    • För de första två flikarna (tab1 och tab2):

      • Ändra xtype till cqinclude (för att ärva från standardkomponenten).
      • Lägga till en sökvägsegenskap med värden /libs/foundation/components/textimage/dialog/items/tab1.infinity.jsonoch /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respektive.
      • Ta bort alla andra egenskaper eller undernoder.
    • För flik3:

      • Lämna egenskaperna och delnoderna utan ändringar

      • Lägg till en ny fältdefinition i tab3/items, nodposition för typ cq:Widget

      • Ange följande egenskaper (av typen String) för den nya tab3/items/positionnod:

        • name: ./imagePosition
        • xtype: selection
        • fieldLabel: Image Position
        • type: select
      • Lägg till undernod position/options av typen cq:WidgetCollection som representerar de två alternativen för bildplacering och skapar under den två noder, o1 och o2 av typen nt:unstructured.

      • För nod position/options/o1 ange egenskaperna: text till Left och value till left.

      • För nod position/options/o2 ange egenskaperna: text till Right och value till right.

    • Ta bort tabb4.

    Bildpositionen bevaras i innehållet som imagePositionegenskap för noden som representerar textimage stycke. Efter dessa steg ser komponentdialogrutan ut så här:

    chlimage_1-61

  6. Utöka komponentskriptet, textimage.jsp, med extra hantering av den nya parametern:

    code language-xml
    Image image = new Image(resource, "image");
    
    if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
         image.loadStyleData(currentStyle);
    

    Vi kommer att ersätta det framhävda kodfragmentet %><div class="image"><% med ny kod som genererar en egen stil för den här taggen.

    code language-xml
    // todo: add new CSS class for the 'right image' instead of using
    // the style attribute
    String style="";
         if (properties.get("imagePosition", "left").equals("right")) {
              style = "style=\"float:right\"";
         }
         %><div <%= style %> class="image"><%
    
  7. Spara komponenten i databasen. Komponenten är redo att testas.

Kontrollera den nya komponenten checking-the-new-component

När komponenten har utvecklats kan du lägga till den i styckesystemet, vilket gör att författare kan markera och använda komponenten när de redigerar en sida. Med de här stegen kan du testa komponenten.

  1. Öppna en sida i en Geometrixx, t.ex. engelska/företag.
  2. Växla till designläge genom att klicka på Design i Sidekick.
  3. Redigera styckesystemets design genom att klicka på Redigera i styckesystemet mitt på sidan. En lista över komponenter som kan placeras i styckesystemet visas, och den bör innehålla den nyutvecklade komponenten, Text Image (Extended). Aktivera det för styckesystemet genom att markera det och klicka på OK.
  4. Växla tillbaka till redigeringsläget.
  5. Lägg till stycket Textbild (utökad) i styckesystemet, initiera text och bild med exempelinnehåll. Spara ändringarna.
  6. Öppna dialogrutan för text- och bildstycket, ändra bildpositionen på fliken Avancerat till höger och klicka på OK för att spara ändringarna.
  7. Stycket återges med bilden till höger.
  8. Komponenten är nu klar att användas.

Komponenten lagrar innehållet i ett stycke på företagssidan.

Inaktivera överförbarhet för bildkomponenten disable-upload-capability-of-the-image-component

Om du vill inaktivera den här funktionen använder vi standardbildkomponenten som grund och ändrar den. Den nya komponenten lagras i exempelprogrammet för Geometrixx.

  1. Kopiera standardbildkomponenten från /libs/foundation/components/image till Geometrixx komponentmapp, /apps/geometrixx/components, med bilden som målnodnamn.

    chlimage_1-62

  2. Redigera komponentmetadata:

    • Ange jcr:title till Image (Extended)
  3. Navigera till /apps/geometrixx/components/image/dialog/items/image.

  4. Lägg till en ny egenskap:

    • Namn: allowUpload
    • Typ: String
    • Värde: false

    chlimage_1-63

  5. Klicka Spara alla. Komponenten är redo att testas.

  6. Öppna en sida i en Geometrixx, t.ex. engelska/företag.

  7. Växla till designläge och aktivera Bild (Extended).

  8. Växla tillbaka till redigeringsläget och lägg till det i styckesystemet. På nästa bild ser du skillnaderna mellan den ursprungliga bildkomponenten och den du just skapade.

    Ursprunglig bildkomponent:

    chlimage_1-64

    Din nya bildkomponent:

    chlimage_1-65

  9. Komponenten är nu klar att användas.

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e