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 는 다음을 나열하는 예약된 속성입니다. sling:resourceType AEM 구성 요소 (또는 경로). 값: :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 모듈을 클릭하고 파일을 엽니다. text.component.ts 아래에 ui.frontend/src/app/components/text/text.component.ts:

첫 번째 검사 영역은 class TextComponent ~line 35:

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 flag) Angular의 기본 제공 보안은 무시됩니다. Angular 돔세니타이저 원시 HTML을 "스크러빙"하고 교차 사이트 스크립팅 취약성을 방지하는 데 사용됩니다. 메서드는 innerHtml 를 사용하는 속성 @HostBinding 장식가.

다음 검사 TextEditConfig ~line 24:

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

위의 코드는 AEM 작성 환경에서 자리 표시자를 렌더링할 시기를 결정합니다. 다음과 같은 경우 isEmpty 메서드 반환 true 그러면 자리 표시자가 렌더링됩니다.

마지막으로 다음을 살펴보십시오 MapTo ~53번 줄에서 호출:

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

매핑 대상 AEM SPA Editor JS SDK에서 제공됩니다(@adobe/cq-angular-editable-components). 경로 wknd-spa-angular/components/text 다음 표현: sling:resourceType AEM 구성 요소 이 경로는 :type 이전에 관찰된 JSON 모델에 의해 노출됩니다. 매핑 대상 는 JSON 모델 응답을 구문 분석하고 올바른 값을 @Input() SPA 구성 요소의 변수입니다.

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

을 수정하여 실험 en.model.json 파일 위치: ui.frontend/src/mocks/json/en.model.json.

~라인 62에서 첫 번째 Text 사용할 값 H1 및 u 태그:

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

브라우저에서 제공하는 효과를 보려면 돌아가기 webpack 개발 서버:

전환 시도 richText 다음 기간 사이의 속성 true / false 렌더링 논리를 작동 상태로 봅니다.

Inspect text.component.html 위치: ui.frontend/src/app/components/text/text.component.html.

구성 요소의 전체 내용이 innerHTML 속성.

Inspect app.module.ts 위치: ui.frontend/src/app/app.module.ts.

@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 {}

다음 텍스트 구성 요소 가 명시적으로 포함되지 않고 를 통해 동적으로 AEMResponsiveGridComponent AEM SPA Editor JS SDK에서 제공합니다. 따라서 다음 목록에 있어야 합니다. app.module.ts' entryComponent 배열입니다.

다음 위치로 이동 핵심 구성 요소 라이브러리의 이미지 예.

속성 src, alt, 및 title SPA을 채우는 데 사용됩니다. Image 구성 요소.

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

~70행에서 다음에 대한 JSON 항목을 추가합니다. image 모델(맨 뒤에 쉼표가 있습니다.) , 초 후 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"
        ],

프로젝트는에 샘플 이미지를 포함합니다. /mock-content/adobestock-140634652.jpeg 와 함께 사용됩니다. webpack 개발 서버.

전체를 볼 수 있습니다. en.model.json 위치.

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

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

중지 webpack 개발 서버 시작하는 경우.

angular CLI를 실행하여 새 이미지 구성 요소 만들기 ng generate component 내에서 명령 ui.frontend 폴더:

$ ng generate component components/image

IDE에서 를 엽니다. image.component.ts 위치: ui.frontend/src/app/components/image/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 는 AEM에서 작성자 자리 표시자를 렌더링할지 여부를 결정하는 구성입니다. src 속성이 채워집니다.

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

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

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

열기 image.component.html 다음과 같이 업데이트합니다.

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

이렇게 하면 <img> 요소 if hasImage 반환 true.

열기 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 개발 서버 및 루트 Maven 스킬을 사용하여 변경 사항을 AEM에 배포합니다.

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

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

선택 및 편집 SPA 페이지:

다음 항목 선택 레이아웃 컨테이너 다음을 클릭합니다. 정책 아이콘을 클릭하여 정책을 편집합니다.

아래 허용된 구성 요소 > WKND SPA Angular - 컨텐츠 > 다음을 확인하십시오. 이미지 구성 요소:

아래 기본 구성 요소 > 매핑 추가 및 선택 이미지 - WKND SPA Angular - 컨텐츠 구성 요소:

입력 mime 유형 / image/*.

클릭 완료 정책 업데이트를 저장합니다.

다음에서 레이아웃 컨테이너 클릭: 정책 아이콘 텍스트 구성 요소:

이름이 인 새 정책 만들기 WKND SPA 텍스트. 아래 플러그인 > 서식 > 모든 상자를 선택하여 추가 서식 옵션을 활성화합니다.

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

클릭 완료 정책 업데이트를 저장합니다.

다음 위치로 이동 홈페이지 http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

또한 을(를) 편집할 수 있어야 합니다. Text 구성 요소 및 의 추가 단락 스타일 추가 전체 화면 모드.

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

을 통해 나만의 이미지 추가 AEM Assets 또는 standard의 완성된 코드 베이스를 설치합니다. WKND 참조 사이트. 다음 WKND 참조 사이트 에는 WKND SPA에서 다시 사용할 수 있는 많은 이미지가 포함되어 있습니다. 패키지를 설치하려면 AEM 패키지 관리자.

IDE에서 열기 responsive-grid.component.ts 위치: ui.frontend/src/app/components/responsive-grid:

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

다음 레이아웃 컨테이너 구성 요소에 다음이 있음: sling:resourceType / wcm/foundation/components/responsivegrid 는 를 사용하여 SPA 편집기에서 인식됩니다. :type 속성입니다. Text 및 Image 구성 요소.

를 사용하여 구성 요소 크기를 재조정하는 것과 동일한 기능 레이아웃 모드 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 Code IDE에서 다음을 수행해야 합니다. VSCode AEM 동기화 marketplace 확장을 통해 설치:

확장 ui.content 프로젝트 탐색기에서 모듈로 이동하여 /conf/wknd-spa-angular/settings/wcm/templates.

마우스 오른쪽 단추 클릭 다음 templates 폴더 및 선택 AEM 서버에서 가져오기:

콘텐츠를 가져오려면 단계를 반복하되 정책 폴더 위치: /conf/wknd-spa-angular/settings/wcm/policies.

Inspect filter.xml 파일 위치: ui.content/src/main/content/META-INF/vault/filter.xml.

<!--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 각 모듈에서 관리하는 서로 다른 노드를 이해합니다.