AEM을위한 기본에서 터치로 UI 마이그레이션 : 추가 팁 경험

(Liubou Masiuk) (2019 년 10 월 17 일)

이전 (클래식에서 TouchUI로 마이그레이션에 대한 게시물)에서는 다음을 사용하여 완전히 클래식 UI 구성 요소 라이브러리를 Touch UI로 마이그레이션하는 전체 “하이브리드 모드”접근 방식을 설명했습니다. AEM의 호환성 모드. 이 게시물에서 우리는 우리가 만난 몇 가지 “특이점”을 언급했습니다. 이 새 게시물에서는 이러한 단점과 이러한 단점 중 일부를 처리하는 방법에 대해 자세히 설명합니다.

하이브리드 모드는 매우 유용하지만 개발 팀이 채택하는 것을 방해 할 수있는 몇 가지 제한 사항이 있습니다. 대규모 프로젝트에 대한 추가 노력없이 TouchUI. 다음은 우리가 겪은 문제와 개발 팀이 제안한 해결책입니다.

작성자는 구성 요소를 편집하는 동안 & 이미지를 끌어 놓을 수 없습니다.

h2>

ClassicUI 위젯 라이브러리 는 이미지 업로드 및 처리를위한 SmartImage 구성 요소를 제공합니다. 기본적으로 이미지 자산은 다음 두 가지 방법으로 업로드 할 수 있습니다.

  • 파일 시스템에서
  • 페이지 콘텐츠 찾기에서 이미지를 끌어서 DAM (Digital Asset Manager)에서 왼쪽 패널
DAM 자산 패널 (TouchUI 인터페이스)
DAM 자산 패널 (TouchUI 인터페이스)

TouchUI 구현의 기술적 세부 사항을 자세히 살펴 보겠습니다. 호환성 모드는 iframe 내부에 ClassicUI 대화 상자를 렌더링합니다. 어떤 이유로 호환 모드에는 즉시 드래그 & 드롭 이벤트를 추적하는 로직이 없습니다. 이것은 작성자가 이미지를 에셋 패널 밖으로 드래그하지 못하도록 제한합니다 (ClassicUI 환경 내에서 수행하는 데 사용됨). 이는 이미지를 구성 요소에 배치 할 방법이 없음을 의미합니다. 또한 이미지 필드가 필요한 경우 작성자는 비어있는 필수 필드로 인해 구성 요소 구성을 완료 할 수있는 옵션이 없습니다.

해결책

이 문제를 해결하기 위해 우리는 결정했습니다. 표준 SmartImage 구성 요소를 확장하여 기존 기능 외에도 경로 필드를 렌더링합니다. 결과적으로 작성자는 pathfield를 사용하여 이미지를 선택할 수 있으며 SmartImage 영역 내에 이미지가 나타나 필요한 경우 이미지를 미리 보거나 변경할 수 있습니다. 존재하지 않는 경로 (또는 이미지가 아닌 경로)의 경우 필드가 유효하지 않은 것으로 강조 표시됩니다.

구성 요소 내부의 필수 이미지 영역
구성 요소 내부의 필수 이미지 영역
  1. 원본을 확장하는 고유 한 사용자 지정 형식으로 원본 htmlsamartimage xtype을 다시 등록합니다. CQ HtmlSmartImage 위젯. 새 위젯의 초기화에서 컴포넌트 컨테이너에 추가 PathField 위젯을 추가합니다. 또한 ExtJS 기반 UI에 대한 일반적인 UI 업데이트 인 기본 위젯 레이아웃에 약간의 업데이트를 제공합니다.
  2. 모든 HTMLSmartImage의 바인딩 컨트롤 (PathFields). 우선 PathPicker에서 값을 가져오고 설정하는 메서드와 원본 구성 요소에 대해 동일한 메서드를 만들어 도우미를 준비합니다. 첫 번째 쌍은 쉬운 부분 인 PathField의 setValue 및 getValue입니다. 까다로운 부분은 원래 구성 요소 값을 다루는 것입니다. HTMLSmartImage는 액세스 가능한 상태에 값을 저장하지 않습니다.

this.fileReferenceField.getValue () 메소드를 사용하면 현재 이미지 경로를 쉽게 얻을 수 있습니다. 그러나 값을 원래 위젯으로 설정하려면 구성 요소에서 이미지 리소스 드롭을 에뮬레이션해야합니다. 다음과 같은 방법으로이를 관리 할 수 ​​있습니다.

