사용자 지정 구성 요소 만들기

마지막 업데이트: 2023-12-01

주제:
SPA Editor
이 항목에 대한 자세한 내용 보기

작성 대상:
Beginner

Developer

AEM SPA 편집기에 사용할 사용자 지정 구성 요소를 만드는 방법을 알아봅니다. 작성자 대화 상자 및 Sling 모델을 개발하여 JSON 모델을 확장하여 사용자 지정 구성 요소를 채우는 방법에 대해 알아봅니다.

목표

AEM에서 제공하는 JSON 모델 API를 조작하는 Sling 모델의 역할을 이해합니다.
AEM 구성 요소 대화 상자를 만드는 방법을 이해합니다.
다음을 만드는 방법 알아보기 사용자 정의 AEM 편집기 프레임워크와 호환되는 SPA 구성 요소입니다.

빌드할 내용

이전 장에서는 SPA 구성 요소를 개발하고 매핑하는 데 중점을 두었습니다 기존 AEM 핵심 구성 요소. 이 장에서는 를 만들고 확장하는 방법에 중점을 둡니다 신규 AEM 구성 요소를 사용하고 AEM에서 제공하는 JSON 모델을 조작합니다.

단순 Custom Component 순-새 AEM 구성 요소를 만드는 데 필요한 단계를 설명합니다.

메시지가 모두 대문자로 표시됨

사전 요구 사항

설정에 필요한 도구 및 지침 검토 로컬 개발 환경.

코드 가져오기

Git을 통해 이 자습서의 시작점을 다운로드하십시오.

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/custom-component-start

Maven을 사용하여 로컬 AEM 인스턴스에 코드 베이스를 배포합니다.
```
$ mvn clean install -PautoInstallSinglePackage
```
사용 중인 경우 AEM 6.x 추가 classic 프로필:
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```
기존 패키지를 위한 완료된 패키지 설치 WKND 참조 사이트. 에서 제공한 이미지 WKND 참조 사이트 는 WKND SPA에서 재사용됩니다. 패키지를 설치하려면 AEM 패키지 관리자.

에서 완성된 코드를 항상 볼 수 있습니다. GitHub 또는 분기로 전환하여 코드를 로컬에서 확인합니다. Angular/custom-component-solution.

AEM 구성 요소 정의

AEM 구성 요소는 노드 및 속성으로 정의됩니다. 프로젝트에서 이러한 노드 및 속성은 XML 파일로 표시됩니다. ui.apps 모듈. 그런 다음,에서 AEM 구성 요소를 만듭니다. ui.apps 모듈.

노트

에 대한 빠른 새로 고침 AEM 구성 요소의 기본 사항이 유용할 수 있습니다..

를 엽니다. ui.apps 원하는 IDE의 폴더입니다.
다음으로 이동 ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components 폴더 만들기 custom-component.
이름이 인 파일 만들기 .content.xml 아래에 custom-component 폴더를 삭제합니다. 채우기 custom-component/.content.xml 다음을 사용하여:
```
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Custom Component"
    componentGroup="WKND SPA Angular - Content"/>
