자산 편집기 확장

자산 편집기는 자산 공유를 통해 발견된 자산을 클릭하여 메타데이터, 축소판, 제목 및 태그와 같은 자산 측면을 편집할 수 있도록 하는 페이지입니다.

사전 정의된 편집 구성 요소를 사용하는 편집기의 구성은 자산 편집기 페이지 만들기 및 구성.

기존 편집기 구성 요소를 사용하는 것 외에도 Adobe Experience Manager 개발자는 자신만의 구성 요소를 만들 수도 있습니다.

자산 편집기 템플릿 만들기

다음 샘플 페이지는 Geometrixx에 포함되어 있습니다.

  • Geometrixx 샘플 페이지: /content/geometrixx/en/press/asseteditor.html
  • 샘플 템플릿: /apps/geometrixx/templates/asseteditor
  • 샘플 페이지 구성 요소: /apps/geometrixx/components/asseteditor

Clientlib 구성

Assets 구성 요소는 WCM edit clientlib의 확장을 사용합니다. clientlibs는 일반적으로 init.jsp.

기본 clientlib 로드(코어)와 비교 init.jsp), Assets 템플릿에는 다음이 있어야 합니다.

  • 템플릿에는 cq.dam.edit clientlib(대신) cq.wcm.edit).

  • The clientlib must also be included in disabled WCM mode (for example, loaded on publish) to be able to render the predicates, actions, and lenses.

대부분의 경우 기존 샘플 복사 init.jsp (/apps/geometrixx/components/asseteditor/init.jsp)은 이러한 요구 사항을 충족해야 합니다.

JS 작업 구성

일부 Assets 구성 요소에는 component.js. 이 파일을 구성 요소 디렉토리에 복사하여 연결합니다.

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

샘플은 이 JavaScript 소스를 head.jsp(/apps/geometrixx/components/asseteditor/head.jsp).

추가 스타일 시트

일부 Assets 구성 요소는 위젯 라이브러리를 사용합니다. 콘텐츠 컨텍스트에서 제대로 렌더링하려면 추가 스타일 시트를 로드해야 합니다. 태그 작업 구성 요소에 하나 더 필요합니다.

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

Geometrixx 스타일 시트

샘플 페이지 구성 요소에서는 모든 선택기가 .asseteditorstatic.css (/etc/designs/geometrixx/static.css). 우수 사례: 모두 복사 .asseteditor 선택기를 스타일 시트로 선택하고 원하는 대로 규칙을 조정합니다.

FormSelector: 최종 로드된 리소스에 대한 조정

자산 편집기에서는 양식 선택기를 사용하여 양식 선택기와 양식의 경로를 자산 URL에 추가하면 동일한 양식 페이지에서 리소스를 편집할 수 있습니다.

예:

의 샘플 핸들 head.jsp (/apps/geometrixx/components/asseteditor/head.jsp) 다음을 수행합니다.

  • 자산이 로드되는지 또는 일반 양식이 표시되어야 하는지 감지합니다.
  • 자산이 로드되면 WCM 모드를 비활성화하며, parsys는 일반 양식 페이지에서만 편집할 수 있습니다.
  • 자산이 로드되면 양식 페이지의 자산 대신 해당 제목을 사용합니다.
 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();
    }

HTML 부분에서 이전 제목 세트(자산 또는 페이지 제목)를 사용합니다.

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

단순 양식 필드 구성 요소 만들기

이 예에서는 로드된 자산의 메타데이터를 표시하고 표시하는 구성 요소를 만드는 방법을 설명합니다.

  1. 프로젝트 디렉토리에서 구성 요소 폴더를 만듭니다(예: ). /apps/geometrixx/components/samplemeta.

  2. 추가 content.xml 다음 코드 조각을 사용하여 다음을 수행하십시오.

    <?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. 추가 samplemeta.jsp 다음 코드 조각을 사용하여 다음을 수행하십시오.

    <%--
    
      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. To make the component available, you need to be able to edit it. 구성 요소를 편집 가능하게 하려면 CRXDE Lite에서 노드를 추가합니다 cq:editConfig 기본 유형 cq:EditConfig. So that you can remove paragraphs, add a multi-value property cq:actions with a single value of DELETE.

  5. 브라우저 및 샘플 페이지로 이동합니다(예: asseteditor.html) 디자인 모드로 전환하고 단락 시스템의 새 구성 요소를 활성화합니다.

  6. In Edit mode, the new component (for example, Sample Metadata) is now available in the sidekick (found in the Asset Editor group). Insert the component. To be able to store the metadata, it must be added to the metadata form.

메타데이터 수정 옵션

에서 사용할 수 있는 네임스페이스를 수정할 수 있습니다 메타데이터 양식.

현재 사용 가능한 메타데이터는에 정의되어 있습니다. /libs/dam/options/metadata:

  • 이 디렉토리 내의 첫 번째 레벨에는 네임스페이스가 포함됩니다.
  • 각 네임스페이스 내의 항목은 로컬 부품 항목 결과와 같은 메타데이터를 나타냅니다.
  • 메타데이터 컨텐츠에는 유형 및 다중 값 옵션에 대한 정보가 포함됩니다.

옵션을 덮어쓸 수 있습니다. /apps/dam/options/metadata:

  1. 다음 위치에서 디렉토리 복사 /libs to /apps.

  2. 항목을 제거, 수정 또는 추가합니다.

노트

새 네임스페이스를 추가하는 경우 저장소/CRX에 등록해야 합니다. 그렇지 않으면 메타데이터 양식을 제출하면 오류가 발생합니다.

이 페이지에서는