SPA 구성 요소를 AEM 구성 요소에 매핑 map-components

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

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

Maven을 사용하여 로컬 AEM 인스턴스에 코드 베이스를 배포합니다.

$ mvn clean install -PautoInstallSinglePackage

AEM 6.x을(를) 사용하는 경우 classic 프로필을 추가하십시오.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

SPA 코드로 이동하기 전에 AEM에서 제공하는 JSON 모델을 이해하는 것이 중요합니다. 핵심 구성 요소 라이브러리(으)로 이동하여 텍스트 구성 요소에 대한 페이지를 봅니다. 핵심 구성 요소 라이브러리는 모든 AEM 핵심 구성 요소의 예를 제공합니다.

다음 예제 중 하나에 대해 JSON 탭을 선택하십시오.

세 개의 속성(text, richText 및 :type)이 표시됩니다.

:type은(는) AEM 구성 요소의 sling:resourceType(또는 경로)을(를) 나열하는 예약된 속성입니다. :type의 값은 AEM 구성 요소를 SPA 구성 요소에 매핑하는 데 사용되는 값입니다.

text 및 richText은(는) SPA 구성 요소에 노출되는 추가 속성입니다.

새 터미널을 열고 프로젝트 내의 ui.frontend 폴더로 이동합니다. npm install을(를) 실행한 다음 npm start을(를) 실행하여 Webpack 개발 서버 ​를 시작합니다.

$ cd ui.frontend
$ npm run start:mock

ui.frontend 모듈이 현재 모의 JSON 모델을(를) 사용하도록 설정되어 있습니다.

http://localhost:4200/content/wknd-spa-angular/us/en/home.html에 새 브라우저 창이 열립니다.

선택한 IDE에서 WKND SPA에 대한 AEM 프로젝트를 엽니다. ui.frontend 모듈을 확장하고 ui.frontend/src/app/components/text/text.component.ts에서 text.component.ts 파일을 엽니다.

검사할 첫 번째 영역은 ~line 35의 class TextComponent입니다.

export class TextComponent {
    @Input() richText: boolean;
    @Input() text: string;
    @Input() itemName: string;

    @HostBinding('innerHtml') get content() {
        return this.richText
        ? this.sanitizer.bypassSecurityTrustHtml(this.text)
        : this.text;
    }
    @HostBinding('attr.data-rte-editelement') editAttribute = true;

    constructor(private sanitizer: DomSanitizer) {}
}

@Input() decorator는 앞에서 검토한 대로 매핑된 JSON 개체를 통해 값이 설정된 필드를 선언하는 데 사용됩니다.

@HostBinding('innerHtml') get content()은(는) this.text 값에서 작성된 텍스트 콘텐츠를 노출하는 메서드입니다. 콘텐츠가 서식 있는 텍스트(this.richText 플래그로 결정됨)인 경우 Angular의 기본 제공 보안은 무시됩니다. Angular의 DomSanitizer은(는) 원시 HTML을 "스크러빙"하고 교차 사이트 스크립팅 취약성을 방지하는 데 사용됩니다. 메서드는 🔗 decorator를 사용하여 innerHtml @HostBinding에 바인딩됩니다.

다음 ~줄 24에서 TextEditConfig을(를) 검사합니다.

const TextEditConfig = {
    emptyLabel: 'Text',
    isEmpty: cqModel =>
        !cqModel || !cqModel.text || cqModel.text.trim().length < 1
};

위의 코드는 AEM 작성 환경에서 자리 표시자를 렌더링할 시기를 결정합니다. isEmpty 메서드가 true ​을(를) 반환하면 자리 표시자가 렌더링됩니다.

마지막으로 ~53행의 MapTo 호출을 살펴보십시오.

MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );

