Erweitern des Asset-Editors

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 bereits vorhandener Editor-Komponenten können Adobe Experience Manager-Entwickler auch eigene Komponenten erstellen.

Erstellen einer Asset-Editor-Vorlage

Die folgenden Beispielseiten sind in Geometrixx enthalten:

  • Geometrixx-Beispielseite: /content/geometrixx/en/press/asseteditor.html
  • Beispielvorlage: /apps/geometrixx/templates/asseteditor
  • Beispielseitenkomponente: /apps/geometrixx/components/asseteditor

Konfigurieren der clientlib

Experience Manager Assets-Komponenten verwenden eine Erweiterung der WCM-edit-clientlib. Die clientlibs werden normalerweise in init.jsp geladen.

Anders als beim Laden der Standard-clientlib (in init.jsp des Kerns) muss eine Assets-Vorlage Folgendes enthalten:

  • Die Vorlage muss die clientlib cq.dam.edit (anstelle von cq.wcm.edit) enthalten.

  • Die clientlib muss auch im deaktivierten WCM-Modus (z. B. beim Veröffentlichen geladen) verfügbar sein, um die Eigenschaften, Aktionen und Linsen darzustellen.

In den meisten Fällen sollten diese Erfordernisse erfüllt sein, wenn das vorhandene Muster init.jsp (/apps/geometrixx/components/asseteditor/init.jsp) kopiert wird.

Konfigurieren von JS-Aktionen

Einige der 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 Assets verwenden die Widget-Bibliothek. Experience Manager 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. Best Practice: Kopieren Sie alle .asseteditor-Selektoren in Ihr Stylesheet und passen Sie bei Bedarf die Regeln an.

FormChooser: Anpassungen für eventuell geladene Ressourcen

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 Folgendes aus:

  • 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 mit dem folgenden Snippet hinzu:

    <?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. Fügen Sie samplemeta.jsp mit dem folgenden Snippet hinzu:

    <%--

  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 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 (primärer Typ cq:EditConfig) hinzu. Um Absätze entfernen zu können, fügen Sie eine cq:actions-Mehrwerteigenschaft mit DELETE als einzigem Wert hinzu.

  5. Navigieren Sie zu Ihrem Browser, wechseln Sie auf Ihrer Beispielseite (z. B.asseteditor.html) in den Design-Modus 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, müssen 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 von /libs nach /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.

Auf dieser Seite