AEM 구성 요소 - 기본 사항

새 구성 요소를 개발하기 시작할 때 구조 및 구성의 기본 사항을 이해해야 합니다.

이 프로세스에는 이론을 읽고 표준 AEM 인스턴스에서 다양한 구성 요소 구현을 확인하는 작업이 포함됩니다. 이 후자의 접근 방식은 AEM이 새로운 표준, 최신 터치 지원 UI로 이동했지만 클래식 UI를 계속 지원한다는 점에서 약간 복잡합니다.

개요

이 섹션에서는 구성 요소를 개발할 때 필요한 세부 사항을 소개하는 주요 개념과 문제를 다룹니다.

계획

구성 요소를 실제로 구성하거나 코드를 만들려면 먼저 다음 사항을 고려해야 합니다.

• 새로운 구성 요소가 정확히 필요한 작업은 무엇입니까?

  • 명확한 사양은 개발, 테스트 및 핸드오버의 모든 단계에서 도움이 됩니다.

    세부 사항은 시간이 지남에 따라 변경될 수 있지만 사양을 업데이트할 수 있습니다(하지만 변경 사항도 문서화되어야 함).

• 구성 요소를 처음부터 새로 만들어야 합니까, 아니면 기존 구성 요소에서 기본 사항을 상속할 수 있습니까?

  • 바퀴를 다시 만들 필요가 없다.
  • 무시, 오버레이 및 Sling Resource Merger를 포함하여 다른 구성 요소 정의에서 세부 사항을 상속하고 확장할 수 있도록 AEM에서 제공하는 몇 가지 메커니즘이 있습니다.

• 구성 요소에서 컨텐츠를 선택/조작하는 논리를 필요로 합니까?

  • 로직은 사용자 인터페이스 레이어와 별도로 유지되어야 합니다. HTL은 이러한 상황이 발생하지 않도록 하기 위해 설계되었습니다.

• 구성 요소에 CSS 형식이 필요합니까?

  • CSS 서식은 구성 요소 정의와 별도로 유지되어야 합니다. 외부 CSS 파일을 통해 수정할 수 있도록 HTML 요소의 이름을 지정하는 규칙을 정의합니다.

• 어떤 보안 측면을 고려해야 합니까?

  • 자세한 내용은 보안 검사 목록 - 개발 우수 사례를 참조하십시오.

터치 활성화와 클래식 UI

구성 요소 개발에 대한 진지한 논의가 시작되기 전에 작성자가 사용할 UI를 알고 있어야 합니다.

• 터치 활성화 UI
  AEM 5. 6.0에서 미리 보기로 도입되고 6.x에서 확장된 표준 사용자 인터페이스입니다.Coral UI 및 Granite UI 의 기본 기술을 사용하여 Adobe Marketing Cloud에 대한 통합 사용자 경험을 기반으로 합니다.

• CQ
  5.1에서 도입된 ExtJS 기술을 기반으로 한 클래식 UIer 인터페이스.

자세한 내용은 UI Interface Recommendations for Customers 를 참조하십시오.

터치 지원 UI, 클래식 UI 또는 두 가지 모두를 지원하도록 구성 요소를 구현할 수 있습니다. 표준 인스턴스를 보면 원래 클래식 UI용으로 디자인되었거나 터치 지원 UI 또는 둘 다에 맞게 디자인된 즉시 사용 가능한 구성 요소가 표시됩니다.

이러한 이유로 이 페이지에서 두 가지 기본사항과 이를 인식하는 방법을 다룹니다.

컨텐츠 논리 및 렌더링 마크업

구성 요소의 컨텐츠를 선택하는 데 사용되는 논리를 제어하는 코드와는 별도로 마크업 및 렌더링에 대한 코드를 유지하는 것이 좋습니다.

이 철학은 기본 비즈니스 논리를 정의하는 데 실제 프로그래밍 언어가 사용되도록 의도적으로 제한되는 템플릿 언어인 HTL에서 지원됩니다. 이(선택 사항) 로직은 특정 명령을 사용하여 HTL에서 호출됩니다. 이 메커니즘은 지정된 보기에 대해 호출되는 코드를 강조 표시하며, 필요한 경우 동일한 구성 요소의 다른 보기에 대해 특정 논리를 허용합니다.

HTL과 JSP

HTL은 AEM 6.0에 도입된 HTML 템플릿 언어입니다.

구성 요소를 개발할 때 HTL 또는 JSP(Java Server Page)를 사용할지 여부에 대한 논의는 이제 AEM에서 권장되는 스크립팅 언어이므로 간단해야 합니다.