MapTo ​은(는) AEM SPA Editor JS SDK(@adobe/cq-angular-editable-components)에서 제공합니다. wknd-spa-angular/components/text 경로는 AEM 구성 요소의 sling:resourceType을(를) 나타냅니다. 이 경로는 이전에 관찰된 JSON 모델에 의해 노출된 :type과(와) 일치합니다. MapTo ​은(는) JSON 모델 응답을 구문 분석하고 올바른 값을 SPA 구성 요소의 @Input() 변수에 전달합니다.

ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text에서 AEM Text 구성 요소 정의를 찾을 수 있습니다.

ui.frontend/src/mocks/json/en.model.json에서 en.model.json 파일을 수정하여 실험해 보십시오.

~줄 62에서 H1 및 u 태그를 사용하도록 첫 번째 Text 값을 업데이트합니다.

    "text": {
        "text": "<h1><u>Hello World!</u></h1>",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    }

Webpack 개발 서버 ​에서 제공하는 효과를 보려면 브라우저로 돌아가십시오.

richText 속성을 true / false 간에 전환하여 렌더링 논리의 작동 여부를 확인해 보십시오.

ui.frontend/src/app/components/text/text.component.html의 Inspect text.component.html.

구성 요소의 전체 내용이 innerHTML 속성으로 설정되었으므로 이 파일은 비어 있습니다.

ui.frontend/src/app/app.module.ts의 app.module.ts ​을(를) Inspect에 추가했습니다.

@NgModule({
imports: [
    BrowserModule,
    SpaAngularEditableComponentsModule,
    AppRoutingModule
],
providers: [ModelManagerService, { provide: APP_BASE_HREF, useValue: '/' }],
declarations: [AppComponent, TextComponent, PageComponent, HeaderComponent],
entryComponents: [TextComponent, PageComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

TextComponent ​은(는) 명시적으로 포함되지 않지만 AEM SPA Editor JS SDK에서 제공한 AEMResponsiveGridComponent ​을(를) 통해 동적으로 포함됩니다. 따라서 app.module.ts' entryComponents 배열에 나열되어야 합니다.

핵심 구성 요소 라이브러리의 이미지 예제(으)로 이동합니다.

src, alt 및 title의 속성을 사용하여 SPA Image 구성 요소를 채웁니다.

IDE로 돌아가서 ui.frontend/src/mocks/json/en.model.json에서 en.model.json을(를) 엽니다. 이것은 프로젝트의 새로운 구성 요소이므로 이미지 JSON을 "복제"해야 합니다.

~행 70에서 image 모델에 대한 JSON 항목을 추가하고(두 번째 text_386303036 이후의 후행 쉼표 ,을(를) :itemsOrder 배열을 업데이트하십시오.)

...
":items": {
            ...
            "text_386303036": {
                "text": "<p>A new text component.</p>\r\n",
                "richText": true,
                ":type": "wknd-spa-angular/components/text"
                },
            "image": {
                "alt": "Rock Climber in New Zealand",
                "title": "Rock Climber in New Zealand",
                "src": "/mocks/images/adobestock-140634652.jpeg",
                ":type": "wknd-spa-angular/components/image"
            }
        },
        ":itemsOrder": [
            "text",
            "text_386303036",
            "image"
        ],

프로젝트에 Webpack 개발 서버 ​와 함께 사용되는 /mock-content/adobestock-140634652.jpeg의 샘플 이미지가 포함되어 있습니다.

전체 en.model.json은 여기에서 볼 수 있습니다.

구성 요소에서 표시할 스톡 사진을 추가합니다.

ui.frontend/src/mocks 아래에 이미지(이)라는 새 폴더를 만듭니다. adobestock-140634652.jpeg을(를) 다운로드하고 새로 만든 이미지 폴더에 넣습니다. 원하는 경우 언제든지 나만의 이미지를 사용할 수 있습니다.

시작되면 Webpack 개발 서버 ​를 중지합니다.

ui.frontend 폴더 내에서 Angular CLI ng generate component 명령을 실행하여 새 이미지 구성 요소를 만듭니다.

$ ng generate component components/image

IDE에서 ui.frontend/src/app/components/image/image.component.ts에 image.component.ts ​을(를) 열고 다음과 같이 업데이트합니다.

import {Component, Input, OnInit} from '@angular/core';
import {MapTo} from '@adobe/cq-angular-editable-components';

const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: cqModel =>
    !cqModel || !cqModel.src || cqModel.src.trim().length < 1
};

@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.scss']
})
export class ImageComponent implements OnInit {

@Input() src: string;
@Input() alt: string;
@Input() title: string;

constructor() { }

get hasImage() {
    return this.src && this.src.trim().length > 0;
}

ngOnInit() { }
}

