Utveckla Adobe Experience Manager-komponenter (AEM) (Classic UI) developing-aem-components-classic-ui

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

Ändra jcr:title för att återspegla dess nya namn.

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

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)

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

I AEM WCM öppnar du en sida på webbplatsen och infogar ett stycke av den typ som du skapade för att säkerställa att komponenten fungerar som den ska.

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

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.

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.

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

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

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

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:

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

Ä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:

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"><%

Spara komponenten i databasen. Komponenten är redo att testas.

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

Redigera komponentmetadata:

• Ange jcr:title till Image (Extended)

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

Lägg till en egenskap:

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

Klicka Spara alla. Komponenten är redo att testas.

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

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

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:

Komponenten är nu klar att användas.