Editor van element uitbreiden

De Asset Editor is de pagina die wordt geopend wanneer op een element wordt geklikt dat via Asset Share wordt gevonden, zodat de gebruiker deze aspecten van het element kan bewerken, zoals metagegevens, miniaturen, titels en tags.

De configuratie van de redacteur die de vooraf bepaalde het uitgeven componenten gebruikt wordt behandeld in Een pagina voor de Editor van middelen maken en configureren.

Naast het gebruik van reeds bestaande editorcomponenten, Adobe Experience Manager ontwikkelaars kunnen ook hun eigen componenten maken .

Een sjabloon voor de Asset Editor maken

De volgende voorbeeldpagina's worden opgenomen in Geometrixx:

• Voorbeeldpagina Geometrixx: /content/geometrixx/en/press/asseteditor.html
• Voorbeeldsjabloon: /apps/geometrixx/templates/asseteditor
• Voorbeeld van paginacomponent: /apps/geometrixx/components/asseteditor

Clientlib configureren

Assets componenten gebruiken een uitbreiding van WCM uitgeeft clientlib. De clientlibs worden meestal geladen in init.jsp.

Vergeleken met de standaard clientlib-belasting (in core init.jsp), Assets sjabloon moet het volgende hebben:

• De sjabloon moet de cq.dam.edit clientlib (in plaats van cq.wcm.edit).

• De clientbibliotheek moet ook in de uitgeschakelde WCM-modus (bijvoorbeeld, geladen op publiceren) worden opgenomen om de predicaten, de acties, en de lenzen weer te geven.

Doorgaans wordt het bestaande monster gekopieerd init.jsp (/apps/geometrixx/components/asseteditor/init.jsp) moet aan deze behoeften voldoen.

JS-handelingen configureren

Sommige van de Assets componenten vereisen JS-functies die zijn gedefinieerd in component.js. Kopieer dit bestand naar de map met componenten en koppel deze.

<script type="text/javascript" src="<%= component.getPath() %>/component.js"></script>

In het voorbeeld wordt deze JavaScript-bron geladen in head.jsp(/apps/geometrixx/components/asseteditor/head.jsp).

Aanvullende stijlbladen

Sommige van de Assets gebruiken de widgetbibliotheek. Om correct in de inhoudscontext te worden teruggegeven, moet een extra stijlblad worden geladen. Voor de component Handeling tag is nog een component vereist.

<link href="/etc/designs/geometrixx/ui.widgets.css" rel="stylesheet" type="text/css">

Stijlblad Geometrixx

Voor de voorbeeldpaginacomponenten is vereist dat alle kiezers beginnen met .asseteditor van static.css (/etc/designs/geometrixx/static.css). Tips en trucs: alles kopiëren .asseteditor selecteert u de gewenste stijlpagina en past u de regels aan.

FormChooser: Aanpassingen voor uiteindelijk geladen bronnen

De Asset Editor gebruikt de Formulierkiezer, waarmee u bronnen - in dit geval elementen - op dezelfde formulierpagina kunt bewerken door gewoon een formulierkiezer en het pad van het formulier toe te voegen aan de URL van het element.

Bijvoorbeeld:

• Onbewerkte formulierpagina: http://localhost:4502/content/geometrixx/en/press/asseteditor.html
• In de formulierpagina geladen element: http://localhost:4502/content/dam/geometrixx/icons/diamond.png.form.html/content/geometrixx/en/press/asseteditor.html

De voorbeeldhandgrepen zijn head.jsp (/apps/geometrixx/components/asseteditor/head.jsp) doet u het volgende:

• Ze detecteren of een element is geladen of dat het normale formulier moet worden weergegeven.
• Als een element wordt geladen, schakelen zij WCM wijze als parsys slechts op een gewone vormpagina uit.
• Als een element is geladen, gebruiken deze de titel in plaats van de titel op de formulierpagina.

 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();
    }

Gebruik in het HTML-deel de voorafgaande titelset (element of paginatitel):

<title><%= title %></title>

Een eenvoudige component voor een formulierveld maken

In dit voorbeeld wordt beschreven hoe u een component kunt maken die de metagegevens van een geladen element weergeeft en weergeeft.

1. Maak bijvoorbeeld een componentmap in de projectmap. /apps/geometrixx/components/samplemeta.

2. Toevoegen content.xml met het volgende fragment:

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

3. Toevoegen samplemeta.jsp met het volgende fragment:

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

4. Als u de component beschikbaar wilt maken, moet u deze kunnen bewerken. Een component bewerkbaar maken, in CRXDE Lite, voegt een knooppunt toe cq:editConfig van het primaire type cq:EditConfig. U kunt alinea's verwijderen door een eigenschap met meerdere waarden cq:actions met één waarde van DELETE toe te voegen.

5. Navigeer naar de browser en op de voorbeeldpagina (bijvoorbeeld asseteditor.html) schakelt u over naar de ontwerpmodus en schakelt u de nieuwe component in voor het alineasysteem.

6. In de modus Bewerken is de nieuwe component (bijvoorbeeld Voorbeeldmetadata) nu beschikbaar in de sidekick (in de groep Asset-editor). Voeg de component in. Als u de metadata wilt opslaan, moet u deze toevoegen aan het metadataformulier.

Opties voor metagegevens wijzigen

U kunt de naamruimten wijzigen die beschikbaar zijn in het dialoogvenster metagegevensformulier.

De momenteel beschikbare metagegevens worden gedefinieerd in /libs/dam/options/metadata:

• Het eerste niveau in deze map bevat de naamruimten.
• De items binnen elke naamruimte vertegenwoordigen metagegevens, zoals de resultaten in een lokaal onderdeel.
• De inhoud van de metagegevens bevat de informatie voor het type en de opties voor meerdere waarden.

De opties kunnen worden overschreven in /apps/dam/options/metadata:

1. De map kopiëren vanuit /libs tot /apps.

2. Items verwijderen, wijzigen of toevoegen.