Utöka resursredigeraren extending-asset-editor
Resursredigeraren är den sida som öppnas när användaren klickar på en resurs som hittas via Resursresurs, så att användaren kan redigera sådana aspekter av resursen som metadata, miniatyrbilder, rubrik och taggar.
Konfigurationen av redigeraren med de fördefinierade redigeringskomponenterna beskrivs i Skapa och konfigurera en resursredigeringssida.
Förutom att använda befintliga redigeringskomponenter kan Adobe Experience Manager-utvecklare även skapa egna komponenter.
Skapa en resursredigeringsmall creating-an-asset-editor-template
Följande exempelsidor finns i Geometrixx:
- Exempelsida för Geometrixx:
/content/geometrixx/en/press/asseteditor.html
- Exempelmall:
/apps/geometrixx/templates/asseteditor
- Exempelsidkomponent:
/apps/geometrixx/components/asseteditor
Konfigurera Clientlib configuring-clientlib
Assets-komponenter använder ett tillägg för WCM-klienten för redigering. Klientlibs läses vanligtvis in i init.jsp
.
Jämfört med standardinläsningen av klientlib (i kärnans init.jsp
) måste en Assets-mall ha följande:
-
Mallen måste innehålla klientlib
cq.dam.edit
(i stället förcq.wcm.edit
). -
Clientlib måste också inkluderas i inaktiverat WCM-läge (t.ex. läsas in vid publicering) för att kunna återge predikat, åtgärder och linser.
I de flesta fall bör kopieringen av det befintliga exemplet init.jsp
(/apps/geometrixx/components/asseteditor/init.jsp
) uppfylla dessa behov.
Konfigurera JS-åtgärder configuring-js-actions
Vissa Assets-komponenter kräver JS-funktioner som definierats i component.js
. Kopiera den här filen till komponentkatalogen och länka den.
<script type="text/javascript" src="<%= component.getPath() %>/component.js"></script>
Exemplet läser in den här JavaScript-källan i head.jsp
(/apps/geometrixx/components/asseteditor/head.jsp
).
Ytterligare formatmallar additional-style-sheets
Vissa Assets-komponenter använder widgetbiblioteket. För att kunna återges korrekt i innehållskontexten måste ytterligare en formatmall läsas in. Kodåtgärdskomponenten kräver en till.
<link href="/etc/designs/geometrixx/ui.widgets.css" rel="stylesheet" type="text/css">
Geometrixx formatmall geometrixx-style-sheet
Komponenterna för exempelsidan kräver att alla väljare börjar med .asseteditor
av static.css
(/etc/designs/geometrixx/static.css
). Bästa praxis: Kopiera alla .asseteditor
-väljare till formatmallen och justera reglerna efter behov.
FormChooser: Justeringar för resurser som eventuellt lästs in formchooser-adjustments-for-eventually-loaded-resources
Resursredigeraren använder formulärväljaren, som gör att du kan redigera resurser - i det här fallet resurser - på samma formulärsida genom att lägga till en formulärväljare och formulärsökvägen till resursens URL.
Till exempel:
- Oformaterad formulärsida: http://localhost:4502/content/geometrixx/en/press/asseteditor.html
- Resursen har lästs in på formulärsidan: http://localhost:4502/content/dam/geometrixx/icons/diamond.png.form.html/content/geometrixx/en/press/asseteditor.html
Exempelhandtagen i head.jsp
(/apps/geometrixx/components/asseteditor/head.jsp
) gör följande:
- De identifierar om en resurs har lästs in eller om det rena formuläret måste visas.
- Om en resurs läses in kan de inaktivera WCM-läget som parsys bara redigeras på en vanlig formulärsida.
- Om en resurs läses in använder de dess titel i stället för den på formulärsidan.
List<Resource> resources = FormsHelper.getFormEditResources(slingRequest);
if (resources != null) {
if (resources.size() == 1) {
// single resource
FormsHelper.setFormLoadResource(slingRequest, resources.get(0));
} else if (resources.size() > 1) {
// multiple resources
// not supported by CQ 5.3
}
}
Resource loadResource = (Resource) request.getAttribute("cq.form.loadresource");
String title;
if (loadResource != null) {
// an asset is loaded: disable WCM
WCMMode.DISABLED.toRequest(request);
String path = loadResource.getPath();
Asset asset = loadResource.adaptTo(Asset.class);
try {
// it might happen that the adobe xmp lib creates an array
Object titleObj = asset.getMetadata("dc:title");
if (titleObj instanceof Object[]) {
Object[] titleArray = (Object[]) titleObj;
title = (titleArray.length > 0) ? titleArray[0].toString() : "";
} else {
title = titleObj.toString();
}
}
catch (NullPointerException e) {
title = path.substring(path.lastIndexOf("/") + 1);
}
}
else {
title = currentPage.getTitle() == null ? currentPage.getName() : currentPage.getTitle();
}
Använd den föregående titeluppsättningen (antingen resurs eller sidrubrik) i HTML-delen:
<title><%= title %></title>
Skapa en enkel formulärfältskomponent creating-a-simple-form-field-component
I det här exemplet beskrivs hur du skapar en komponent som visar och visar metadata för en inläst resurs.
-
Skapa en komponentmapp i projektkatalogen, till exempel
/apps/geometrixx/components/samplemeta
. -
Lägg till
content.xml
med följande fragment:code language-xml <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Component" jcr:title="Image Dimension" sling:resourceSuperType="foundation/components/parbase" allowedParents="[*/parsys]" componentGroup="Asset Editor"/>
-
Lägg till
samplemeta.jsp
med följande fragment:code language-javascript <%-- Sample metadata field component --%><%@ page import="com.day.cq.dam.api.Asset, java.security.AccessControlException" %><% %><%@include file="/libs/foundation/global.jsp"%><% String value = ""; String name = "dam:sampleMetadata"; boolean readOnly = false; // If the form page is requested for an asset loadResource is the asset. Resource loadResource = (Resource) request.getAttribute("cq.form.loadresource"); if (loadResource != null) { // Determine if the loaded asset is read only. Session session = slingRequest.getResourceResolver().adaptTo(Session.class); try { session.checkPermission(loadResource.getPath(), "set_property"); readOnly = false; } catch (AccessControlException ace) { // checkPermission throws exception if asset is read only readOnly = true; } catch (RepositoryException re) {} // Get the value of the metadata. Asset asset = loadResource.adaptTo(Asset.class); try { value = asset.getMetadata(name).toString(); } catch (NullPointerException npe) { // no metadata dc:description available } } %> <div class="form_row"> <div class="form_leftcol"> <div class="form_leftcollabel">Sample Metadata</div> </div> <div class="form_rightcol"> <% if (readOnly) { %><c:out value="<%= value %>"/><% } else { %><input class="text" type="text" name="./jcr:content/metadata/<%= name %>" value="<c:out value="<%= value %>" />"><% }%> </div> </div>
-
Om du vill göra komponenten tillgänglig måste du kunna redigera den. Om du vill göra en komponent redigerbar lägger du till en nod
cq:editConfig
av den primära typencq:EditConfig
i CRXDE Lite. Du kan ta bort stycken genom att lägga till en flervärdesegenskapcq:actions
med ett enda värde påDELETE
. -
Navigera till webbläsaren och på exempelsidan (till exempel
asseteditor.html
) växla till designläge och aktivera den nya komponenten för styckesystemet. -
I redigeringsläget är den nya komponenten (till exempel Exempelmetadata) nu tillgänglig i assistenten (finns i gruppen Resursredigeraren). Infoga komponenten. För att metadata ska kunna lagras måste de läggas till i metadataformuläret.
Ändra metadataalternativ modifying-metadata-options
Du kan ändra de namnutrymmen som finns i metadataformuläret.
Tillgängliga metadata definieras i /libs/dam/options/metadata
:
- Den första nivån i den här katalogen innehåller namnutrymmena.
- Objekten i varje namnutrymme representerar metadata, till exempel resultat i ett lokalt delsobjekt.
- Metadatainnehållet innehåller information om typen och alternativen för flera värden.
Alternativen kan skrivas över i /apps/dam/options/metadata
:
-
Kopiera katalogen från
/libs
till/apps
. -
Ta bort, ändra eller lägga till objekt.