Estender editor de ativos extending-asset-editor

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, os desenvolvedores do Adobe Experience Manager também podem criar seus próprios componentes.

Criação de um modelo do editor de ativos creating-an-asset-editor-template

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

Configuração da Clientlib configuring-clientlib

Experience Manager 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:

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

Configuração de ações JS configuring-js-actions

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

Alguns dos Assets os componentes usam o Experience Manager 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 geometrixx-style-sheet

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

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:

 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>

Criação de um componente de campo de formulário simples creating-a-simple-form-field-component

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

Modificação das opções de metadados modifying-metadata-options

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:

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