설명서AEM 6.5사용 안내서

Touch UI로 마이그레이션 migration-to-the-touch-ui

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

  • 개발자

버전 6.0부터 Adobe Experience Manager(AEM)에서는 터치 지원 UI(간단히 터치 UI ​이라고도 함)라는 새 사용자 인터페이스를 도입했습니다. Adobe Experience Cloud 및 전체 Adobe 사용자 인터페이스 지침에 맞게 조정됩니다. 이 UI는 클래식 UI ​라고 하는 레거시 데스크탑 지향 인터페이스를 사용하는 AEM의 표준 UI가 되었습니다.

클래식 UI가 있는 AEM을 사용 중인 경우, 작업을 수행하여 인스턴스를 마이그레이션합니다. 이 페이지는 개별 리소스에 대한 링크를 제공하여 발판 역할을 하기 위한 것입니다.

NOTE
이러한 마이그레이션 프로젝트는 인스턴스에 중요한 영향을 줄 수 있습니다. 권장 지침은 프로젝트 관리 - 모범 사례를 참조하세요.

기본 사항 the-basics

마이그레이션할 때 클래식 UI와 터치 UI 간의 다음과 같은 주요 차이점에 유의하십시오.

클래식 UI
터치 지원 UI
는 JCR 저장소에 노드 구조로 설명되어 있습니다. UI의 요소를 나타내는 모든 노드를 ExtJS 위젯 이라고 하며, ExtJS에 의해 클라이언트측에서 렌더링됩니다.
JCR 저장소에서도 노드 구조로 설명됩니다. 단, 이 경우 모든 노드는 렌더링을 담당하는 Sling 리소스 유형(Sling 구성 요소)을 참조합니다. 따라서 UI는 (기본적으로) 서버측에서 렌더링됩니다.

sling:resourceType

  • 사용되지 않음

sling:resourceType

  • 사용됨
  • 예:
    cq/gui/components/authoring/dialog

대화 상자 노드:

  • 이름: dialog
  • jcr:primaryType: cq:Dialog

대화 상자 노드:

  • 이름: cq:dialog
  • jcr:primaryType: nt:unstructured

JavaScript 위치:

  • 명령형 부품은 리스너를 사용하여 직접 포함되거나 clientlibs에서 관리됩니다.

JavaScript 위치:

  • 필수 부분은 대화 상자 정의, 즉 책임 분리에 포함될 수 없습니다.

이벤트 처리:

  • 대화 상자 위젯은 JavaScript 코드를 직접 참조합니다.

이벤트 처리:

  • JavaScript은 대화 상자 이벤트를 관찰합니다.

클라이언트가 수행한 렌더링:

  • 클라이언트가 동적으로 UI 구성 요소를 만듭니다.
  • 서버에서 (JSON으로) 클라이언트 요청 (풀) 구성 요소 정의.

서버에서 수행한 렌더링:

  • 클라이언트가 관련 UI와 함께 페이지를 요청합니다.
  • 서버에서 Coral UI 구성 요소를 사용하여 UI를 HTML 문서로 전송(푸시)합니다.

즉, 클래식 UI에서 Touch UI로 UI 섹션을 마이그레이션하면 ExtJS 위젯 ​을(를) Sling 구성 요소 ​에 포팅할 수 있습니다. 이를 쉽게 하기 위해 터치 UI는 UI에 대한 일부 Sling 구성 요소(Granite UI 구성 요소라고 함)를 이미 제공하고 있는 Granite UI 프레임워크를 기반으로 합니다.

시작하기 전에 상태 및 관련 권장 사항을 확인하십시오.

Touch UI 개발의 기본 사항은 견고한 기반을 제공합니다.

페이지 작성 마이그레이션 migrating-page-authoring

대화 상자는 구성 요소 마이그레이션 시 중요한 요소입니다.

콘솔 마이그레이션 migrating-consoles

콘솔을 사용자 지정할 수도 있습니다.

관련 고려 사항 related-considerations

Touch UI로의 마이그레이션과 직접 관련이 없지만, 권장되는 연습 방법이므로 동시에 고려할 만한 관련 문제가 있습니다.

NOTE
개발 - 모범 사례도 참조하세요.

추가 리소스 further-resources

AEM 개발에 대한 전체 정보는 아래의 리소스 컬렉션을 참조하십시오.

CAUTION
AEM 현대화 도구는 커뮤니티 활동으로, Adobe이 지원하거나 보증하지 않습니다.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2