```
jcr:primaryType="cq:Component" - 이 노드가 AEM 구성 요소임을 식별합니다.

jcr:title 는 콘텐츠 작성자에게 표시되는 값이며 componentGroup 제작 UI에서 구성 요소의 그룹화를 결정합니다.
아래 custom-component 폴더, (이)라는 다른 폴더를 만듭니다. _cq_dialog.

아래 _cq_dialog 폴더 (이)라는 이름의 파일 만들기 .content.xml 다음을 입력합니다.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Custom Component"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <message
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="The text to display on the component."
                                                fieldLabel="Message"
                                                name="./message"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

사용자 지정 구성 요소 정의

위의 XML 파일은 Custom Component. 파일의 중요한 부분은 내부입니다 <message> 노드. 이 대화 상자에는 간단한 항목이 포함되어 있습니다. textfield 명명된 Message 및 textifield의 값을 message.

값을 표시하기 위해 옆에 슬링 모델 이 만들어집니다. message JSON 모델을 통한 속성.

노트

훨씬 더 많은 항목을 볼 수 있습니다. 핵심 구성 요소 정의를 보는 대화 상자의 예. 다음과 같은 추가 양식 필드를 볼 수도 있습니다 select, textarea, pathfield, 아래에서 사용 가능 /libs/granite/ui/components/coral/foundation/form 위치: CRXDE-Lite.

기존 AEM 구성 요소를 사용하여 HTL 일반적으로 스크립트가 필요합니다. SPA은 구성 요소를 렌더링하므로 HTL 스크립트가 필요하지 않습니다.

Sling 모델 만들기

Sling 모델은 JCR에서 Java™ 변수로 데이터를 쉽게 매핑하는 주석 기반 Java™ "POJO"(일반 이전 Java™ 개체)입니다. Sling 모델 일반적으로 AEM 구성 요소에 대한 복잡한 서버측 비즈니스 논리를 캡슐화하는 역할을 합니다.

SPA 편집기의 컨텍스트에서 슬링 모델은 를 사용하는 기능을 통해 JSON 모델을 통해 구성 요소의 콘텐츠를 노출합니다. Sling 모델 내보내기.

선택한 IDE에서 core 모듈. CustomComponent.java 및 CustomComponentImpl.java 은(는) 이미 챕터 시작 코드의 일부로 만들어지고 스텁아웃되었습니다.

노트

Visual Studio Code IDE를 사용하는 경우 설치하는 것이 도움이 될 수 있습니다 Java™용 확장.
Java™ 인터페이스 열기 CustomComponent.java 위치: core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.java:

Sling 모델로 구현된 Java™ 인터페이스입니다.
업데이트 CustomComponent.java 확장되도록 ComponentExporter 인터페이스:
```
package com.adobe.aem.guides.wknd.spa.angular.core.models;
import com.adobe.cq.export.json.ComponentExporter;

public interface CustomComponent extends ComponentExporter {

    public String getMessage();

}
```
구현 ComponentExporter 인터페이스는 JSON 모델 API에서 슬링 모델을 자동으로 선택해야 합니다.

다음 CustomComponent 인터페이스에 단일 getter 메서드가 포함되어 있습니다. getMessage(). JSON 모델을 통해 작성자 대화 상자의 값을 표시하는 메서드입니다. 매개 변수가 비어 있는 getter 메서드만 () 는 JSON 모델로 내보내집니다.
열기 CustomComponentImpl.java 위치: core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/impl/CustomComponentImpl.java.

다음은 의 구현입니다. CustomComponent 인터페이스. 다음 @Model 주석은 Java™ 클래스를 Sling 모델로 식별합니다. 다음 @Exporter 주석을 사용하면 Java™ 클래스를 직렬화하고 슬링 모델 익스포터를 통해 내보낼 수 있습니다.
정적 변수 업데이트 RESOURCE_TYPE AEM 구성 요소를 가리키려면 다음을 수행하십시오 wknd-spa-angular/components/custom-component 이(가) 이전 연습에서 만들어졌습니다.
```
static final String RESOURCE_TYPE = "wknd-spa-angular/components/custom-component";
```
구성 요소의 리소스 유형은 Sling 모델을 AEM 구성 요소에 바인딩하고 궁극적으로 Angular 구성 요소에 매핑하는 것입니다.
추가 getExportedType() 메서드를 로 변환 CustomComponentImpl 구성 요소 리소스 유형을 반환하는 클래스:
```
@Override
public String getExportedType() {
    return CustomComponentImpl.RESOURCE_TYPE;
}
```
이 메서드는 를 구현할 때 필요합니다. ComponentExporter 인터페이스를 만들고 Angular 구성 요소에 매핑을 허용하는 리소스 유형을 표시합니다.
업데이트 getMessage() 값을 반환하는 메서드 message 작성자 대화 상자에서 지속되는 속성입니다. 사용 @ValueMap 주석은 JCR 값을 매핑합니다. message Java™ 변수에 다음을 수행합니다.
```
import org.apache.commons.lang3.StringUtils;
...

@ValueMapValue
private String message;

