- 스크린 소개
- 개요 및 시작 안내서
- 디지털 서명 네트워크 기본 사항
- 구성 및 관리
- 작성 및 사용 사례 예
- 개발자 및 API 리소스
- 문제 해결 및 FAQ
- 릴리스 정보
AEM Screens용 사용자 지정 구성 요소 개발
다음 자습서에서는 AEM Screens용 사용자 지정 구성 요소를 만드는 단계를 안내합니다. AEM Screens은 다른 AEM 제품의 많은 기존 디자인 패턴과 기술을 재사용합니다. 이 자습서에서는 AEM Screens용 개발 시 차이점과 특별한 고려 사항을 중점적으로 설명합니다.
개요
이 튜토리얼은 AEM Screens을 처음 사용하는 개발자를 위한 것입니다. 이 자습서에서는 AEM Screens의 시퀀스 채널용으로 간단한 "Hello World" 구성 요소가 빌드되었습니다. 대화 상자에서는 작성자가 표시된 텍스트를 업데이트할 수 있습니다.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
-
로컬 개발 환경
자습서 단계 및 스크린샷은 CRXDE-Lite를 사용하여 수행됩니다. IDE를 사용하여 자습서를 완료할 수도 있습니다. IDE를 사용하여 을 AEM과 함께 개발하는 방법에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
프로젝트 설정
스크린 프로젝트의 소스 코드는 일반적으로 다중 모듈 Maven 프로젝트로 관리됩니다. 자습서를 더 신속히 처리하기 위해 AEM Project Archetype 13을(를) 사용하여 프로젝트가 미리 생성되었습니다. Maven AEM Project Archetype을 사용하여 프로젝트를 만드는 방법에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
- CRX 패키지 관리자를 사용하여 다음 패키지를 다운로드하여 설치합니다.
파일 가져오기
선택 사항(Eclipse 또는 다른 IDE를 사용하여 작업하는 경우)에는 아래 소스 패키지를 다운로드합니다. Maven 명령을 사용하여 프로젝트를 로컬 AEM 인스턴스에 배포합니다.
mvn -PautoInstallPackage clean install
HelloWorld SRC Screens We.Retail 실행 프로젝트 시작
-
CRX Package Manager에서 다음 두 패키지가 설치되었는지 확인합니다.
- screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
- screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip
Screens We.Retail 실행 Ui.Apps 및 Ui.Content 패키지가 CRX Package Manager를 통해 설치됨
-
screens-weretail-run.ui.apps 패키지는
/apps/weretail-run아래에 코드를 설치합니다.이 패키지에는 프로젝트의 사용자 지정 구성 요소를 렌더링하는 코드가 들어 있습니다. 이 패키지에는 구성 요소 코드와 필요한 JavaScript 또는 CSS가 들어 있습니다. 또한 이 패키지에는 프로젝트에 필요한 Java 코드가 들어 있는 screens-weretail-run.core-0.0.1-SNAPSHOT.jar도 포함되어 있습니다.
노트이 자습서에서는 Java 코드가 기록되지 않습니다. 더 복잡한 비즈니스 로직이 필요한 경우 코어 Java 번들을 사용하여 백엔드 Java를 만들고 배포할 수 있습니다.
CRXDE Lite의 ui.apps 코드 표시
helloworld 구성 요소는 현재 자리 표시자입니다. 자습서의 과정에는 작성자가 구성 요소에서 표시하는 메시지를 업데이트할 수 있는 기능이 추가됩니다.
-
screens-weretail-run.ui.content 패키지는 다음 아래에 코드를 설치합니다.
/conf/we-retail-run/content/dam/we-retail-run/content/screens/we-retail-run
이 패키지에는 프로젝트에 필요한 시작 콘텐츠 및 구성 구조가 들어 있습니다.
/conf/we-retail-runWe.Retail 실행 프로젝트에 대한 모든 구성을 포함합니다./content/dam/we-retail-run프로젝트에 대한 디지털 자산 시작을 포함합니다./content/screens/we-retail-run스크린 컨텐츠 구조를 포함합니다. 이러한 모든 경로 아래의 콘텐츠는 주로 AEM에서 업데이트됩니다. 환경(로컬, 개발, 스테이지, Prod) 간의 일관성을 향상시키기 위해 기본 컨텐츠 구조가 소스 제어에 저장되는 경우가 많습니다. -
AEM Screens > We.Retail 실행 프로젝트로 이동합니다.
AEM 시작 메뉴 > 아이콘을 클릭하여 화면 을 클릭합니다. We.Retail 실행 프로젝트가 표시되는지 확인합니다.
Hello World 구성 요소 만들기
Hello World 구성 요소는 사용자가 화면에 표시할 메시지를 입력할 수 있는 간단한 구성 요소입니다. 구성 요소는 AEM Screens 구성 요소 템플릿을 기반으로 합니다.https://github.com/Adobe-Marketing-Cloud/aem-screens-component-template
AEM Screens에는 기존 WCM Sites 구성 요소에 반드시 true일 필요는 없는 몇 가지 흥미로운 제한 사항이 있습니다.
- 대부분의 Screens 구성 요소는 대상 디지털 서명 장치에서 전체 화면에서 실행해야 합니다
- 대부분의 Screens 구성 요소는 슬라이드 쇼를 생성하려면 시퀀스 채널에 포함할 수 있어야 합니다
- 작성을 사용하면 시퀀스 채널에서 개별 구성 요소를 편집할 수 있으므로 전체 화면을 렌더링하는 것은 문제가 되지 않습니다
-
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/helpWorld에 대한 속성
helloworld 구성 요소는 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" />스크린 구성 요소는 사용 중인 작성 모드에 따라 두 개의 다른 렌더링이 필요합니다.
- 프로덕션:미리 보기 또는 게시 모드 (wcmmode=disabled)
- 편집:편집, 디자인, 스캐폴딩, 개발자 등 기타 모든 작성 모드에 사용됩니다.
helloworld.html는 스위치 역할을 하며 현재 활성 상태인 작성 모드를 확인하고 다른 HTL 스크립트로 리디렉션합니다. 화면 구성 요소에서 사용하는 일반적인 규칙은 편집 모드에 대한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}는 이름이 인 JCR 속성의 내용을 출력하는 HTL 스크립트의 일부입니다message. 나중에 사용자가message속성 텍스트의 값을 입력할 수 있는 대화 상자가 만들어집니다.또한 BEM(블록 요소 수정자) 표기법은 구성 요소와 함께 사용됩니다. BEM은 재사용 가능한 구성 요소를 쉽게 만들 수 있는 CSS 코딩 규칙입니다. BEM은 AEM 코어 구성 요소에 사용되는 표기법입니다. 자세한 정보는 다음을 참조하십시오.https://getbem.com/
-
/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 이미지 대화 상자 복사
기존 대화 상자에서 시작한 다음 수정하는 것이 가장 쉽습니다.
- 다음 위치에서 대화 상자 복사:
/libs/screens/core/components/content/image/cq:dialog /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 will be shown in the sequence, in milliseconds" fieldLabel="Duration (ms)" min="0" name="./duration"/> </items> </column> </items> </sequence> </items> </content> </jcr:root>메시지의 텍스트 필드는
message속성에 저장되며, Duration의 number 필드는duration속성에 저장됩니다. 이 두 속성은 모두 HTL이/apps/weretail-run/components/content/helloworld/production.html에서${properties.message}및${properties.duration}로 참조됩니다.
Hello World - 완료된 대화
클라이언트측 라이브러리 만들기
클라이언트측 라이브러리는 AEM 구현에 필요한 CSS 및 JavaScript 파일을 구성하고 관리하는 메커니즘을 제공합니다.
AEM Screens 구성 요소가 편집 모드와 미리 보기/프로덕션 모드에서 다르게 렌더링됩니다. 두 개의 클라이언트 라이브러리가 생성되며, 하나는 편집 모드용, 다른 하나는 미리 보기/프로덕션용 라이브러리입니다.
-
Hello World 구성 요소용 클라이언트 측 라이브러리에 대한 폴더를 만듭니다.
/apps/weretail-run/components/content/helloworld아래에clientlibs라는 새 폴더를 만듭니다.
-
clientlibs폴더 아래에cq:ClientLibraryFolder.유형의shared라는 새 노드가 만들어집니다.
-
공유 클라이언트 라이브러리에 다음 속성을 추가합니다.
-
allowProxy| 부울 |true -
categories| 문자열[] |cq.screens.components
/apps/weretail-run/components/content/help/world/clientlibs/shared에 대한 속성
categories 속성은 클라이언트 라이브러리를 식별하는 문자열입니다. cq.screens.componentscategory는 편집과 미리 보기/프로덕션 모드 모두에서 사용됩니다. 따라서 sharedclientlib에 정의된 모든 CSS/JS는 모든 모드로 로드됩니다.
프로덕션 환경에서 /apps에 직접 경로를 노출하지 않는 것이 좋습니다. allowProxy 속성을 사용하면 클라이언트 라이브러리 CSS 및 JS가 접두사 of/etc.clientlibs을 통해 참조됩니다.
-
-
공유 폴더 아래에
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라는 새 클라이언트 라이브러리를 만듭니다.
공유 클라이언트 라이브러리를 복사하여 새 프로덕션 클라이언트 라이브러리를 만듭니다
-
프로덕션 clientlibrary의
categories속성을cq.screens.components.production.으로 업데이트하십시오.이렇게 하면 미리 보기/프로덕션 모드에 있는 경우에만 스타일이 로드됩니다.
/apps/weretail-run/components/content/help/world/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%; } }위의 스타일은 화면 중간에 있지만 프로덕션 모드에서만 메시지를 표시합니다.
세 번째 clientlibrary 카테고리:cq.screens.components.edit 을 사용하여 편집 전용 스타일을 구성 요소에 추가할 수 있습니다.
| Clientlib 카테고리 | 사용량 |
|---|---|
cq.screens.components |
편집 모드와 프로덕션 모드 간에 공유되는 스타일 및 스크립트 |
cq.screens.components.edit |
편집 모드에서만 사용되는 스타일 및 스크립트 |
cq.screens.components.production |
프로덕션 모드에서만 사용되는 스타일 및 스크립트 |
디자인 페이지 만들기
AEM Screens은 전역 변경 사항에 정적 페이지 템플릿 및 디자인 구성을 사용합니다. 디자인 구성은 채널에서 Parsys에 대해 허용되는 구성 요소를 구성하는 데 자주 사용됩니다. 가장 좋은 방법은 이러한 구성을 앱별 방식으로 저장하는 것입니다.
We.Retail 실행 프로젝트에 관련된 모든 구성을 저장하는 We.Retail 실행 디자인 페이지 아래에 만들어집니다.
-
CRXDE-Lite
http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs에서/apps/settings/wcm/designs로 이동합니다. -
디자인 폴더 아래에
we-retail-run라는 새 노드를 만들고cq:Page유형을 사용합니다. -
we-retail-run페이지 아래에서nt:unstructured유형의jcr:content노드를 추가합니다. 다음 속성을jcr:content노드에 추가합니다.이름 유형 값 jcr:title 문자열 We.Retail 실행 sling:resourceType 문자열 wcm/core/components/designer cq:doctype 문자열 html_5 
/apps/settings/wcm/designs/we-retail-run의 디자인 페이지
시퀀스 채널 만들기
Hello World 구성 요소는 시퀀스 채널에서 사용하기 위한 것입니다. 구성 요소를 테스트하기 위해 새 시퀀스 채널이 만들어집니다.
-
AEM 시작 메뉴에서 Screens > We.Retail Ru n > 로 이동하고 채널을 선택합니다.
-
만들기 단추를 클릭합니다
- 엔티티 만들기를 선택합니다.
-
만들기 마법사에서:
-
템플릿 단계 - 시퀀스 채널을 선택합니다.
- 속성 단계
- 기본 탭 > 제목 = 유휴 채널
- 채널 탭 > 확인 채널을 온라인 상태로 만들기
-
유휴 채널에 대한 페이지 속성을 엽니다. 디자인 필드를 업데이트하여 이전 섹션에서 만든 디자인 페이지를
/apps/settings/wcm/designs/we-retail-run,로 가리킵니다.
/apps/settings/wcm/designs/we-retail-run을 가리키는 디자인 구성
-
새로 만든 유휴 채널을 편집하여 엽니다.
-
페이지 모드를 디자인 모드로 전환합니다.
-
Parsys에서 렌치 아이콘을 클릭하여 허용된 구성 요소를 구성합니다
-
Screens 그룹과 We.Retail Run - Content 그룹을 선택합니다.
-
-
페이지 모드를 편집으로 전환합니다. 이제 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에서 디자인 구성
사용자 지정 핸들러용 템플릿
사용자 지정 구성 요소가 자산(이미지, 비디오, 글꼴, 아이콘 등), 특정 자산 표현물 또는 클라이언트측 라이브러리(css, js 등)와 같은 외부 리소스를 사용하는 경우, 이러한 구성 요소는 기본적으로 HTML 마크업을 번들하므로 오프라인 구성에 자동으로 추가되지 않습니다.
플레이어에 다운로드한 정확한 자산을 사용자 지정하고 최적화할 수 있도록, Adobe에서는 사용자 지정 구성 요소가 Screens의 오프라인 캐싱 로직에 종속성을 노출하는 확장 메커니즘을 제공합니다.
아래 섹션에서는 특정 프로젝트에 대한 pom.xml의 사용자 지정 오프라인 리소스 핸들러에 대한 템플릿과 최소 요구 사항을 소개합니다.
package …;
import javax.annotation.Nonnull;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Reference;
import org.apache.felix.scr.annotations.Service;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceUtil;
import org.apache.sling.api.resource.ValueMap;
import com.adobe.cq.screens.visitor.OfflineResourceHandler;
@Service(value = OfflineResourceHandler.class)
@Component(immediate = true)
public class MyCustomHandler extends AbstractResourceHandler {
@Reference
private …; // OSGi services injection
/**
* The resource types that are handled by the handler.
* @return the handled resource types
*/
@Nonnull
@Override
public String[] getSupportedResourceTypes() {
return new String[] { … };
}
/**
* Accept the provided resource, visit and traverse it as needed.
* @param resource The resource to accept
*/
@Override
public void accept(@Nonnull Resource resource) {
ValueMap properties = ResourceUtil.getValueMap(resource);
/* You can directly add explicit paths for offline caching using the `visit`
method of the visitor. */
// retrieve a custom property from the component
String myCustomRenditionUrl = properties.get("myCustomRenditionUrl", String.class);
// adding that exact asset/rendition/path to the offline manifest
this.visitor.visit(myCustomRenditionUrl);
/* You can delegate handling for dependent resources so they are also added to
the offline cache using the `accept` method of the visitor. */
// retrieve a referenced dependent resource
String referencedResourcePath = properties.get("myOtherResource", String.class);
ResourceResolver resolver = resource.getResourceResolver();
Resource referencedResource = resolver.getResource(referencedResourcePath);
// let the handler for that resource handle it
if (referencedResource != null) {
this.visitor.accept(referencedResource);
}
}
}
다음 코드는 해당 특정 프로젝트에 대한 pom.xml의 최소 요구 사항을 제공합니다.
<dependencies>
…
<!-- Felix annotations -->
<dependency>
<groupId>org.apache.felix</groupId>
<artifactId>org.apache.felix.scr.annotations</artifactId>
<version>1.9.0</version>
<scope>provided</scope>
</dependency>
<!-- Screens core bundle with OfflineResourceHandler/AbstractResourceHandler -->
<dependency>
<groupId>com.adobe.cq.screens</groupId>
<artifactId>com.adobe.cq.screens</artifactId>
<version>1.5.90</version>
<scope>provided</scope>
</dependency>
…
</dependencies>
모두 함께
아래 비디오에서는 완료된 구성 요소와 시퀀스 채널에 추가하는 방법을 보여줍니다. 그런 다음 채널이 위치 표시에 추가되고 궁극적으로 스크린 플레이어에 할당됩니다.
완료된 코드
다음은 자습서에서 완성된 코드입니다. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip 및 screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip은 컴파일된 AEM 패키지입니다. SRC-screens-weretail-run-0.0.1.zip 는 Maven을 사용하여 배포할 수 있는 컴파일되지 않은 소스 코드입니다.
