자산 검색 확장

AEM(Adobe Experience Manager) 자산 검색 기능을 확장할 수 있습니다. 기본적으로 AEM Assets은 문자열로 자산을 검색합니다.

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

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

오버레이

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

탭 추가

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

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

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

   노트

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

사용자 지정 설명 만들기

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

AEM 개발자는 기존 설명을 사용하는 것 외에도 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

검색 결과 사용자 지정

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

AEM 개발자들도 기존 렌즈를 사용할 수 있을 뿐 아니라 자체 렌즈를 만들 수도 있다.