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 så att det nya namnet återspeglas.

Ö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 användargränssnittet
  • dialog - dialogruta för det klassiska användargränssnittet

• ersätta filen .jsp (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 användargränssnittet
• dialog - dialogruta för det klassiska användargränssnittet
• cq:editConfig - hur komponenter fungerar i redigeringsmiljön (till exempel 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änder CRXDE Lite för att lägga till värdet <path-to-component> (till exempel /apps/geometrixx/components/myComponent) i egenskapskomponenterna för noden /etc/designs/geometrixx/jcr:content/contentpage/par
• följer 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.

Gå till en sida i redigeringsmiljön som använder styckesystemet, till exempel <contentPath>/Test.html.

Växla till designläge genom att antingen:

• lägger till ?wcmmode=design i slutet av URL:en och försöker komma åt igen, till exempel:

  <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 standardtextimagekomponenten från /libs/foundation/components/textimage till komponentmappen för Geometrixx, /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 inställt på 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 egenskapen sling:resourceType 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, ställs egenskapen sling:resourceType för den utökade textimagekomponenten in 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 du kan göra är att utöka fliken Avancerat och lägga till en listruta för Bildposition med alternativen Vänster och Höger:

• Ändra inte egenskaperna för textimage/dialog.

Observera 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ägg till en sökvägsegenskap med värdena /libs/foundation/components/textimage/dialog/items/tab1.infinity.json respektive /libs/foundation/components/textimage/dialog/items/tab2.infinity.json.
  • 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 av typen cq:Widget

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

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • Lägg till undernoden position/options av typen cq:WidgetCollection som representerar de två alternativen för bildplacering, och under den skapas två noder, o1 och o2 av typen nt:unstructured.

  • För noden position/options/o1 anger du egenskaperna: text till Left och value till left.

  • För noden position/options/o2 anger du egenskaperna: text till Right och value till right.

• Ta bort tabb4.

Bildpositionen bevaras i innehållet som egenskapen imagePosition för noden som representerar stycket textimage. 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 anpassad 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 image 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 på 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.