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.
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.
Ä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.
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 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
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
Banan /libs/wcm/global.jsp
som användes av versionerna CQ 5.3 och tidigare är nu föråldrad.
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.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");
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.
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.
Komponenten behöver en dialogruta där författare kan lägga till och konfigurera innehållet.
Se AEM - Grunderna för mer information.
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.
Se Använda och utöka ExtJS-widgetar för mer information.
Se Använda xtypes för mer information.
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.
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):
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:
/libs/foundation/components/text
/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änssnittetdialog
- dialogruta för det klassiska användargränssnittetersä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 komponent för:
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.
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änssnittetdialog
- dialogruta för det klassiska användargränssnittetcq: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:
<path-to-component>
(till exempel /apps/geometrixx/components/myComponent
) till nodens egenskapskomponenter /etc/designs/geometrixx/jcr:content/contentpage/par
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.
Om du vill se tidsstatistik för sidinläsning kan du använda Ctrl-Skift-U med ?debugClientLibs=true
anges i URL:en.
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.
Ö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.
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:
När du har utökat den här komponenten kan du konfigurera bildplaceringen via komponentens dialogruta.
Följande tekniker beskrivs i denna övning:
Det här exemplet riktar sig till det klassiska användargränssnittet.
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.
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.
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:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
Dialogrutans definition beror på användargränssnittet:
textimage/cq:dialog
textimage/dialog
Redigera komponentmetadata:
Komponentnamn
jcr:description
till Text Image Component (Extended)
jcr:title
till Text Image (Extended)
Grupp, där komponenten är listad i sidosparken (lämna som den är)
componentGroup
ange till General
Överordnad komponent för den nya komponenten (standardkomponenten för textimage)
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:
textimage/dialog
egenskaperna ä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):
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
och /libs/foundation/components/textimage/dialog/items/tab2.infinity.json
, respektiveFö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/position
nod:
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 imagePosition
egenskap 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.
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.
Komponenten lagrar innehållet i ett stycke på företagssidan.
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.
Kopiera standardbildkomponenten från /libs/foundation/components/image
till Geometrixx komponentmapp, /apps/geometrixx/components
, med bilden som målnodnamn.
Redigera komponentmetadata:
Image (Extended)
Navigera till /apps/geometrixx/components/image/dialog/items/image
.
Lägg till en egenskap:
allowUpload
String
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.