이제 모든 값 접근자가 있으면 원본과 Pathfield 값이 언제 변경되는지 알 수 있습니다. Pathfield 변경을 추적하기 위해 blur이벤트를 사용할 수 있습니다. 원래 위젯의 경우 imagestate이벤트가 가장 적합합니다. originalremoved및 originalavailable의 두 가지 유형의 이미지 상태 변경을 추적해야하므로 리스너는 다음과 같습니다.

이제 바인딩 할 준비가되었습니다. 새 구현에서 유효성 검사 메커니즘을 유지하기 위해 포함 된 pathfield 인스턴스에 대한 원래 유효성 검사 논리를 재정의합니다.

모든 스캐 폴딩 필드 대화 상자가 비활성화됩니다.

AEM 스캐 폴드 모드 를 사용하면 작성자가 특정 스캐 폴드 양식 구조를 기반으로 페이지를 쉽게 만들 수 있습니다. 스캐 폴드는 잘 정의 된 구조화 된 콘텐츠 (예 : 기사, 블로그 게시물)를 만드는 데 매우 유용합니다.

하이브리드 모드에서는 모든 스캐 폴딩 양식 필드가 비활성화되어 편집 할 수 없습니다.

스캐 폴딩 양식 예제
스캐 폴딩 양식 예제

솔루션

페이지의 JSP에 cq.security 라이브러리를 포함하면 문제가 해결되고 스캐 폴딩 양식이 제대로 작동하기 시작했습니다.

클릭하면 데이터를 저장하지 않고 하이브리드 대화 상자가 닫힙니다. 대화 상자 영역 외부

모든 구성 요소는 편집 모드에서 팝업되는 구성 요소 구성 대화 상자 창에서 편집됩니다.

AEM에서 구성 요소 편집 (TouchUI 인터페이스)
AEM에서 구성 요소 편집 (TouchUI 인터페이스)

하이브리드 및 TouchUI 대화 상자의 사용자 경험에 약간의 차이 :

  • 사용자가 TouchUI 대화 상자를 클릭해도 아무 일도 일어나지 않습니다.
  • 사용자가 하이브리드 대화 상자를 클릭하면 입력 된 데이터를 저장하지 않고 닫힙니다.

저장되지 않은 모든 데이터는 g 부품 외부를 실수로 클릭하면 손실됩니다! 말할 것도없이 이것은 저자들에게 상당히 성가신 일입니다.

해결책

다행히도 해결책은 매우 간단합니다. 처음에는 대화 상자 배경이 “모달”모드에 있습니다. 대화 상자 배경 모드를 변경하려면 대화 상자의 JSP 파일을 오버레이하고 대화 상자 배경 모드를 “정적”값으로 설정해야합니다.

일부 대화 상자 필드가 대화 상자 창 영역에 맞지 않습니다.

앞에서 설명한 것처럼 UI 대화 상자는 TouchUI 대화 상자 창 내부의 iframe에서 렌더링됩니다. 이 대화 상자 창이 모든 동적 콘텐츠에 맞지 않는 경우가 있으며, 때로는 추가 스크롤바가 대화 상자 내부에 나타나는 이상한 레이아웃을 유발합니다.

추가 스크롤 하이브리드 모드의 구성 요소에 대한 요소
하이브리드 모드의 구성 요소에 대한 추가 스크롤 요소

솔루션

이러한 불편 함을 극복하기 위해 호환성 모드에서 대화 상자를 올바르게 렌더링하기위한 모든 구성 설정이 포함 된 JSP 파일을 오버레이합니다. 이 JSP 파일은 다음 경로 아래에 있습니다.

apps/cq/gui/components/authoring/compat/components/dialog/dialog.jsp

원본을 고려하도록 창 너비와 높이를 변경합니다. 대화 상자의 크기 및 브라우저의 창 크기.

우리는 실제로 터치 UI (산호) 래퍼와 iframe에 포함 된 클래식 대화 상자 사이에 바인딩을 제공하는 스크립트를 통해이 상황을 처리합니다. 이벤트 “dialogwrapper-ready”+ ns는 핸들러 함수 매개 변수로 미리 계산 된 너비 및 높이를 사용하는 경우에 필요합니다. 자체 재 계산을 수행 한 다음 폭과 높이를 Coral Dialog 콘텐츠로 설정할 수도 있습니다.

