Erweitern des Asset-Editors extending-asset-editor

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 Editor-Komponenten können Adobe Experience Manager-Entwickler ihre eigenen Komponenten erstellen.

Erstellen einer Asset-Editor-Vorlage creating-an-asset-editor-template

Die folgenden Beispielseiten sind in Geometrixx enthalten:

Konfigurieren von clientlibs configuring-clientlib

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:

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 configuring-js-actions

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 additional-style-sheets

Einige der Komponenten von Assets verwenden die Widget-Bibliothek. Damit sie im Inhaltskontext ordnungsgemäß gerendert werden, muss ein zusätzliches Stylesheet geladen werden. Für die Komponente „Tag-Aktion“ ist ein weiteres erforderlich.

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

Geometrixx-Stylesheet geometrixx-style-sheet

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 formchooser-adjustments-for-eventually-loaded-resources

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

Beispiel:

Die Beispiel-Handles in head.jsp (/apps/geometrixx/components/asseteditor/head.jsp) führen Folgendes aus:

 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 Komponente für ein einfaches Formularfeld creating-a-simple-form-field-component

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

Ändern von Metadatenoptionen modifying-metadata-options

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

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

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