Show Menu
主題×

Extend Asset Editor

「資產編輯器」是當透過「資產共用」找到的資產被點按時開啟的頁面,可讓使用者編輯資產的元資料、縮圖、標題和標籤等方面。
使用預先定義的編輯元件配置編輯器的說明見「創 建和配置資產編輯器」頁
除了使用預先存在的編輯器元件外,開發人 Adobe Experience Manager 員也可以建立自己的元件。

建立資產編輯器範本

Geometrixx中包含下列範例頁面:
  • Geometrixx範例頁面: /content/geometrixx/en/press/asseteditor.html
  • 範例範本: /apps/geometrixx/templates/asseteditor
  • 範例頁面元件: /apps/geometrixx/components/asseteditor

配置Clientlib

Assets 元件使用WCM edit clientlib的擴展。 clientlib通常會載入 init.jsp
與預設clientlib載入(在核心的 init.jsp )相比,模 Assets 板必須具有以下內容:
  • 範本必須包含clientlib( cq.dam.edit 而非 cq.wcm.edit )。
  • clientlib也必須包含在停用的WCM模式中(例如,載入 publish ),才能轉換謂語、動作和鏡頭。
在大多數情況下,複製現有的范 init.jsp 例( /apps/geometrixx/components/asseteditor/init.jsp )應符合這些需求。

設定JS動作

部分元件需 Assets 要中定義的JS函式 component.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樣式表

範例頁面元件要求所有選擇器都以( .asseteditor )開 static.css /etc/designs/geometrixx/static.css 。 最佳實務: 將所有選 .asseteditor 擇器複製到樣式表,並視需要調整規則。

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

資產編輯器使用表單選擇器,您只需新增表單選擇器和表單路徑至資產的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 a component editable, in CRXDE Lite, add a node cq:editConfig of primary type cq:EditConfig . 為了能夠移除段落,請新增多值屬性 cq:actions ,其中單一值 DELETE 為。
  5. 導覽至您的瀏覽器,並在範例頁面上(例如 asseteditor.html )切換至設計模式,並啟用段落系統的新元件。
  6. 在「 編輯 」模式中,新元件(例如,「範例中繼資料 」)現在可在sidekick中使用(可在「資產編輯器」 ​群組中找到 ​)。插入元件。若要儲存中繼資料,必須將其新增至中繼資料表格。

修改中繼資料選項

您可以修改中繼資料表單中可用的 命名空間
目前可用的中繼資料定義於 /libs/dam/options/metadata :
  • 此目錄內的第一級包含名稱空間。
  • 每個命名空間中的項目代表中繼資料,例如產生本機零件項目。
  • 中繼資料內容包含類型和多值選項的資訊。
可以在以下位置覆寫選 /apps/dam/options/metadata 項:
  1. 將目錄從複製 /libs /apps
  2. 移除、修改或新增項目。
如果添加新名稱空間,則必須在儲存庫/CRX中註冊。 否則,提交中繼資料表格將會產生錯誤。