HTL과 JSP는 클래식 및 터치 지원 UI 모두에 대한 구성 요소를 개발하는 데 사용할 수 있습니다. HTL이 클래식 UI에 대해 터치 지원 UI 및 JSP에만 해당된다고 가정할 수는 있지만 이는 잘못된 것이며 시기 때문이라고 가정합니다. 터치 활성화 UI 및 HTL이 거의 동일한 기간에 AEM에 통합되었습니다. 이제 HTL이 권장 언어이므로 터치 지원 UI에 적합한 새 구성 요소에 사용됩니다.

고유한 구성 요소 개발

적절한 UI에 대한 자체 구성 요소를 만들려면 (이 페이지를 읽은 후)를 참조하십시오.

• 터치 지원 UI에 대한 AEM 구성 요소
• 클래식 UI용 AEM 구성 요소

시작하는 빠른 방법은 기존 구성 요소를 복사한 다음 원하는 대로 변경하는 것입니다. 고유한 구성 요소를 만들고 단락 시스템에 추가하는 방법에 대해 알아보려면 다음을 참조하십시오.

• 구성 요소 개발 (터치 지원 UI에 주력)

구성 요소를 게시 인스턴스로 이동

컨텐츠를 렌더링하는 구성 요소는 컨텐츠와 동일한 AEM 인스턴스에 배포해야 합니다. 따라서 작성 인스턴스에서 페이지를 작성 및 렌더링하는 데 사용되는 모든 구성 요소를 게시 인스턴스에 배포해야 합니다. 구성 요소를 배포하면 활성화된 페이지를 렌더링하는 데 사용할 수 있습니다.

다음 도구를 사용하여 구성 요소를 게시 인스턴스로 이동합니다.

• 패키지 관리자 를 사용하여 구성 요소를 패키지에 추가하고 다른 AEM 인스턴스로 이동합니다.
• 트리 복제 활성화 도구 를 사용하여 구성 요소를 복제합니다.

시작에서 인식할 구성 요소

• 페이지:

  • AEM에는 page 구성 요소( cq:Page)가 있습니다.
  • 이는 컨텐츠 관리에 중요한 특정 유형의 리소스입니다.
    • 페이지는 웹 사이트의 컨텐츠를 포함하는 웹 페이지에 해당합니다.

• 단락 시스템:

  • 단락 시스템은 단락 목록을 관리하므로 웹 사이트의 주요 부분입니다. 실제 컨텐츠를 보유하는 개별 구성 요소를 보유하는 데 사용됩니다.
  • 단락 시스템에서 단락을 생성, 이동, 복사 및 삭제할 수 있습니다.
  • 특정 단락 시스템 내에서 사용할 수 있는 구성 요소를 선택할 수도 있습니다.
  • 표준 인스턴스(예: parsys, [responsivegrid](/docs/experience-manager-64/sites-authoring/responsive-layout.md))에는 다양한 단락 시스템이 있습니다.

구조

AEM 구성 요소의 구조가 강력하고 유연하며, 주요 고려 사항은 다음과 같습니다.

• 리소스 유형
• 구성 요소 정의
• 구성 요소의 속성 및 하위 노드
• 대화 상자
• 디자인 대화 상자
• 구성 요소 가용성
• 구성 요소 및 구성 요소가 만드는 컨텐츠

리소스 유형

구조의 주요 요소는 리소스 유형입니다.

• 컨텐츠 구조가 의도를 선언합니다.
• 리소스 유형이 구현합니다.

이것은 시간이 지남에 따라 모양과 생각이 바뀔 때에도, 의도가 시간을 유지하게 해주는 추상적 표현입니다.

구성 요소 정의

구성 요소 기본 사항

구성 요소의 정의는 다음과 같이 분류할 수 있습니다.

• AEM 구성 요소는 Sling을 기반으로 합니다.

• AEM 구성 요소는 다음 위치에 있습니다.

  • HTL: /libs/wcm/foundation/components
  • JSP:/libs/foundation/components

• 프로젝트/사이트별 구성 요소는(일반적으로) 아래에 있습니다.

  • /apps/<myApp>/components

• AEM 표준 구성 요소는 cq:Component으로 정의되며 주요 요소가 있습니다.

  • jcr 속성:

    jcr 속성 목록이러한 변수와 일부 노드는 구성 요소 노드의 기본 구조를 통해 선택 사항일 수 있으며, 속성 및 하위 노드는 cq:Component 정의에 의해 정의됩니다

  • 리소스:

    이러한 요소는 구성 요소에서 사용하는 정적 요소를 정의합니다.

  • 스크립트:

  구성 요소의 결과 인스턴스의 동작을 구현하는 데 사용됩니다.

