Estender editor de ativos

O Editor de ativos é a página que é aberta quando um ativo encontrado por meio do Compartilhamento de ativos é clicado, permitindo que o usuário edite esses aspectos do ativo como metadados, miniatura, título e tags.

A configuração do editor usando os componentes de edição predefinidos é abordada em Criação e configuração de uma página de editor de ativos.

Além de usar componentes de editor pré-existentes, Adobe Experience Manager os desenvolvedores também podem criar seus próprios componentes.

Criar um modelo do Editor de ativos

As seguintes páginas de exemplo estão incluídas no Geometrixx:

  • Página de exemplo do Geometrixx: /content/geometrixx/en/press/asseteditor.html
  • Exemplo de modelo: /apps/geometrixx/templates/asseteditor
  • Exemplo de componente de página: /apps/geometrixx/components/asseteditor

Configurar Clientlib

Assets os componentes usam uma extensão da biblioteca de edição de clientlib do WCM. Normalmente, as clientlibs são carregadas em init.jsp.

Comparado ao carregamento padrão da clientlib (no core init.jsp), um Assets O template deve ter o seguinte:

  • O modelo deve incluir o cq.dam.edit clientlib (em vez de cq.wcm.edit).

  • A clientlib também deve ser incluído no modo WCM desativado (por exemplo, carregado na publicação) para poder renderizar os predicados, as ações e as lentes.

Na maioria dos casos, copiar a amostra existente init.jsp (/apps/geometrixx/components/asseteditor/init.jsp) devem atender a essas necessidades.

Configurar ações JS

Alguns dos Assets Os componentes exigem funções JS definidas em component.js. Copie esse arquivo para o diretório do seu componente e vincule-o.

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

O exemplo carrega essa fonte do JavaScript no head.jsp(/apps/geometrixx/components/asseteditor/head.jsp).

Folhas de estilos adicionais

Alguns dos Assets os componentes usam a biblioteca de widgets. Para ser renderizada corretamente no contexto de conteúdo, uma folha de estilos adicional deve ser carregada. O componente de ação de tag requer mais um.

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

Folha de estilos do Geometrixx

Os componentes de página de exemplo exigem que todos os seletores comecem com .asseteditor de static.css (/etc/designs/geometrixx/static.css). Prática recomendada: Copiar tudo .asseteditor seletores à sua folha de estilos e ajuste as regras conforme desejado.

FormChooser: Ajustes para recursos eventualmente carregados

O Editor de ativos usa o Seletor de formulário, que permite editar recursos - neste caso, ativos - na mesma página de formulário, basta adicionar um seletor de formulário e o caminho do formulário para o URL do ativo.

Por exemplo:

A amostra manipula em head.jsp (/apps/geometrixx/components/asseteditor/head.jsp) faça o seguinte:

  • Eles detectam se um ativo é carregado ou se o formulário simples deve ser exibido.
  • Se um ativo for carregado, ele desativará o modo WCM, pois os parsys só poderão ser editados em uma página de formulário simples.
  • Se um ativo for carregado, eles usarão seu título em vez do na página do formulário.
 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();
    }

Na parte HTML, use o conjunto de título anterior (ativo ou título de página):

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

Criar um componente de campo de formulário simples

Este exemplo descreve como criar um componente que mostra e exibe os metadados de um ativo carregado.

  1. Crie uma pasta de componentes no diretório de projetos, por exemplo, /apps/geometrixx/components/samplemeta.

  2. Adicionar content.xml com o seguinte trecho:

    <?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. Adicionar samplemeta.jsp com o seguinte trecho:

    <%--

  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. Para disponibilizar o componente, é necessário editá-lo. Para tornar um componente editável, no CRXDE Lite, adicione um nó cq:editConfig de tipo primário cq:EditConfig. Para que possa remover parágrafos, adicione uma propriedade de vários valores cq:actions com um único valor DELETE.

  5. Navegue até o navegador e, na página de exemplo (por exemplo, asseteditor.html) alterne para o modo de design e ative o novo componente para o sistema de parágrafo.

  6. No modo Editar, o novo componente (por exemplo, Metadados de amostra) agora está disponível no sidekick (encontrado no grupo Editor de ativos). Insira o componente. Para poder armazenar os metadados, eles devem ser adicionados ao formulário de metadados.

Modificar opções de metadados

Você pode modificar os namespaces disponíveis no formulário de metadados.

Os metadados atualmente disponíveis são definidos em /libs/dam/options/metadata:

  • O primeiro nível dentro desse diretório contém os namespaces.
  • Os itens dentro de cada namespace representam metadados, como resultados em um item de parte local.
  • O conteúdo dos metadados contém as informações do tipo e as opções de vários valores.

As opções podem ser substituídas em /apps/dam/options/metadata:

  1. Copie o diretório de /libs para /apps.

  2. Remover, modificar ou adicionar itens.

OBSERVAÇÃO

Se você adicionar novos namespaces, eles deverão ser registrados em seu repositório/CRX. Caso contrário, o envio do formulário de metadados resultará em um erro.

Nesta página