자산 검색 확장

Adobe Experience Manager Assets 검색 기능을 확장할 수 있습니다. 곧바로 사용할 수 있는 Experience Manager 자산은 문자열로 자산을 검색합니다.

검색은 QueryBuilder 인터페이스를 통해 수행되므로 몇 가지 조건자로 검색을 사용자 지정할 수 있습니다. 다음 디렉토리에 기본 설명 세트를 오버레이할 수 있습니다. /apps/dam/content/search/searchpanel/facets

Experience Manager Assets 관리 패널에 탭을 더 추가할 수도 있습니다.

오버레이

사전 구성된 설명을 오버레이하려면 facets 노드를 /libs/dam/content/search/searchpanel에서 /apps/dam/content/search/searchpanel/로 복사하거나 searchpanel 구성에서 다른 facetURL 속성을 지정하십시오(기본값은 /libs/dam/content/search/searchpanel/facets.overlay.infinity.json 임).

탭 추가

Experience Manager 자산 관리에서 구성하여 검색 탭을 추가할 수 있습니다. 추가 탭을 만들려면 다음을 수행하십시오.

1. 폴더 구조 /apps/wcm/core/content/damadmin/tabs,가 아직 없는 경우 만들고 /libs/wcm/core/content/damadmin에서 tabs 노드를 복사하여 붙여넣습니다.

2. 원하는 대로 두 번째 탭을 만들고 구성합니다.

   노트

   두 번째 siteadminsearchpanel을 만들 때는 양식 충돌을 방지하기 위해 id 속성을 설정해야 합니다.

사용자 지정 설명 만들기

Experience Manager 자산에는 자산 공유 페이지를 사용자 지정하는 데 사용할 수 있는 사전 정의된 설명 세트가 포함되어 있습니다. 이러한 방식으로 자산 공유 사용자 지정은 자산 공유 페이지 만들기 및 구성에서 다룹니다.

기존 설명을 사용하는 것 외에도 Experience Manager 개발자는 Query Builder API를 사용하여 자체 설명을 만들 수도 있습니다.

사용자 지정 설명을 만들려면 위젯 프레임워크에 대한 기본적인 지식이 필요합니다.

가장 좋은 방법은 기존 설명을 복사하고 조정하는 것입니다. 샘플 조건자는 /libs/cq/search/components/predicates에 있습니다.

예: 단순 속성 설명 작성

속성 설명을 빌드하려면 다음을 수행하십시오.

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

2. 페이지 URL에 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="Title Predicate"
       sling:resourceSuperType="foundation/components/parbase"
       allowedParents="[*/parsys]"
       componentGroup="Search"/>
   

3. 페이지 URL에 titlepredicate.jsp.

   <%--
     Sample title predicate component
   
   --%><%@ page import="java.util.Calendar" %><%
   %><%@include file="/libs/foundation/global.jsp"%><%
   
       // A unique id is necessary in case this predicate is inserted multiple times on the same page
       String elemId = "cq-predicate-" +  Long.toString(Calendar.getInstance().getTimeInMillis());
   
   %><div class="predicatebox">
   
       <div class="title">Title</div>
   
       <%-- The wrapper for the form elements. All items will be append to this wrapper. --%>
       <div id="<%= elemId %>" class="content"></div>
   
   </div><script type="text/javascript">
   
       CQ.Ext.onLoad(function() {
   
           var predicateName = "property";
           var propertyName = "jcr:content/metadata/dc:title";
           var elemId = "<%= elemId %>";
   
           // Get the page wide available QueryBuilder.
           var qb = CQ.search.Util.getQueryBuilder();
   
           // createId adds a counter to the predicate name - useful in case this predicate
           // is inserted multiple times on the same page.
           var id = qb.createId(predicateName);
   
           // Hidden field that defines the property to search for; in our case this
           // is the "dc:title" metadata. The name "property" (or "1_property", "2_property" etc.)
           // indicates the server to use the property predicate
           // (com.day.cq.search.eval.JcrPropertyPredicateEvaluator).
           qb.addField({
               "xtype": "hidden",
               "renderTo": elemId,
               "name": id,
               "value": propertyName
           });
   
           // The visible text field. The name has to be like the one of the hidden field above
           // plus the ".value" suffix.
           qb.addField({
               "xtype": "textfield",
               "renderTo": elemId,
               "name": id + ".value"
           });
   
           // Depending on the predicate additional parameters allow to configure the
           // predicate. Here we add an operation parameter to create a "like" query.
           // Again note the name set to the id and a suffix.
           qb.addField({
               "xtype": "hidden",
               "renderTo": elemId,
               "name": id + ".operation",
               "value": "like"
           });
   
       });
   
   </script>
   

4. 구성 요소를 사용할 수 있도록 하려면 해당 구성 요소를 편집할 수 있어야 합니다. 구성 요소를 편집 가능하게 하려면 CRXDE에서 기본 유형 cq:EditConfig의 노드 cq:editConfig을 추가합니다. 단락을 제거할 수 있도록 단일 값이 DELETE​인 다중 값 속성 cq:actions을 추가하십시오.