MapTo('wknd-spa-angular/components/image')(ImageComponent, ImageEditConfig);

ImageEditConfig은(는) src 속성이 채워졌는지 여부를 기준으로 AEM에서 작성자 자리 표시자를 렌더링할지 여부를 결정하는 구성입니다.

src, alt 및 title 중 @Input()은(는) JSON API에서 매핑된 속성입니다.

hasImage()은(는) 이미지를 렌더링해야 하는지 여부를 결정하는 메서드입니다.

MapTo은(는) SPA 구성 요소를 ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image에 있는 AEM 구성 요소에 매핑합니다.

image.component.html ​을 열고 다음과 같이 업데이트합니다.

<ng-container *ngIf="hasImage">
    <img class="image" [src]="src" [alt]="alt" [title]="title"/>
</ng-container>

hasImage이(가) true ​을(를) 반환하는 경우 <img> 요소가 렌더링됩니다.

image.component.scss ​을 열고 다음과 같이 업데이트합니다.

:host-context {
    display: block;
}

.image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

app.module.ts을(를) 열고 ImageComponent을(를) entryComponents 배열에 추가합니다.

entryComponents: [TextComponent, PageComponent, ImageComponent],

TextComponent과(와) 마찬가지로 ImageComponent은(는) 동적으로 로드되며 entryComponents 배열에 포함되어야 합니다.

Webpack 개발 서버 ​를 시작하여 ImageComponent 렌더링을 확인합니다.

$ npm run start:mock

SPA에 추가된 이미지

Webpack 개발 서버 ​를 중지하고 프로젝트의 root ​에서 Maven 기술을 사용하여 변경 사항을 AEM에 배포합니다.

$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage

AEM 시작 화면에서 도구 > 템플릿 > WKND SPA Angular(으)로 이동합니다.

SPA 페이지 선택 및 편집:

레이아웃 컨테이너 ​를 선택하고 정책 아이콘을 클릭하여 정책을 편집합니다.

허용된 구성 요소 > WKND SPA Angular - 콘텐츠 > 이미지 구성 요소를 확인합니다.

기본 구성 요소 > 매핑 추가 ​에서 이미지 - WKND SPA Angular - 콘텐츠 구성 요소를 선택합니다.