• 루트 노드:

  • <mycomponent> (cq:Component) - 구성 요소의 계층 노드입니다.

• 중요한 속성:

  • jcr:title - 구성 요소 제목;예를 들어 구성 요소가 구성 요소 브라우저나 사이드 킥에 나열될 때 레이블로 사용됩니다.

  • jcr:description - 구성 요소에 대한 설명구성 요소 브라우저 또는 사이드 킥에서 마우스 오버 힌트로 사용할 수 있습니다.

  • 클래식 UI:

    • icon.png - 이 구성 요소의 아이콘입니다.
    • thumbnail.png - 이 구성 요소가 단락 시스템 내에 나열되는 경우 표시되는 이미지입니다.

  • Touch UI

    • 자세한 내용은 Touch UI🔗의 구성 요소 아이콘 섹션을 참조하십시오.

• 중요한 하위 노드:

  • cq:editConfig (cq:EditConfig) - 구성 요소의 편집 속성을 정의하고 구성 요소 브라우저 또는 사이드 킥에 구성 요소를 표시할 수 있습니다.

    참고:구성 요소에 대화 상자가 있으면 cq:editConfig가 없는 경우에도 구성 요소 브라우저나 사이드 킥에 자동으로 표시됩니다.

  • cq:childEditConfig (cq:EditConfig) - 자체 UI를 정의하지 않는 하위 구성 요소에 대한 작성자 UI 측면을 제어합니다 cq:editConfig.

  • 터치 활성화 UI:

    • cq:dialog ( nt:unstructured) - 이 구성 요소의 대화 상자. 사용자가 구성 요소를 구성하거나 컨텐츠를 편집할 수 있는 인터페이스를 정의합니다.
    • cq:design_dialog ( nt:unstructured) - 이 구성 요소에 대한 디자인 편집

  • 클래식 UI:

    • dialog ( cq:Dialog) - 이 구성 요소의 대화 상자. 사용자가 구성 요소를 구성하거나 컨텐츠를 편집할 수 있는 인터페이스를 정의합니다.
    • design_dialog ( cq:Dialog) - 이 구성 요소에 대한 디자인 편집.

Touch UI의 구성 요소 아이콘

구성 요소에 대한 아이콘 또는 약어는 개발자가 구성 요소를 만들 때 구성 요소의 JCR 속성을 통해 정의됩니다. 이러한 속성은 다음 순서로 평가되며 발견된 첫 번째 유효한 속성이 사용됩니다.

1. cq:icon - 구성 요소 브라우저에 표시할 Coral UI 라이브러리의 표준 아이콘을 가리키는 문자열 속성

   • Coral 아이콘의 HTML 속성 값을 사용합니다.

2. abbreviation - 구성 요소 브라우저에서 구성 요소 이름의 약어를 사용자 지정하는 문자열 속성

   • 약어는 두 문자로 제한해야 합니다.

   • 빈 문자열을 제공하면 jcr:title 속성의 처음 두 문자로부터 약어를 빌드합니다.

     • 예를 들어 "Image"의 "Im"
     • 현지화된 제목이 약어를 빌드하는 데 사용됩니다.

   • 약어는 구성 요소에 번역 힌트로 사용되는 abbreviation_commentI18n 속성이 있는 경우에만 변환됩니다.

3. cq:icon.png 또는 cq:icon.svg - 구성 요소 브라우저에 표시되는 이 구성 요소의 아이콘

   • 20 x 20 픽셀은 표준 구성 요소의 아이콘 크기입니다.

     • 더 큰 아이콘의 크기는 작아집니다(클라이언트측).

   • 권장되는 색상은 rgb(112, 112, 112) > #707070입니다.

   • 표준 구성 요소 아이콘의 배경이 투명합니다.

   • .png 및 .svg 파일만 지원됩니다.

   • Eclipse 플러그인을 통해 파일 시스템에서 가져오는 경우 파일 이름을 _cq_icon.png 또는 _cq_icon.svg로 이스케이프해야 합니다.

   • .png 둘 다 .svg 있으면 선례를 뒤집는다

위의 속성( cq:icon, abbreviation, cq:icon.png 또는 cq:icon.svg)이 구성 요소에 없는 경우:

• 시스템이 sling:resourceSuperType 속성 다음에 있는 수퍼 구성 요소에서 동일한 속성을 검색합니다.
• 수퍼 구성 요소 수준에서 아무 것도 없거나 빈 약어를 찾을 수 없으면 시스템은 현재 구성 요소의 jcr:title 속성의 첫 번째 문자로부터 약어를 작성합니다.

수퍼 구성 요소에서 아이콘 상속을 취소하려면, 구성 요소에서 빈 abbreviation 속성을 설정하면 기본 동작으로 돌아갑니다.

구성 요소 콘솔에는 특정 구성 요소에 대한 아이콘이 정의된 방식이 표시됩니다.

SVG 아이콘 예

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
     width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
    <ellipse cx="5" cy="5" rx="3" ry="3" fill="#707070"/>
    <ellipse cx="15" cy="5" rx="4" ry="4" fill="#707070"/>
    <ellipse cx="5" cy="15" rx="5" ry="5" fill="#707070"/>
    <ellipse cx="15" cy="15" rx="4" ry="4" fill="#707070"/>
</svg>

구성 요소의 속성 및 하위 노드

구성 요소를 정의하는 데 필요한 많은 노드/속성은 두 UI 모두에서 일반적이지만, 구성 요소가 두 환경에서 모두 작동할 수 있도록 독립적입니다.

구성 요소는 cq:Component 유형의 노드이며 다음 속성 및 하위 노드를 가집니다.

Text 구성 요소(두 버전 중 하나)를 보면 다음 요소가 표시됩니다.

• HTL ( /libs/wcm/foundation/components/text)

  

• JSP ( /libs/foundation/components/text)

  

특정 관심 영역의 속성은 다음과 같습니다.

• jcr:title - 구성 요소의 제목구성 요소를 식별하는 데 사용할 수 있습니다. 예를 들어 구성 요소 브라우저 또는 사이드 킥의 구성 요소 목록에 표시됩니다

• jcr:description - 구성 요소에 대한 설명사이드 킥의 구성 요소 목록에서 마우스 오버 힌트로 사용할 수 있습니다

• sling:resourceSuperType:구성 요소를 확장할 때(정의를 재정의하여) 상속의 경로를 나타냅니다.

특정 관심 영역의 하위 노드에는 다음이 포함됩니다.

• cq:editConfig ( cq:EditConfig) - 시각적 측면을 제어합니다.예를 들어 막대형 또는 위젯의 모양을 정의하거나 사용자 정의된 컨트롤을 추가할 수 있습니다

• cq:childEditConfig ( cq:EditConfig) - 자체 정의가 없는 하위 구성 요소의 시각적 측면을 제어합니다

• 터치 활성화 UI:

  • cq:dialog ( nt:unstructured) - 이 구성 요소의 컨텐츠를 편집할 수 있는 대화 상자를 정의합니다
  • cq:design_dialog ( nt:unstructured) - 이 구성 요소에 대한 디자인 편집 옵션을 지정합니다

• 클래식 UI:

  • dialog ( cq:Dialog) - 이 구성 요소의 컨텐츠를 편집할 수 있는 대화 상자(클래식 UI에만 해당됨)를 정의합니다
  • design_dialog ( cq:Dialog) - 이 구성 요소에 대한 디자인 편집 옵션을 지정합니다
  • icon.png - 사이드 킥에서 구성 요소의 아이콘으로 사용할 그래픽 파일
  • thumbnail.png - 사이드 킥에서 구성 요소의 축소판으로 사용할 그래픽 파일

대화 상자

대화 상자는 작성자가 해당 구성 요소를 구성하고 입력할 수 있는 인터페이스를 제공하므로 구성 요소의 주요 요소입니다.

구성 요소의 복잡성에 따라 대화 상자를 짧게 유지하고 입력 필드를 정렬하려면 대화 상자에 하나 이상의 탭이 필요할 수 있습니다.

대화 상자 정의는 UI에 따라 다릅니다.

• 터치 활성화 UI

  • cq:dialog ( nt:unstructured) 노드:

    • 이 구성 요소의 컨텐츠를 편집할 대화 상자 정의

    • 터치 지원 UI에 해당됩니다

    • Granite UI 구성 요소를 사용하여 정의됩니다

    • 표준 Sling 컨텐츠 구조로서 속성 sling:resourceType이 있어야 합니다.

    • 도움말 아이콘( ? helpPath 아이콘)을 선택합니다.

      • 즉시 사용 가능한 구성 요소의 경우 설명서에서 페이지를 참조하는 경우가 많습니다.
      • helpPath 이 지정되지 않은 경우 기본 URL(설명서 개요 페이지)이 표시됩니다.

  

  대화 상자 내에서 개별 필드가 정의됩니다.

  