일부 구성 요소는 TouchUI에서 쉽게 편집 할 수 없습니다.

저작 경험은 AEM에서 구성 요소를 구현할 때 고려해야 할 가장 중요한 사항 중 하나입니다. 여러 슬라이드가 포함 된 회전식 구성 요소를 상상해보십시오. 편집 모드에서는 작성자가 슬라이드 순서를 쉽게 다시 정렬하고 슬라이드를 전환하지 않고 동시에 모든 슬라이드에 액세스 할 수 있도록 모든 슬라이드 슬라이드를 열로 렌더링하는 것이 좋습니다. ClassicUI와 TouchUI 사이에는 한 가지 중요한 차이점이 있습니다.

  • ClassicUI에서 제작 요소 (예 : 편집 막대)는 편집 모드에서 구성 요소로 렌더링되는 마크 업의 일부입니다.
  • TouchUI에서 제작 요소는 오버레이로 렌더링됩니다. 최종 구성 요소 마크 업은 iframe에서 렌더링됩니다. 이러한 조건의 조합으로 인해 작성자는 편집 모드에서 구성 요소와 전혀 상호 작용할 수없는 상황 (예 : 단추 클릭, 슬라이드 슬라이드 넘기기)이 발생합니다.

따라서 사용자가 편집 프로세스를 시작하기 전에 라이브러리의 몇 가지 구성 요소에 약간의 상호 작용이 필요하지만 TouchUI에서는 쉽게 달성 할 수없는 경우에 직면합니다.

해결책

그러나 가능한 해결책으로 고려할 수있는 몇 가지 수정 사항이 있습니다.

  1. 개발 노력이 필요하지 않은 빠르고 간단한 해결 방법이 있습니다. 편집 가능한 모든 구성 요소는 콘텐츠 트리에서 찾을 수 있으며 수정 대화 상자를 여는 도구 아이콘이 각 항목 옆에 있습니다.
TouchUI의 페이지 콘텐츠 트리 interface
TouchUI 인터페이스의 페이지 콘텐츠 트리

2. 많은 하위 구성 요소가있는 복잡한 구성 요소의 경우 편집 모드에서 구성 요소의 마크 업을 변경하여 모든 숨겨진구성 요소 영역이 작성자의 눈에 열리도록 할 수 있습니다. 즉, 편집 모드를 통해 모든 것을 볼 수 있고 액세스 할 수 있습니다.

3. 모범 사례로 Adobe는 AEM 핵심 구성 요소 내에서 이러한 저작 경험 사례를 지원하는 솔루션을 제공합니다. 캐 러셀 구성 요소 탭 구성 요소 는 구성 요소 툴바의 패널 선택 옵션을 사용하여 슬라이드 순서를 변경합니다. 현재 미리보기 된 요소를보고 변경합니다.

저작 할 수없는 콘텐츠에 도달하기위한 즉시 사용 가능한 솔루션
작성시 숨겨진 콘텐츠에 접근하기위한 기본 솔루션

페이지 잠금 해제버튼이 작동하지 않음

변경 사항을 위해 페이지를 잠금 및 잠금 해제 하는 표준 AEM 옵션이 있습니다. TouchUI 마이그레이션 접근 방식을 검증하는 동안 작성자가 잠긴페이지를 초기 상태로 되돌릴 수없는 상황을 발견했습니다. 다행히이 기능은 AEM 사이트 콘솔을 통해 제대로 작동합니다.

TouchUI 인터페이스의 잠금옵션
TouchUI 인터페이스의 잠금 옵션

유사한 문제는 여기 여기 .

해결 방법

브라우저 콘솔의 오류 메시지는 “Undefined의 공유속성을 읽을 수 없습니다. ”. 근본 원인은 누락 된 클라이언트 라이브러리 cq.shared에 있습니다.

잠금 / 잠금 해제기능 처리 중 오류 메시지
잠금 / 잠금 해제기능을 처리하는 동안 오류 메시지

cq.shared라이브러리를 페이지의 JSP에 포함하여 해결 문제가 발생하면 페이지 잠금 해제버튼이 예상대로 작동하기 시작합니다.

작성자 : Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

원래 게시 위치 : https://exadel.com 2019 년 10 월 17 일

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다