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.
As seguintes páginas de exemplo estão incluídas no Geometrixx:
/content/geometrixx/en/press/asseteditor.html
/apps/geometrixx/templates/asseteditor
/apps/geometrixx/components/asseteditor
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.
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
).
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">
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.
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>
Este exemplo descreve como criar um componente que mostra e exibe os metadados de um ativo carregado.
Crie uma pasta de componentes no diretório de projetos, por exemplo, /apps/geometrixx/components/samplemeta
.
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"/>
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>
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
.
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.
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.
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
:
Copie o diretório de /libs
para /apps
.
Remover, modificar ou adicionar itens.
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.