擴充資產編輯器

「資產編輯器」是在透過「資產共用」找到的資產經點按後開啟的頁面，可讓使用者編輯資產的中繼資料、縮圖、標題和標籤等方面。

使用預先定義的編輯元件來設定編輯器的相關內容，請參閱建立和設定資產編輯器頁面。

除了使用預先存在的編輯器元件外，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）。

• clientlib也必須包含在停用的WCM模式中(例如，載入 publish)，才能轉換謂語、動作和鏡頭。

在大多數情況下，複製現有的範例init.jsp(/apps/geometrixx/components/asseteditor/init.jsp)應符合這些需求。

設定JS動作

某些Assets元件需要component.js中定義的JS函式。 將此檔案複製到元件目錄並連結。

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

範例會在head.jsp(/apps/geometrixx/components/asseteditor/head.jsp)中載入此JavaScript來源。

其他樣式表

某些Assets元件使用Widget庫。 若要在內容內容中正確轉譯，必須載入其他樣式表。 標籤動作元件需要一個。

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

Geometrixx樣式表

範例頁面元件要求所有選取器的開頭皆為static.css(/etc/designs/geometrixx/static.css)的.asseteditor。 最佳實務：將所有.asseteditor選取器複製到樣式表，並視需要調整規則。

表單選擇器：對最終載入的資源進行調整

資產編輯器會使用表單選擇器，只要將表單選擇器和表單路徑新增至資產的URL，即可在相同表單頁面上編輯資源（在此例中是資產）。

例如：

• 純格式頁面：http://localhost:4502/content/geometrixx/en/press/asseteditor.html
• 資產已載入表單頁面：http://localhost:4502/content/dam/geometrixx/icons/diamond.png.form.html/content/geometrixx/en/press/asseteditor.html

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. 若要讓元件可用，您必須能夠加以編輯。要使元件可編輯，請在CRXDE Lite中添加主類型cq:EditConfig的節點cq:editConfig。 為了能夠移除段落，請新增多值屬性 cq:actions ，其中單一值 DELETE為。

5. 導覽至瀏覽器，然後在範例頁面（例如asseteditor.html）上切換至設計模式，並啟用段落系統的新元件。

6. 在「 編輯 」模式中，新元件(例如，「範例中繼資料 」)現在可在sidekick中使用(可在「資產編輯器」​群組中找到 ​​)。插入元件。若要儲存中繼資料，必須將其新增至中繼資料表格。

修改中繼資料選項

您可以修改中繼資料表單中可用的命名空間。

/libs/dam/options/metadata中定義了當前可用的元資料：

• 此目錄中的第一級包含命名空間。
• 每個命名空間內的項目代表中繼資料，例如產生本機部件項目。
• 中繼資料內容包含類型和多值選項的資訊。

可在/apps/dam/options/metadata中覆寫選項：

1. 將目錄從/libs複製到/apps。

2. 移除、修改或新增項目。