• 클래식 UI

  • dialog ( cq:Dialog노드)

    • 이 구성 요소의 컨텐츠를 편집할 대화 상자 정의

    • 클래식 UI에 따라 다름

    • ExtJS 위젯을 사용하여 정의됩니다

    • ExtJS를 참조하는 xtype 속성이 있습니다.

    • 도움말 단추를 선택할 때 액세스하는 상황에 맞는 도움말 리소스(절대 또는 상대 경로)를 정의하는 속성 helpPath이 있을 수 있습니다.

      • 즉시 사용 가능한 구성 요소의 경우 설명서에서 페이지를 참조하는 경우가 많습니다.
      • helpPath 이 지정되지 않은 경우 기본 URL(설명서 개요 페이지)이 표시됩니다.

  

  대화 상자 내에서 개별 필드가 정의됩니다.

  

  클래식 대화 상자 내에서:

  • 대화 상자를 cq:Dialog 만들 수 있습니다. 이 대화 상자는 텍스트 구성 요소와 같이 단일 탭을 제공하거나, 텍스트 이미지 구성 요소와 같이 여러 탭이 필요한 경우 대화 상자를 cq:TabPanel로 정의할 수 있습니다.
  • cq:WidgetCollection( items)은 입력 필드( cq:Widget) 또는 추가 탭( cq:Widget)의 베이스를 제공하는 데 사용됩니다. 이 계층은 확장할 수 있습니다.

디자인 대화 상자

디자인 대화 상자는 컨텐츠를 편집하고 구성하는 데 사용되는 대화 상자와 매우 유사하지만 작성자가 해당 구성 요소에 대한 디자인 세부 사항을 구성하고 제공하는 인터페이스를 제공합니다.

디자인 대화 상자는 제목 및 이미지와 같은 모든 구성 요소에 필요한 것은 아니지만 디자인 모드에서 사용할 수 ​​있지만 ​​모두 디자인 대화 ​​상자는 사용할 수 없습니다.

단락 시스템(예: parsys)의 디자인 대화 상자는 사용자가 페이지에서 구성 요소 브라우저 또는 사이드 킥에서 선택하여 사용할 수 있는 특정 기타 구성 요소를 지정할 수 있도록 하는 특별한 사례입니다.

단락 시스템에 구성 요소 추가

구성 요소가 정의되면 사용할 수 있도록 해야 합니다. 단락 시스템에서 구성 요소를 사용할 수 있도록 하려면 다음 중 하나를 수행할 수 있습니다.

1. 페이지에 대해 디자인 모드를 열고 필요한 구성 요소를 활성화합니다.

2. 아래의 템플릿 정의의 components 속성에 필요한 구성 요소를 추가합니다.

   /etc/designs/<*yourProject*>/jcr:content/<*yourTemplate*>/par

   예를 들어 다음을 참조하십시오.

   /etc/designs/geometrixx/jcr:content/contentpage/par

   

구성 요소 및 구성 요소가 만드는 컨텐츠

페이지에서 제목 구성 요소의 인스턴스를 만들고 구성하는 경우:<content-path>/Prototype.html

• 터치 활성화 UI

  

• 클래식 UI

  

저장소 내에서 만들어진 컨텐츠의 구조를 확인할 수 있습니다.

특히 제목​에 대한 실제 텍스트를 보면

• 정의(두 UI 모두에 대해)에는 name= ./jcr:title 속성이 있습니다.

  • /libs/foundation/components/title/cq:dialog/content/items/column/items/title
  • /libs/foundation/components/title/dialog/items/title

• 컨텐츠 내에서 작성자 컨텐츠를 포함하는 속성 jcr:title을 생성합니다.

정의된 속성은 개별 정의에 따라 다릅니다. 비록 그것들이 위보다 더 복잡할 수 있지만 그들은 여전히 같은 기본 원칙을 따르고 있습니다.

구성 요소 계층 및 상속

AEM 내의 구성 요소는 3개의 서로 다른 계층을 따릅니다.

• 리소스 유형 계층

  이 확장은 sling:resourceSuperType 속성을 사용하여 구성 요소를 확장하는 데 사용됩니다. 이렇게 하면 구성 요소가 상속될 수 있습니다. 예를 들어, 텍스트 구성 요소는 표준 구성 요소의 다양한 속성을 상속합니다.

  • 스크립트(Sling에 의해 해결됨)
  • 대화 상자
  • 설명(축소판 이미지, 아이콘 등 포함)

• 컨테이너 계층

  이 필드는 하위 구성 요소에 대한 구성 설정을 채우는 데 사용되며 parsys 시나리오에서 가장 일반적으로 사용됩니다.

  예를 들어 편집 막대 단추, 컨트롤 세트 레이아웃(편집 막대, 롤오버), 대화 상자 레이아웃(인라인, 부동)에 대한 구성 설정은 상위 구성 요소에 정의되고 하위 구성 요소에 전파될 수 있습니다.

  cq:editConfig 및 cq:childEditConfig의 구성 설정(편집 기능과 관련된)이 전파됩니다.

• 계층 포함

  이는 포함 시퀀스에 의해 런타임 시 적용됩니다.

  디자이너는 이 계층 구조를 사용하여 렌더링의 다양한 디자인 측면에 대한 기본 역할을 합니다.레이아웃 정보, css 정보, parsys에서 사용할 수 있는 구성 요소 등을 포함합니다.

동작 편집

이 섹션에서는 구성 요소의 편집 동작을 구성하는 방법을 설명합니다. 여기에는 구성 요소에 사용할 수 있는 작업, 즉석 편집기의 특성 및 구성 요소의 이벤트와 관련된 청취자와 같은 특성이 포함됩니다.

터치 지원 UI와 클래식 UI 양쪽에서 일반적으로 구성되며, 특정한 차이점이 있습니다.

구성 요소의 편집 동작은 구성 요소 노드(유형 cq:Component)의 아래에 cq:EditConfig 유형의 cq:editConfig 노드를 추가하고 특정 속성 및 하위 노드를 추가하여 구성됩니다. 다음 속성 및 하위 노드를 사용할 수 있습니다.

• cq:editConfig 노드 속성:

  • cq:actions ( String array):구성 요소에서 수행할 수 있는 작업을 정의합니다.

  • cq:layout ( String)::클래식 UI에서 구성 요소를 편집하는 방법을 정의합니다.

  • cq:dialogMode ( String):구성 요소 대화 상자가 클래식 UI에서 열리는 방식을 정의합니다

    • 터치 지원 UI에서 대화 상자는 항상 데스크탑 모드로 유지되며 모바일에서 전체 화면으로 자동으로 열립니다.

  • cq:emptyText ( String):시각적 컨텐츠가 없을 때 표시되는 텍스트를 정의합니다.

  • cq:inherit ( Boolean):누락된 값이 상속된 구성 요소에서 상속되는지 여부를 정의합니다.

  • dialogLayout (문자열):대화 상자를 여는 방법을 정의합니다.

• cq:editConfig 하위 노드:

  • cq:dropTargets (노드 유형 nt:unstructured):컨텐츠 파인더의 자산에서 삭제를 허용할 수 있는 드롭 대상 목록을 정의합니다.

    • 여러 드롭 대상은 클래식 UI에서만 사용할 수 있습니다.
    • 터치 활성화 UI에서는 단일 드롭 대상이 허용됩니다.

  • cq:actionConfigs (노드 유형 nt:unstructured):cq:actions 목록에 추가된 새 작업 목록을 정의합니다.

  • cq:formParameters (노드 유형 nt:unstructured):대화 상자 양식에 추가되는 추가 매개 변수를 정의합니다.

  • cq:inplaceEditing (노드 유형 cq:InplaceEditingConfig):구성 요소에 대한 즉석 편집 구성을 정의합니다.

  • cq:listeners (노드 유형 cq:EditListenersConfig):구성 요소에서 작업이 발생하기 전이나 후에 수행되는 작업을 정의합니다.

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PAGE"/>
</jcr:root>

저장소에 기존 구성이 많습니다. 특정 속성 또는 하위 노드를 쉽게 검색할 수 있습니다.

• cq:editConfig 노드의 속성을 찾으려면(예: ).cq:actions CRXDE Lite​에서 쿼리 도구를 사용하고 다음 XPath 쿼리 문자열로 검색할 수 있습니다.

  //element(cq:editConfig, cq:EditConfig)[@cq:actions]

• cq:editConfig의 하위 노드를 찾기 위해 예를 들어 cq:DropTargetConfig 유형의 cq:dropTargets을 검색할 수 있습니다.CRXDE Lite​에서 쿼리 도구를 사용하고 다음 XPath 쿼리 문자열로 검색할 수 있습니다.

  //element(cq:dropTargets, cq:DropTargetConfig)

구성 요소 자리 표시자

