AEM 구성 요소 - 기본 사항 aem-components-the-basics

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

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

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

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

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

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

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

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

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

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

• 자세한 내용은 보안 검사 목록 - 개발 우수 사례 자세한 내용

터치 활성화 UI
표준 사용자 인터페이스 는 AEM 5.6.0에서 미리 보기로 도입되었으며 6.x에서 확장되었습니다. Adobe Campaign은 Coral UI 및 Granite UI.

클래식 UI
CQ 5.1에서 도입된 ExtJS 기술을 기반으로 한 사용자 인터페이스

페이지:

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

단락 시스템:

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

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 측면을 제어합니다 cq:editConfig.

• 터치 지원 UI:

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

• 클래식 UI:

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

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

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

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

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

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

  • 재산이 있다 sling:resourceType표준 Sling 컨텐츠 구조로서

  • 속성을 가질 수 있습니다. helpPath 도움말 아이콘( ? 아이콘)을 선택합니다.

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

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

클래식 UI

• dialog ( cq:Dialog) 노드

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

  • 클래식 UI에 따라 다름

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

  • 재산이 있다 xtype: ExtJS를 참조합니다

  • 속성을 가질 수 있습니다. helpPath 컨텍스트 구분 도움말 리소스(절대 또는 상대 경로)를 도움말 단추가 선택되어 있습니다.

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

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

클래식 대화 상자 내에서:

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

터치 활성화 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 작성자 컨텐츠를 보관합니다.

리소스 유형 계층

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

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

컨테이너 계층

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

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

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

계층 포함

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

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

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): 구성 요소에서 작업이 발생하기 전이나 후에 수행되는 작업을 정의합니다.

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

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

의 하위 노드를 찾으려면 cq:editConfig, 예: cq:dropTargets: 유형 cq:DropTargetConfig; ​ CRXDE Lite ​에서 쿼리 도구를 사용하고 다음 XPath 쿼리 문자열로 검색할 수 있습니다.

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

xtype에 의해 정의된 구분 기호 tbseparator;

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

이름이 지정된 단추 댓글 관리 처리기 함수를 실행합니다 CQ_collab_forum_openCollabAdmin().