AEM 구성 요소 개발(클래식 UI) developing-aem-components-classic-ui

CRXDE Lite을 사용하여 다음 위치에서 새 구성 요소 폴더를 만듭니다.

/ apps/<myProject>/components/<myComponent>

libs와 같이 노드 구조를 다시 만든 다음 텍스트 구성 요소와 같은 기존 구성 요소의 정의를 복사합니다. 예를 들어, 텍스트 구성 요소 복사본을 사용자 지정하는 방법은 다음과 같습니다.

• 변환 전: /libs/foundation/components/text
• 끝 /apps/myProject/components/text

수정 jcr:title 새 이름을 반영하도록 했습니다.

새 구성 요소 폴더를 열고 필요한 사항을 변경합니다. 또한 폴더에서 관련 없는 정보를 삭제합니다.

다음과 같이 변경할 수 있습니다.

• 대화 상자에서 새 필드 추가

  • cq:dialog - 터치 지원 UI에 대한 대화 상자
  • dialog - 클래식 UI에 대한 대화 상자

• 교체 .jsp 파일(새 구성 요소 이름 뒤에 이름 지정)

• 원하는 경우 전체 구성 요소를 완전히 다시 작동합니다

예를 들어, 표준 텍스트 구성 요소의 사본을 만드는 경우, 대화 상자에 필드를 더 추가한 다음 .jsp 여기서 만든 입력을 처리하는 중입니다.

새 구성 요소가 나타나려면 다음 노드 중 하나가 있고 제대로 초기화되어야 합니다.

• cq:dialog - 터치 지원 UI에 대한 대화 상자
• dialog - 클래식 UI에 대한 대화 상자
• cq:editConfig - 구성 요소가 편집 환경에서 작동하는 방식(예: 드래그 앤 드롭)
• design_dialog - 디자인 모드 대화 상자(클래식 UI만 해당)

다음 방법 중 하나를 사용하여 단락 시스템에서 새 구성 요소를 활성화합니다.

• CRXDE Lite을 사용하여 값 추가 <path-to-component> (예: /apps/geometrixx/components/myComponent) 를 노드의 속성 구성 요소에 /etc/designs/geometrixx/jcr:content/contentpage/par
• 다음 지침에 따라 단락 시스템에 새 구성 요소 추가

AEM WCM에서 웹 사이트에서 페이지를 열고 방금 만든 유형의 새 단락을 삽입하여 구성 요소가 제대로 작동하는지 확인합니다.

예를 들어 단락 시스템을 사용하는 작성 환경 내의 페이지에 액세스합니다 <contentPath>/Test.html.

다음 방법 중 하나를 사용하여 디자인 모드로 전환합니다.

• 추가 ?wcmmode=design 를 클릭하여 URL의 끝에 다시 액세스해야 합니다. 예를 들어

  <contextPath>/ Test.html?wcmmode=design

• 사이드 킥에서 디자인 클릭

이제 디자인 모드에서 단락 시스템을 편집할 수 있습니다.

편집을 클릭합니다.

단락 시스템에 속하는 구성 요소 목록이 표시됩니다. 새 구성 요소도 나열됩니다.

구성 요소를 활성화(또는 비활성화)하여 페이지를 편집할 때 작성자에게 제공할 구성 요소를 결정할 수 있습니다.

구성 요소를 활성화한 다음 일반 편집 모드로 돌아가 사용할 수 있는지 확인합니다.

표준 텍스트 이미지 구성 요소를 /libs/foundation/components/textimage Geometrixx 구성 요소 폴더로, /apps/geometrixx/components대상 노드 이름으로 textimage 를 사용하는 경우 구성 요소로 이동하고 마우스 오른쪽 단추를 클릭한 다음 대상 디렉토리로 복사 및 탐색을 선택하여 구성 요소를 복사합니다.

이 예제를 단순하게 유지하려면 복사한 구성 요소로 이동하고 다음 항목을 제외하고 새 텍스트 이미지 노드의 모든 하위 노드를 삭제합니다.

• 대화 상자 정의: textimage/dialog
• 구성 요소 스크립트: textimage/textimage.jsp
• 구성 노드 편집(자산을 드래그하여 놓을 수 있음): textimage/cq:editConfig

구성 요소 메타데이터를 편집합니다.

• 구성 요소 이름

  • 설정 jcr:description to Text Image Component (Extended)
  • 설정 jcr:title to Text Image (Extended)

• 그룹 - 사이드 킥에 구성 요소가 나열되는 위치(그대로 둡니다)

  • Leave componentGroup 설정 General

• 새 구성 요소의 상위 구성 요소(표준 텍스트 이미지 구성 요소)

  • 설정 sling:resourceSuperType to foundation/components/textimage

이 단계 후에 구성 요소 노드는 다음과 같이 표시됩니다.

변경 sling:resourceType 이미지의 편집 구성 노드 속성(속성: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) geometrixx/components/textimage.

이렇게 하면 이미지가 페이지의 구성 요소에 드롭되면 sling:resourceType 확장된 textimage 구성 요소의 속성이 다음으로 설정되어 있습니다. geometrixx/components/textimage.

새 옵션을 포함하도록 구성 요소의 대화 상자를 수정합니다. 새 컴포넌트는 원본과 동일한 대화 상자의 부품을 상속합니다. 우리가 만드는 유일한 추가는 고급 탭, 추가 이미지 위치 드롭다운 목록, 옵션 포함 왼쪽 및 Right:

• 을(를) 종료하십시오. textimage/dialog속성이 변경되지 않았습니다.

방법 참고 textimage/dialog/items 에는 네 개의 하위 노드가 있으며, tab1에서 tab4까지 텍스트타임 대화 상자의 네 개의 탭을 나타냅니다.

• 처음 두 탭(tab1 및 tab2)의 경우:

  • xtype을 포함(표준 구성 요소에서 상속)으로 변경합니다.
  • 값이 있는 경로 속성 추가 /libs/foundation/components/textimage/dialog/items/tab1.infinity.json및 /libs/foundation/components/textimage/dialog/items/tab2.infinity.json각각 입니다.
  • 다른 모든 속성 또는 하위 노드를 제거합니다.

• tab3의 경우:

  • 속성 및 하위 노드를 변경 없이 그대로 둡니다

  • 에 새 필드 정의 추가 tab3/items, 노드 위치 유형 cq:Widget

  • 새 속성에 대해 다음 속성(문자열 유형)을 설정합니다 tab3/items/position노드:

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • 하위 노드 추가 position/options 유형 cq:WidgetCollection 이미지 배치에 대한 두 가지 선택 사항을 나타내는 다음 두 노드 아래에 유형의 o1과 o2가 생성됩니다 nt:unstructured.

  • 노드 position/options/o1 속성을 설정합니다. text to Left 및 value to left.

  • 노드 position/options/o2 속성을 설정합니다. text to Right 및 value to right.

• 탭4 삭제

이미지 위치는 컨텐츠에서 imagePosition를 나타내는 노드의 속성 textimage 단락. 이러한 단계를 수행하면 구성 요소 대화 상자가 다음과 같이 표시됩니다.

구성 요소 스크립트 확장, textimage.jsp: 새 매개 변수를 추가로 처리할 수 있습니다.

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

강조했다. %><div class="image"><% 를 사용하여 이 태그에 대한 사용자 지정 스타일을 생성합니다.

// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
     if (properties.get("imagePosition", "left").equals("right")) {
          style = "style=\"float:right\"";
     }
     %><div <%= style %> class="image"><%

구성 요소를 저장소에 저장합니다. 구성 요소를 테스트할 준비가 되었습니다.

표준 이미지 구성 요소를 /libs/foundation/components/image Geometrixx 구성 요소 폴더로, /apps/geometrixx/components: 이미지를 대상 노드 이름으로 사용합니다.

구성 요소 메타데이터를 편집합니다.

• 설정 jcr:title to Image (Extended)

다음으로 이동 /apps/geometrixx/components/image/dialog/items/image.

새 속성 추가:

• 이름: allowUpload
• 유형: String
• 값: false

클릭 모두 저장. 구성 요소를 테스트할 준비가 되었습니다.

Geometrixx(예: 영어/회사)로 페이지를 엽니다.

디자인 모드로 전환하고 이미지(확장)를 활성화합니다.

다시 편집 모드로 전환한 다음 단락 시스템에 추가합니다. 다음 그림에서 원본 이미지 구성 요소와 방금 만든 이미지 구성 요소의 차이점을 볼 수 있습니다.

원본 이미지 구성 요소:

새 이미지 구성 요소:

이제 구성 요소를 사용할 준비가 되었습니다.