@Override
public String getMessage() {
    return StringUtils.isNotBlank(message) ? message.toUpperCase() : null;
}
```
메시지 값을 대문자로 반환하기 위해 일부 "비즈니스 논리"가 추가됩니다. 이를 통해 작성자 대화 상자에 의해 저장된 원시 값과 슬링 모델에 의해 노출된 값 간의 차이를 볼 수 있습니다.

노트

다음을 볼 수 있습니다. 여기서 CustomComponentImpl.java를 완료했습니다..

angular 구성 요소 업데이트

사용자 지정 구성 요소에 대한 Angular 코드가 이미 생성되었습니다. 그런 다음 몇 가지 업데이트를 통해 Angular 구성 요소를 AEM 구성 요소에 매핑합니다.

다음에서 ui.frontend 모듈이 파일을 엽니다. ui.frontend/src/app/components/custom/custom.component.ts
다음을 확인합니다. @Input() message: string; 줄. 변환된 대문자 값은 이 변수에 매핑되어야 합니다.

가져오기 MapTo AEM SPA Editor JS SDK의 개체를 사용하고 이를 사용하여 AEM 구성 요소에 매핑합니다.

+ import {MapTo} from '@adobe/cq-angular-editable-components';

 ...
 export class CustomComponent implements OnInit {
     ...
 }

+ MapTo('wknd-spa-angular/components/custom-component')(CustomComponent, CustomEditConfig);

열기 cutom.component.html 및 의 값이 {{message}} 옆에 표시됨 <h2> 태그에 가깝게 배치하십시오.
열기 custom.component.css 및 다음 규칙을 추가합니다.
```
:host-context {
    display: block;
}
```
구성 요소가 비어 있을 때 AEM 편집기 자리 표시자가 제대로 표시되도록 하려면 :host-context 또는 다른 <div> 을(를) (으)로 설정해야 함 display: block;.
Maven 기술을 사용하여 프로젝트 디렉토리의 루트에서 로컬 AEM 환경에 업데이트를 배포합니다.
```
$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage
```

템플릿 정책 업데이트

그런 다음 AEM으로 이동하여 업데이트를 확인하고 Custom Component SPA에 추가됩니다.

로 이동하여 새 Sling 모델 등록 확인 http://localhost:4502/system/console/status-slingmodels.

com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl - wknd-spa-angular/components/custom-component

com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl exports 'wknd-spa-angular/components/custom-component' with selector 'model' and extension '[Ljava.lang.String;@6fb4a693' with exporter 'jackson'

위의 두 줄은 다음을 나타냅니다. CustomComponentImpl 이(가) 와(과) 연결되어 있습니다. wknd-spa-angular/components/custom-component 구성 요소와 Sling 모델 내보내기를 통해 등록되었는지 확인합니다.

다음 SPA 페이지 템플릿으로 이동합니다. http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.
레이아웃 컨테이너의 정책을 업데이트하여 새 항목 추가 Custom Component 허용된 구성 요소:

정책에 대한 변경 사항을 저장하고 다음을 확인합니다. Custom Component 허용된 구성 요소:

사용자 지정 구성 요소 작성

다음으로, 를 작성합니다. Custom Component AEM SPA 편집기 사용.

다음으로 이동 http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.
위치 Edit 모드, 추가 Custom Component (으)로 Layout Container:
구성 요소의 대화 상자를 열고 일부 소문자가 포함된 메시지를 입력합니다.

이 대화 상자는 이 장 앞부분에서 XML 파일을 기반으로 만든 대화 상자입니다.
변경 사항을 저장합니다. 표시된 메시지가 모두 대문자로 표시되는지 확인합니다.
로 이동하여 JSON 모델 보기 http://localhost:4502/content/wknd-spa-angular/us/en.model.json. 검색 대상 wknd-spa-angular/components/custom-component:
```
"custom_component_208183317": {
    "message": "HELLO WORLD",
    ":type": "wknd-spa-angular/components/custom-component"
}
```
JSON 값은 Sling 모델에 추가된 논리를 기반으로 모든 대문자로 설정됩니다.

축하합니다!

축하합니다. 사용자 지정 AEM 구성 요소를 만드는 방법과 Sling 모델 및 대화 상자가 JSON 모델과 함께 작동하는 방법을 배웠습니다.

에서 완성된 코드를 항상 볼 수 있습니다. GitHub 또는 분기로 전환하여 코드를 로컬에서 확인합니다. Angular/custom-component-solution.

다음 단계

핵심 구성 요소 확장 - AEM SPA 편집기에서 사용할 기존 핵심 구성 요소를 확장하는 방법을 알아봅니다. 기존 구성 요소에 속성 및 콘텐츠를 추가하는 방법을 이해하는 것은 AEM SPA Editor 구현의 기능을 확장하는 강력한 기술입니다.

이전 페이지

사용자 지정 구성 요소 만들기

목표

빌드할 내용

사전 요구 사항

코드 가져오기

AEM 구성 요소 정의

Sling 모델 만들기

angular 구성 요소 업데이트

템플릿 정책 업데이트

사용자 지정 구성 요소 작성

축하합니다!

다음 단계

이 페이지의

다음 보기:

학습

설명서

커뮤니티

지원

리소스

Adobe 계정

Adobe