Sie sehen sich Hilfeinhalte der folgenden Version an:

Beim Asset-Editor handelt es sich um die Seite, die geöffnet wird, wenn auf ein über die Asset-Freigabe gefundenes Asset geklickt wird. Er ermöglicht dem Benutzer das Bearbeiten von Aspekten des Assets wie Metadaten, Miniatur, Titel und Tags. 

Die Konfiguration des Editors mit den vordefinierten Bearbeitungskomponenten wird in Erstellen und Konfigurieren einer Asset-Editor-Seite behandelt.

Zusätzlich zur Verwendung von vorhandenen Bearbeiterkomponenten können Adobe Experience Manager (AEM)-Entwickler ihre eigenen Komponenten erstellen.

Erstellen einer Asset-Editor-Vorlage

Die folgenden Beispielseiten sind in Geometrixx enthalten:

  • Geometrixx-Beispielseite: /content/geometrixx/de/press/asseteditor.html
  • Beispielvorlage: /apps/geometrixx/templates/asseteditor
  • Komponente der Beispielseite: /apps/geometrixx/components/asseteditor

Konfigurieren der clientlib

AEM Assets-Komponenten verwenden eine Erweiterung der WCM-clientlib zur Bearbeitung. Die clientlibs werden normalerweise in init.jsp geladen.

Verglichen mit dem standardmäßigen Laden einer clientlib (in init.jsp von Core) muss eine AEM Assets-Vorlage folgende Voraussetzungen erfüllen:

  • Die Vorlage muss die clientlib cq.dam.edit (anstatt cq.wcm.edit enthalten).
  • Die clientlib muss auch im deaktivierten WCM-Modus enthalten sein (z. B. beim Veröffentlichen geladen), um die Eigenschaften, Aktionen und Linsen darzustellen.

In den meisten Fällen sollte das Kopieren der vorhandenen Beispieldatei init.jsp (/apps/geometrixx/components/asseteditor/init.jsp) diese Anforderungen erfüllen.

Konfigurieren von JS-Aktionen

Einige der AEM Assets-Komponenten erfordern, dass JS-Funktionen in component.js definiert sind. Kopieren Sie diese Datei in Ihr Komponentenverzeichnis und verknüpfen Sie sie.

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

Das Beispiel lädt diese JavaScript-Quelle in head.jsp (/apps/geometrixx/components/asseteditor/head.jsp).

Zusätzliche Stylesheets

Einige der Komponenten von AEM Assets verwenden die AEM-Widget-Bibliothek. Damit sie im Inhaltskontext ordnungsgemäß gerendert werden, muss ein zusätzliches Stylesheet geladen werden. Die Tag-Aktionskomponente erfordert ein weiteres zusätzliches Stylesheet.

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

Geometrixx-Stylesheet

Die Komponenten der Beispielseite erfordern, dass alle Selektoren mit .asseteditor von static.css (/etc/designs/geometrixx/static.css) beginnen. Bewährte Methode: Kopieren Sie alle .asseteditor-Selektoren in Ihr Stylesheet und passen Sie die Regeln wie gewünscht an.

FormChooser: Anpassungen für Ressourcen, die irgendwann geladen werden

Der Asset-Editor verwendet die Formularauswahl, mit der Sie Ressourcen – in diesem Fall Assets – auf derselben Formularseite bearbeiten können, indem Sie der URL des Assets einfach einen Formularselektor und den Pfad des Formulars hinzufügen.

Beispiel:

Die Beispiel-Handles in head.jsp (/apps/geometrixx/components/asseteditor/head.jsp) führen folgende Schritte durch:

  • Sie erkennen, wenn ein Asset geladen wird oder wenn das einfache Formular angezeigt werden muss.
  • Wenn ein Asset geladen wird, deaktivieren sie den WCM-Modus, da ParSys nur auf einer einfachen Formularseite bearbeitet werden kann.
  • Wenn ein Asset geladen wird, verwenden Sie dessen Titel anstelle des Titels auf der Formularseite.
 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();
    }

Verwenden Sie im HTML-Teil den vorhergehenden festgelegten Titel (entweder Asset- oder Seitentitel):

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

Erstellen einer Feldkomponente für ein einfaches Formular

In diesem Beispiel wird das Erstellen einer Komponente beschrieben, die die Metadaten eines geladenen Assets anzeigt.

  1. Erstellen Sie in Ihrem Projektverzeichnis einen Komponentenordner, z. B. /apps/geometrixx/components/samplemeta.

  2. Fügen Sie content.xml hinzu:

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://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. Fügen Sie samplemeta.jsp hinzu:

    <%--
    
      Sample metadata field comopnent
    
    --%><%@ 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 will be 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. Sie müssen die Komponente bearbeiten, um sie verfügbar zu machen. Um eine Komponente bearbeitbar zu machen, fügen Sie in CRXDE Lite den Knoten cq:editConfig vom primären Typ cq:EditConfig hinzu. Fügen Sie die Eigenschaft mit mehreren Werten cq:actions mit dem Einzelwert DELETE hinzu, damit Sie Absätze entfernen können.

  5. Navigieren Sie zu Ihrem Browser, wechseln Sie auf Ihrer Beispielseite (z. B.asseteditor.html) in den Designmodus und aktivieren Sie Ihre neue Komponente für das Absatzsystem.

  6. Im Bearbeitungsmodus ist die neue Komponente (z. B. Beispielmetadaten) jetzt im Sidekick (in der Gruppe Asset-Editor) verfügbar. Fügen Sie die Komponente ein. Um die Metadaten speichern zu können, muss sie dem Metadatenformular hinzugefügt werden.

Ändern von Metadatenoptionen

Sie können die im Metadatenformular verfügbaren Namespaces ändern.

Aktuell verfügbare Metadaten sind in /libs/dam/options/metadata definiert:

  • Die erste Ebene innerhalb dieses Verzeichnisses enthält die Namespaces.
  • Die Elemente in den einzelnen Namespaces stellen Metadaten dar, beispielsweise Ergebnisse in einem lokalen Teilelement.
  • Die Metadaten enthalten die Informationen für den Typ und die Optionen mit mehreren Werten.

Die Optionen können in /apps/dam/options/metadata überschrieben werden:

  1. Kopieren Sie das Verzeichnis aus /libs in /apps.
  2. Sie können Elemente entfernen, ändern und hinzufügen.

Hinweis:

Wenn Sie neue Namespaces hinzufügen, müssen diese in Ihrem Repository/CRX registriert sein. Andernfalls tritt beim Übermitteln des Metadatenformulars ein Fehler auf.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie