AEM Screens용 맞춤형 구성 요소 개발 developing-a-custom-component-for-aem-screens

AEM 6.5 및 최신 Screens 기능 팩.

AEM Screens 플레이어

로컬 개발 환경

CRX 패키지 관리자에서 다음 두 패키지가 설치되었는지 확인하십시오.

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

Screens We.Retail CRX 패키지 관리자를 통해 설치된 Ui.Apps 및 Ui.Content 패키지를 실행합니다.

screens-weretail-run.ui.apps 패키지는 /apps/weretail-run 아래에 코드를 설치합니다.

이 패키지에는 프로젝트에 대한 사용자 지정 구성 요소를 렌더링하는 코드를 포함합니다. 이 패키지에는 구성 요소 코드와 필요한 모든 JavaScript 또는 CSS가 포함되어 있습니다. 이 패키지는 프로젝트에 필요한 Java™ 코드가 포함된 screens-weretail-run.core-0.0.1-SNAPSHOT.jar ​도 임베드합니다.

CRXDE Lite의 ui.apps 코드 표현

Hello World 구성 요소는 자리 표시자입니다. 자습서 과정에서 작성자가 구성 요소에서 표시하는 메시지를 업데이트할 수 있는 기능이 추가되었습니다.

screens-weretail-run.ui.content 패키지는 아래에 코드를 설치합니다.

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

이 패키지에는 프로젝트에 필요한 시작 콘텐츠 및 구성 구조가 포함되어 있습니다. /conf/we-retail-run ​에 We.Retail 실행 프로젝트에 대한 모든 구성이 포함되어 있습니다. /content/dam/we-retail-run ​에 프로젝트의 시작 디지털 에셋이 포함되어 있습니다. /content/screens/we-retail-run ​에 Screens 콘텐츠 구조가 포함되어 있습니다. 이러한 모든 경로의 콘텐츠는 주로 AEM에서 업데이트됩니다. 환경(로컬, 개발, 스테이지, 프로덕션) 간의 일관성을 향상시키기 위해 기본 콘텐츠 구조가 소스 제어에 저장되는 경우가 많습니다.

AEM Screens > We.Retail 프로젝트 실행으로 이동:

AEM 시작 메뉴에서 Screens 아이콘을 클릭합니다. We.Retail 실행 프로젝트가 표시되는지 확인합니다.

CRXDE-Lite http://localhost:4502/crx/de/index.jsp(또는 선택한 IDE)에서 /apps/weretail-run/components/content/helloworld.(으)로 이동

helloworld 구성 요소에 다음 속성을 추가하십시오.

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

/apps/weretail-run/components/content/helloworld에 대한 속성

Hello World 구성 요소는 foundation, components, parbase 구성 요소를 확장하므로 시퀀스 채널 내에서 적절하게 사용할 수 있습니다.

/apps/weretail-run/components/content/helloworld 아래에 helloworld.html.(이)라는 파일 만들기

파일을 다음과 같이 채웁니다.

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

Screens 구성 요소에는 사용 중인 작성 모드에 따라 두 가지 다른 렌더링이 필요합니다.

1. 프로덕션: 미리 보기 또는 Publish 모드(wcmmode=disabled)
2. 편집: 다른 모든 작성 모드(예: 편집, 디자인, 스캐폴딩, 개발자)에 사용됩니다.

helloworld.html은(는) 스위치 역할을 하며 활성 상태인 작성 모드를 확인하고 다른 HTL 스크립트로 리디렉션합니다. Screens 구성 요소에서 사용하는 일반적인 규칙은 편집 모드에 edit.html 스크립트를 사용하고 프로덕션 모드에 production.html 스크립트를 사용하는 것입니다.

/apps/weretail-run/components/content/helloworld 아래에 production.html.(이)라는 파일 만들기

파일을 다음과 같이 채웁니다.

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

위의 내용은 Hello World 구성 요소의 프로덕션 마크업입니다. 구성 요소가 시퀀스 채널에서 사용되므로 data-duration 특성이 포함됩니다. data-duration 특성은 시퀀스 항목이 표시되는 기간을 알기 위해 시퀀스 채널에서 사용됩니다.

구성 요소가 텍스트가 있는 div 및 h1 태그를 렌더링합니다. ${properties.message}은(는) 이름이 message인 JCR 속성의 콘텐츠를 출력하는 HTL 스크립트의 일부입니다. 사용자가 message 속성 텍스트의 값을 입력할 수 있는 대화 상자가 나중에 만들어집니다.

또한 구성 요소에는 BEM(블록 요소 수정자) 표기법이 사용됩니다. BEM은 재사용 가능한 구성 요소를 쉽게 만들 수 있는 CSS 코딩 규칙입니다. BEM은 AEM의 핵심 구성 요소에서 사용하는 표기법입니다.

/apps/weretail-run/components/content/helloworld 아래에 edit.html.(이)라는 파일 만들기

파일을 다음과 같이 채웁니다.

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

위의 내용은 Hello World 구성 요소에 대해 편집된 마크업입니다. 대화 상자 메시지가 채워진 경우 첫 번째 블록에는 구성 요소의 편집된 버전이 표시됩니다.

두 번째 블록은 대화 상자 메시지를 입력하지 않은 경우 렌더링됩니다. cq-placeholder 및 data-emptytext이(가) 이 경우 자리 표시자로 레이블 Hello World ​을(를) 렌더링합니다. 레이블의 문자열은 i18n을 사용하여 다국어로 구성하여 여러 로케일에서 작성할 수 있습니다.

Hello World 구성 요소에 사용할 Screens 이미지 대화 상자 복사

기존 대화 상자에서 시작한 다음 수정하는 것이 가장 쉽습니다.

1. 대화 상자 복사 위치: /libs/screens/core/components/content/image/cq:dialog
2. /apps/weretail-run/components/content/helloworld 아래에 대화 상자 붙여넣기

Hello World 대화 상자를 업데이트하여 메시지 탭을 포함하세요.

다음과 일치하도록 대화 상자를 업데이트합니다. 최종 대화 상자의 JCR 노드 구조는 아래에 XML로 표시됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <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="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

Message의 텍스트 필드는 message 속성에 저장되며 Duration의 숫자 필드는 duration 속성에 저장됩니다. HTL에서 ${properties.message} 및 ${properties.duration}(으)로 /apps/weretail-run/components/content/helloworld/production.html에서 이 두 속성을 모두 참조합니다.

Hello World - 완료된 대화 상자

Hello World 구성 요소의 클라이언트측 라이브러리에 대한 폴더를 만듭니다.

/apps/weretail-run/components/content/helloworld 아래에 clientlibs 폴더를 만듭니다.

clientlibs 폴더 아래에서 cq:ClientLibraryFolder 형식의 shared 노드를 만듭니다.

공유 클라이언트 라이브러리에 다음 속성을 추가합니다.

• allowProxy | 부울 | true

• categories| 문자열[] | cq.screens.components

/apps/weretail-run/components/content/helloworld/clientlibs/shared에 대한 속성

categories 속성은 클라이언트 라이브러리를 식별하는 문자열입니다. cq.screens.componentcategory는 편집 모드와 미리보기 프로덕션 모드 모두에서 사용됩니다. 따라서 sharedclientlib에 정의된 모든 CSS 또는 JS는 모든 모드에서 로드됩니다.

가장 좋은 방법은 프로덕션 환경에서 /apps(으)로 직접 연결되는 경로를 노출해서는 안 됩니다. allowProxy 속성은 /etc.clientlibs 접두사를 통해 클라이언트 라이브러리 CSS 및 JS를 참조하도록 합니다.

공유 폴더 아래에 이름이 css.txt인 파일을 만듭니다.

파일을 다음과 같이 채웁니다.

#base=css

styles.less

shared 폴더 아래에 css 폴더를 만듭니다. css 폴더 아래에 이름이 style.less인 파일을 추가합니다. 이제 클라이언트 라이브러리의 구조는 다음과 같아야 합니다.

이 자습서에서는 CSS를 직접 작성하는 대신 LESS를 사용합니다. LESS은(는) CSS 변수, mixin 및 함수를 지원하는 인기 있는 CSS 사전 컴파일러입니다. AEM 클라이언트 라이브러리는 기본적으로 LESS 컴파일을 지원합니다. Sass 또는 기타 사전 컴파일러를 사용할 수 있지만 AEM 외부에서 컴파일해야 합니다.

/apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less을(를) 다음으로 채우기:

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

shared 클라이언트 라이브러리 폴더를 복사하여 붙여 넣어 이름이 production인 클라이언트 라이브러리를 만듭니다.

공유 클라이언트 라이브러리를 복사하여 프로덕션 클라이언트 라이브러리를 만듭니다.

프로덕션 클라이언트 라이브러리의 categories 속성을 cq.screens.components.production.(으)로 업데이트하십시오.

이렇게 하면 스타일이 미리 보기-프로덕션 모드에 있을 때만 로드됩니다.

/apps/weretail-run/components/content/helloworld/clientlibs/production의 속성입니다.

/apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less을(를) 다음으로 채우기:

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

위의 스타일은 메시지를 화면 가운데에 표시하지만 프로덕션 모드에서만 표시합니다.

CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs에서 /apps/settings/wcm/designs(으)로 이동합니다.

디자인 폴더 아래에 cq:Page 형식의 we-retail-run(이)라는 노드를 만듭니다.

we-retail-run 페이지 아래에서 nt:unstructured 형식의 jcr:content 노드를 추가합니다. jcr:content 노드에 다음 속성을 추가하십시오.

/apps/settings/wcm/designs/we-retail-run에 페이지를 디자인합니다.

AEM 시작 메뉴에서 Screens > We.Retail실행 >(으)로 이동하고 채널 ​을 클릭합니다.

만들기 단추 클릭

1. 엔터티 만들기 선택

만들기 마법사에서 다음을 수행합니다.

템플릿 단계 - 시퀀스 채널 선택

1. 속성 단계

• 기본 탭 > 제목 = 유휴 채널
• 채널 탭 > 확인 온라인으로 채널 만들기

유휴 채널에 대한 페이지 속성을 엽니다.

이전 섹션에서 만든 디자인 페이지인 /apps/settings/wcm/designs/we-retail-run을(를) 가리키도록 디자인 필드를 업데이트합니다.

/apps/settings/wcm/designs/we-retail-run을 가리키는 디자인 구성

새로 만든 유휴 채널을 편집하여 열 수 있습니다.

페이지 모드를 디자인 모드로 전환합니다.

1. Parsys에서 렌치 아이콘을 클릭하면 허용된 구성 요소를 구성할 수 있습니다.

2. Screens 그룹과 We.Retail실행 - 콘텐츠 그룹을 클릭합니다.

페이지 모드를 편집(으)로 전환하십시오. 이제 Hello World 구성 요소를 페이지에 추가하고 다른 시퀀스 채널 구성 요소와 결합할 수 있습니다.

CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par에서 /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par(으)로 이동합니다. 이제 components 속성에 group:Screens, group:We.Retail Run - Content이(가) 포함됩니다.

/apps/settings/wcm/designs/we-retail-run에서 디자인 구성