Utveckla Adobe Experience Manager-komponenter (AEM) (Classic UI)

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

Struktur

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 vara bra att känna till dem när du ärver från befintliga komponenter.

JSP-skript

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

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

Därför global.jsp ska inkluderas 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

Funktion för global.jsp, använda API:er och 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 - Designer-objektet för att hämta designinformation ( resourceResolver.adaptTo(Designer.class);).
  • currentDesign - Den adresserade resursens design.
  • currentStyle - Den adresserade resursens format.

Åtkomst till innehåll

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

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

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 den här 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

Komponenten behöver en dialogruta där författare kan lägga till och konfigurera innehållet.

Se AEM - Grunderna för mer information.

Konfigurera redigeringsbeteendet

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

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

Använda xtypes för ExtJS-widgetar

Se Använda xtypes för mer information.

Utveckla nya komponenter

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)

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 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 fält i dialogrutan

     • cq:dialog - dialogruta för det beröringsaktiverade grä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 ett extra fält i dialogrutan och sedan uppdatera .jsp för att bearbeta indata som gjorts där.

   OBSERVERA

   En komponent för:

   • Pekaktiverat användargränssnitt använder Granit komponenter
   • Klassiskt användargränssnitt använder ExtJS-widgetar
   OBSERVERA

   En dialogruta som definieras för det klassiska användargränssnittet används 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 det vara bra att 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 grä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> (till exempel /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 stycke av den typ som du just skapade för att säkerställa att komponenten fungerar som den ska.

Lägga till en ny komponent i styckesystemet (designläge)

När komponenten har utvecklats lägger du till den i styckesystemet, vilket gör det möjligt för författare att 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

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)
• Och 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

Utöka befintlig textimage-komponent

Om du vill skapa komponenten använder du standardtextimagekomponenten som bas och ändrar den. Du lagrar den nya komponenten i Geometrixx AEM exempelprogrammet för WCM.

1. Kopiera standardkomponenten för textimage 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.)

   

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
   OBSERVERA

   Dialogrutans definition beror på 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:

   

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 tillägget du gör ä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 banegenskap 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 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:

   

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

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

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

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

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

Om du vill inaktivera den här funktionen använder du standardbildkomponenten som bas och ändrar den. Du lagrar den nya komponenten 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.

   

2. Redigera komponentmetadata:

   • Ange jcr:title till Image (Extended)

3. Navigera till /apps/geometrixx/components/image/dialog/items/image.

4. Lägg till en egenskap:

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

   

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 som du skapade.

   Ursprunglig bildkomponent:

   

   Din nya bildkomponent:

   

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

Resurser för Business.Adobe.com

Content Insights Auto Form Fill Targeted Content Personalized Communications Mobile Forms Digital Signage