image/*의 mime 유형 ​을(를) 입력하십시오.

정책 업데이트를 저장하려면 완료 ​를 클릭하십시오.

레이아웃 컨테이너 ​에서 Text 구성 요소에 대한 정책 아이콘을 클릭합니다.

WKND SPA 텍스트(이)라는 새 정책을 만듭니다. 플러그인 > 서식 > 모든 상자를 선택하여 추가 서식 옵션을 사용하도록 설정합니다.

플러그인 > 단락 스타일 > 단락 스타일 사용 확인란을 선택합니다.

정책 업데이트를 저장하려면 완료 ​를 클릭하십시오.

홈 페이지 http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html(으)로 이동합니다.

전체 화면 모드에서 Text 구성 요소를 편집하고 추가 단락 스타일을 추가할 수도 있습니다.

자산 파인더 ​에서 이미지를 드래그 앤 드롭할 수도 있습니다.

AEM Assets를 통해 자신의 이미지를 추가하거나 표준 WKND 참조 사이트에 대한 완성된 코드 베이스를 설치하십시오. WKND 참조 사이트에 WKND SPA에서 다시 사용할 수 있는 많은 이미지가 포함되어 있습니다. 패키지는 AEM의 패키지 관리자를 사용하여 설치할 수 있습니다.

IDE에서 ui.frontend/src/app/components/responsive-grid에 responsive-grid.component.ts ​을(를) 엽니다.

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

MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);

AEMResponsiveGridComponent은(는) AEM SPA Editor SDK의 일부로 구현되며 import-components을(를) 통해 프로젝트에 포함됩니다.

브라우저에서 http://localhost:4502/content/wknd-spa-angular/us/en.model.json(으)로 이동

레이아웃 컨테이너 구성 요소에 wcm/foundation/components/responsivegrid의 sling:resourceType이(가) 있으며, Text 및 Image 구성 요소와 마찬가지로 :type 속성을 사용하여 SPA 편집기에서 인식됩니다.

SPA 편집기에서 레이아웃 모드를 사용하여 구성 요소 크기를 다시 조정하는 것과 동일한 기능을 사용할 수 있습니다.

http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html(으)로 돌아갑니다. 이미지 구성 요소를 추가하고 레이아웃 옵션을 사용하여 크기를 다시 조정해 보십시오.

JSON 모델 http://localhost:4502/content/wknd-spa-angular/us/en.model.json을(를) 다시 열고 columnClassNames을(를) JSON의 일부로 관찰합니다.

클래스 이름 aem-GridColumn--default--4은(는) 구성 요소의 너비가 12개 열 그리드를 기준으로 4열이어야 함을 나타냅니다. 응답형 격자에 대한 자세한 내용은 여기를 참조하십시오.

IDE로 돌아가서 ui.apps 모듈에 ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-grid에 정의된 클라이언트측 라이브러리가 있습니다. less/grid.less 파일을 엽니다.

이 파일은 레이아웃 컨테이너 ​에서 사용하는 중단점(default, tablet 및 phone)을 결정합니다. 이 파일은 프로젝트 사양에 따라 사용자 지정하기 위한 것입니다. 현재 중단점은 1200px 및 650px(으)로 설정되어 있습니다.

Text 구성 요소의 응답형 기능과 업데이트된 서식 있는 텍스트 정책을 사용하여 다음과 같은 보기를 작성할 수 있어야 합니다.

Visual Studio 코드 IDE에서 Marketplace 확장을 통해 VSCode AEM Sync ​가 설치되어 있는지 확인합니다.

프로젝트 탐색기에서 ui.content 모듈을 확장하고 /conf/wknd-spa-angular/settings/wcm/templates(으)로 이동합니다.

templates 폴더를 마우스 오른쪽 단추로 클릭 ​하고 AEM Server에서 가져오기 ​를 선택합니다.

콘텐츠를 가져오려면 단계를 반복하되 /conf/wknd-spa-angular/settings/wcm/policies에 있는 정책 폴더를 선택하십시오.

ui.content/src/main/content/META-INF/vault/filter.xml에 있는 filter.xml 파일을 Inspect으로 가져옵니다.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-angular" mode="merge"/>
     <filter root="/content/wknd-spa-angular" mode="merge"/>
     <filter root="/content/dam/wknd-spa-angular" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-angular" mode="merge"/>
 </workspaceFilter>

filter.xml 파일은 패키지와 함께 설치된 노드의 경로를 식별합니다. 각 필터에서 mode="merge"을(를) 확인합니다. 이는 기존 콘텐츠는 수정되지 않고 새 콘텐츠만 추가됨을 나타냅니다. 콘텐츠 작성자가 이러한 경로를 업데이트할 수 있으므로 코드 배포는 콘텐츠를 덮어쓰지 ​하지 않는 것이 중요합니다. 필터 요소 작업에 대한 자세한 내용은 FileVault 설명서를 참조하십시오.

ui.content/src/main/content/META-INF/vault/filter.xml과(와) ui.apps/src/main/content/META-INF/vault/filter.xml을(를) 비교하여 각 모듈에서 관리하는 다른 노드를 이해합니다.