구성 요소에 컨텐츠가 없는 경우에도 구성 요소는 항상 작성자가 볼 수 있는 일부 HTML을 렌더링해야 합니다. 그렇지 않으면 편집기 인터페이스에서 보이지 않게 되어 기술적으로 페이지 및 편집기에서 보이지 않게 될 수 있습니다. 이러한 경우 작성자는 빈 구성 요소를 선택하고 상호 작용할 수 없습니다.

이러한 이유로, 페이지가 페이지 편집기에서 렌더링될 때(WCM 모드가 edit 또는 preview인 경우) 보이는 출력을 렌더링하지 않는 한 구성 요소는 자리 표시자를 렌더링해야 합니다.
자리 표시자에 대한 일반적인 HTML 마크업은 다음과 같습니다.

<div class="cq-placeholder" data-emptytext="Component Name"></div>

위의 자리 표시자 HTML을 렌더링하는 일반적인 HTL 스크립트는 다음과 같습니다.

<div class="cq-placeholder" data-emptytext="${component.properties.jcr:title}"
     data-sly-test="${(wcmmode.edit || wcmmode.preview) && isEmpty}"></div>

이전 예에서 isEmpty은 구성 요소에 컨텐츠가 없고 작성자에게 표시되지 않는 경우에만 true인 변수입니다.

반복을 방지하기 위해 Adobe은 구성 요소 구현자가 코어 구성 요소에서 제공하는 것과 마찬가지로 이러한 자리 표시자에 대해 HTL 템플릿을 사용하는 것을 권장합니다.

이전 링크에서 템플릿 사용은 다음 HTL 줄로 수행됩니다.

<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html"
     data-sly-call="${template.placeholder @ isEmpty=!model.text}"></sly>

이전 예에서 model.text은 컨텐츠에 컨텐츠가 있고 가 볼 때만 true인 변수입니다.

이 템플릿의 사용 예는 제목 구성 요소에서와 같이, 핵심 구성 요소에서 볼 수 있습니다.

cq:EditConfig 속성으로 구성

cq:actions

cq:actions 속성( String array)은 구성 요소에서 수행할 수 있는 하나 또는 여러 작업을 정의합니다. 구성에 다음 값을 사용할 수 있습니다.

다음 구성에서는 편집 단추, 스페이서, 삭제 및 삽입 단추를 구성 요소 편집 표시줄에 추가합니다.

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit,-,delete,insert]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

다음 구성은 "기본 프레임워크에서 상속된 구성" 텍스트를 구성 요소 편집 표시줄에 추가합니다.

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[text:Inherited Configurations from Base Framework]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

cq:layout(클래식 UI만 해당)

cq:layout 속성( String)은 클래식 UI에서 구성 요소를 편집할 수 있는 방법을 정의합니다. 다음 값을 사용할 수 있습니다.

다음 구성은 구성 요소 편집 표시줄에 편집 단추를 추가합니다.

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:dialogMode(클래식 UI만 해당)

구성 요소를 편집 대화 상자에 연결할 수 있습니다. cq:dialogMode 속성( String)은 구성 요소 대화 상자가 클래식 UI에서 열리는 방식을 정의합니다. 다음 값을 사용할 수 있습니다.

다음 구성은 편집 단추와 부동 대화 상자가 있는 편집 막대를 정의합니다.

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:emptyText

cq:emptyText 속성( String)은 시각적 컨텐츠가 없을 때 표시되는 텍스트를 정의합니다. 기본값은 다음과 같습니다.Drag components or assets here

cq:inherit

cq:inherit 속성( boolean)은 누락된 값이 상속된 구성 요소에서 상속되는지 여부를 정의합니다. 기본값은 false입니다.

dialogLayout

dialogLayout 속성은 기본적으로 대화 상자를 여는 방법을 정의합니다.

• fullscreen 값을 사용하면 대화 상자가 전체 화면에서 열립니다.
• 속성이 없거나 비어 있는 값은 기본적으로 대화 상자가 정상적으로 열립니다.
• 사용자는 항상 대화 상자 내에서 전체 화면 모드를 전환할 수 있습니다.
• 클래식 UI에는 적용되지 않습니다.

cq:EditConfig 하위 노드를 사용하여 구성

cq:dropTargets

cq:dropTargets 노드(노드 유형 nt:unstructured)는 컨텐츠 파인더에서 드래그한 자산에서 드롭을 허용할 수 있는 드롭 대상 목록을 정의합니다. 이 클래스는 cq:DropTargetConfig 유형의 노드 모음으로 사용됩니다.

