Extension de l’éditeur de ressources extending-asset-editor

L’Éditeur de ressources est la page qui s’ouvre lorsque l’utilisateur clique sur une ressource trouvée par le biais du partage de ressources, ce qui lui permet de modifier certains aspects de la ressource, tels que les métadonnées, la miniature, le titre et les balises.

La configuration de l’éditeur à l’aide des composants de modification prédéfinis est traitée dans Création et configuration d’une page Éditeur de ressources.

En plus d’utiliser des composants d’éditeur préexistants, les développeurs Adobe Experience Manager peuvent créer leurs propres composants.

Création d’un modèle Éditeur de ressources creating-an-asset-editor-template

Les exemples de pages suivants sont inclus dans Geometrixx :

Configuration de clientlib configuring-clientlib

Les composants d’Experience Manager Assets utilisent une extension du clientlib de modification de la gestion du contenu Web. Les clientlibs sont généralement chargés dans init.jsp.

Par rapport au chargement du clientlib par défaut (dans le init.jsp du cœur), un modèle Assets doit répondre aux exigences suivantes :

Dans la plupart des cas, la copie de l’exemple existant de init.jsp (/apps/geometrixx/components/asseteditor/init.jsp) doit répondre à ces besoins.

Configuration des actions JS configuring-js-actions

Certains composants d’Assets nécessitent des fonctions JS définies dans component.js. Copiez ce fichier dans votre répertoire de composants et liez-le.

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

Cet exemple charge cette source JavaScript dans head.jsp (/apps/geometrixx/components/asseteditor/head.jsp).

Feuilles de style supplémentaires additional-style-sheets

Certains composants Assets utilisent la bibliothèque de widgets. Experience Manager Pour un rendu correct dans le contexte du contenu, une feuille de style supplémentaire doit être chargée. Le composant d’action de balise en requiert une de plus.

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

Feuille de style Geometrixx geometrixx-style-sheet

Les exemples de composants de page nécessitent que tous les sélecteurs commencent par .asseteditor dans static.css (/etc/designs/geometrixx/static.css). Bonne pratique : copiez tous les sélecteurs .asseteditor dans votre feuille de style et ajustez les règles en fonction de vos besoins.

FormChooser : réglages pour les ressources chargées par la suite. formchooser-adjustments-for-eventually-loaded-resources

L’Éditeur de ressources utilise le sélecteur de formulaire, qui permet de modifier des ressources (dans ce cas des ressources) sur la même page de formulaire en ajoutant simplement un sélecteur de formulaire et le chemin d’accès du formulaire à l’URL de la ressource.

Par exemple :

Les exemples de gestionnaires dans head.jsp (/apps/geometrixx/components/asseteditor/head.jsp) procèdent ainsi :

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

Dans la partie HTML, utilisez l’ensemble de titre précédent (titre de la ressource ou de la page) :

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

Création d’un composant de champ de formulaire simple creating-a-simple-form-field-component

Cet exemple illustre comment créer un composant qui affiche les métadonnées d’une ressource chargée.

Modification des options de métadonnées modifying-metadata-options

Vous pouvez modifier les espaces de noms disponibles sous forme de métadonnées.

Les métadonnées actuellement disponibles sont définies dans/libs/dam/options/metadata :

Les options peuvent être remplacées dans/apps/dam/options/metadata :