5. 브라우저로 이동하고 샘플 페이지(예: press.html)에서 디자인 모드로 전환하고 설명 단락 시스템(예: left)에 대한 새 구성 요소를 활성화합니다.

6. 편집 모드에서는 이제 사이드킥에서 새 구성 요소를 사용할 수 있습니다(검색 그룹에 있음). 설명 열에 구성 요소를 삽입하고 다이아몬드​와 같이 검색 단어를 입력하고 돋보기를 클릭하여 검색을 시작합니다.

   노트

   검색할 때 올바른 대/소문자를 포함하여 정확히 단어를 입력해야 합니다.

예: 단순 그룹 설명 작성

그룹 설명을 작성하려면 다음을 수행하십시오.

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

2. 페이지 URL에 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 Formats"
       sling:resourceSuperType="foundation/components/parbase"
       allowedParents="[*/parsys]"
       componentGroup="Search"/>
   

3. 페이지 URL에 titlepredicate.jsp:

   <%--
   
     Sample group predicate component
   
   --%><%@ page import="java.util.Calendar" %><%
   %><%@include file="/libs/foundation/global.jsp"%><%
   
       // A unique id is necessary in case this predicate is inserted multiple times on the same page.
       String elemId = "cq-predicate-" +  Long.toString(Calendar.getInstance().getTimeInMillis());
   
   %><div class="predicatebox">
   
       <div class="title">Image Formats</div>
   
       <%-- The wrapper for the form elements. All items will be append to this wrapper. --%>
       <div id="<%= elemId %>" class="content"></div>
   
   </div><script type="text/javascript">
   
       CQ.Ext.onLoad(function() {
   
           var predicateName = "property";
           var propertyName = "jcr:content/metadata/dc:format";
           var elemId = "<%= elemId %>";
   
           // Get the page wide available QueryBuilder.
           var qb = CQ.search.Util.getQueryBuilder();
   
           // Create a unique group ID; will return e.g. "1_group".
           var groupId = qb.createGroupId();
   
           // Hidden field that defines the property to search for  - in our case "dc:format" -
           // and declares the group of predicates. "property" in the name ("1_group.property")
           // indicates to the server to use the "property predicate"
           // (com.day.cq.search.eval.JcrPropertyPredicateEvaluator).
           qb.addField({
               "xtype": "hidden",
               "renderTo": "<%= elemId %>",
               "name": groupId + "." + predicateName, // 1_group.property
               "value": propertyName
           });
   
           // Declare to combine the multiple values using OR.
           qb.add(new CQ.Ext.form.Hidden({
               "name": groupId + ".p.or",  // 1_group.p.or
               "value": "true"
           }));
   
           // The options
           var options = [
               { "label":"JPEG", "value":"image/jpeg"},
               { "label":"PNG",  "value":"image/png" },
               { "label":"GIF",  "value":"image/gif" }
           ];
   
           // Build a checkbox for each option.
           for (var i = 0; i < options.length; i++) {
               qb.addField({
                   "xtype": "checkbox",
                   "renderTo": "<%= elemId %>",
                   // 1_group.property.0_value, 1_group.property.1_value etc.
                   "name": groupId + "." +  predicateName + "." + i + "_value",
                   "inputValue": options[i].value,
                   "boxLabel": options[i].label,
                   "listeners": {
                       "check": function() {
                           // Submit the search form when checking/unchecking a checkbox.
                           qb.submit();
                       }
                   }
               });
           }
   
       });
   

4. 구성 요소를 사용할 수 있도록 하려면 해당 구성 요소를 편집할 수 있어야 합니다. 구성 요소를 편집 가능하게 하려면 CRXDE에서 기본 유형 cq:EditConfig의 노드 cq:editConfig을 추가합니다. 단락을 제거할 수 있도록 단일 값이 DELETE인 다중 값 속성 cq:actions을 추가하십시오.

5. 브라우저로 이동하고 샘플 페이지(예: press.html)에서 디자인 모드로 전환하고 설명 단락 시스템(예: left)에 대한 새 구성 요소를 활성화합니다.

6. 편집 모드에서는 이제 사이드킥에서 새 구성 요소를 사용할 수 있습니다(검색 그룹에 있음). 설명 열에 구성 요소를 삽입합니다.

설치된 설명 위젯

다음 설명은 사전 구성된 ExtJS 위젯으로 사용할 수 있습니다.

전체 텍스트 설명

PropertyPredicate

경로 설명

DatePredicate

OptionsPredicate

검색 결과 사용자 지정

자산 공유 페이지의 검색 결과 프레젠테이션은 선택한 렌즈가 제어합니다. Experience Manager 자산에는 자산 공유 페이지를 사용자 지정하는 데 사용할 수 있는 사전 정의된 렌즈 세트가 포함되어 있습니다. 이러한 방식으로 자산 공유 사용자 지정은 자산 공유 페이지 만들기 및 구성에서 다룹니다.

기존 렌즈를 사용하는 것 외에도 Experience Manager 개발자도 자신만의 렌즈를 만들 수 있습니다.