cq:DropTargetConfig 유형의 각 하위 노드는 구성 요소에 드롭 대상을 정의합니다. 노드 이름은 다음과 같이 JSP에서 사용해야 효과적인 드롭 대상인 DOM 요소에 할당된 CSS 클래스 이름을 생성할 수 있으므로 중요합니다.

<drop target css class> = <drag and drop prefix> + 
 <node name of the drop target in the edit configuration>

<*drag and drop prefix*> 은 Java 속성으로 정의됩니다.

com.day.cq.wcm.api.components.DropTarget.CSS_CLASS_PREFIX.

예를 들어 클래스 이름은 다운로드 구성 요소의 JSP에서 다음과 같이 정의됩니다
( /libs/foundation/components/download/download.jsp) 여기서 file은 다운로드 구성 요소의 편집 구성에 있는 드롭 대상의 노드 이름입니다.

String ddClassName = DropTarget.CSS_CLASS_PREFIX + "file";

cq:DropTargetConfig 유형의 노드에는 다음 속성이 있어야 합니다.

다음 구성은 다운로드 구성 요소에서 가져옵니다. 이를 통해 media 그룹의 모든 자산(mime 유형은 임의의 문자열일 수 있음)을 컨텐츠 파인더에서 구성 요소로 끌어 놓을 수 있습니다. 드롭 후 구성 요소 속성 fileReference이(가) 업데이트됩니다.

    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <file
            jcr:primaryType="cq:DropTargetConfig"
            accept="[.*]"
            groups="[media]"
            propertyName="./fileReference"/>
    </cq:dropTargets>

cq:actionConfigs(클래식 UI만 해당)

cq:actionConfigs 노드(노드 유형 nt:unstructured)는 cq:actions 속성으로 정의된 목록에 추가되는 새 작업 목록을 정의합니다. cq:actionConfigs의 각 하위 노드는 위젯을 정의하여 새 작업을 정의합니다.

다음 샘플 구성은 새 단추(클래식 UI에 대한 구분 기호 포함)를 정의합니다.

• xtype tbseparator;

  • 클래식 UI에서만 사용됩니다.
  • xtype은 무시되므로 이 정의는 터치 지원 UI에서 무시됩니다(작업 도구 모음이 터치 지원 UI에서 다르게 구성되므로 구분 기호는 필요).

• 주석 관리 단추를 사용하여 CQ_collab_forum_openCollabAdmin() 처리기 함수를 실행합니다.

<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    cq:actions="[EDIT,COPYMOVE,DELETE,INSERT]"
    jcr:primaryType="cq:EditConfig">
    <cq:actionConfigs jcr:primaryType="nt:unstructured">
        <separator0
            jcr:primaryType="nt:unstructured"
            xtype="tbseparator"/>
        <manage
            jcr:primaryType="nt:unstructured"
            handler="function(){CQ_collab_forum_openCollabAdmin();}"
            text="Manage comments"/>
    </cq:actionConfigs>
</jcr:root>

cq:formParameters

cq:formParameters 노드(노드 유형 nt:unstructured)는 대화 상자 양식에 추가되는 추가 매개 변수를 정의합니다. 각 속성은 양식 매개 변수에 매핑됩니다.

다음 구성은 photos/primary 값으로 설정된 name 매개 변수를 대화 상자 양식에 추가합니다.

    <cq:formParameters
        jcr:primaryType="nt:unstructured"
        name="photos/primary"/>

cq:inplaceEditing

cq:inplaceEditing 노드(노드 유형 cq:InplaceEditingConfig)는 구성 요소에 대한 즉석 편집 구성을 정의합니다. 여기에는 다음 속성이 있을 수 있습니다.

다음 구성은 구성 요소를 즉석 편집할 수 있도록 하고 plaintext 을 편집기 유형으로 정의합니다.

    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="plaintext"/>

cq:listeners

cq:listeners 노드(노드 유형 cq:EditListenersConfig)는 구성 요소에 대한 작업 전후에 발생하는 작업을 정의합니다. 다음 표에서는 가능한 속성을 정의합니다.

이벤트 핸들러는 사용자 지정 구현으로 구현할 수 있습니다. 예를 들어 project.customerAction이 정적 메서드인 경우:

afteredit = "project.customerAction"

다음 예는 REFRESH_INSERTED 구성과 같습니다.

afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"

다음 구성을 사용하면 구성 요소가 삭제, 편집, 삽입 또는 이동한 후 페이지를 새로 고칩니다.

    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterdelete="REFRESH_PAGE"
        afteredit="REFRESH_PAGE"
        afterinsert="REFRESH_PAGE"
        afterMove="REFRESH_PAGE"/>