AEM Dialog Event Handler — Part1

개념과 종류, 발생 시점 알아보기

편도걸
hivelab-dev
3 min readMay 23, 2019

--

Dialog Event Handler를 사용하여 Component의 Dialog Custom을 진행하면서, AEM에서 사용하는 Event에 관련하여 정의된 문서나 정리 글을 찾을 수 없어 고생했던 적이 많았습니다. 그동안 개발을 진행하면서 알게 된 지식이나 경험을 공유하고자 글을 작성했습니다.

1. Dialog Event Handler?

Dialog Event Handler는 AEM의 Authoring Page에서만 사용되는 Event입니다. AEM에서 공식적으로 DOM support events와 jQuery를 사용하여 Event를 처리하는 것을 권장(#link) 하고 있지만, AEM에서 제공하는 별도의 Dialog Event Handler가 존재합니다. 이를 활용하여 Dialog Customizing을 진행할 수 있습니다.

2. Dialog Event 종류와 발생 시점

Dialog Event Handler를 Dialog Customizing에 적용하려면, AEM에서 제공하는 별도의 Event와 Dialog Authoring 과정을 알고 있어야 수월하게 사용할 수 있습니다. Dialog Authoring이 진행되는 과정을 확인하면서 Dialog Event가 어떤 시점에서 발생되는지 알아보겠습니다.

* Dialog Authoring 흐름도

(1) foundation-contentloaded

DOM에 새로운 콘텐츠가 추가되는 시점에 발생합니다.
(②번 직전 발생)

(2) dialog-ready

Dialog의 Rendering이 완료된 시점에 발생합니다.
(②번 직후 발생)

(3) dialog-success

Dialog의 콘텐츠(Data) 저장이 완료된 시점에 발생합니다.
(④번 직후, ⑤번 직전 발생)

(4) dialog-beforeclose

Dialog가 닫히기 직전 시점에 발생합니다.
(⑤번 직후, ⑥번 직전 발생)

(5) dialog-closed

Dialog가 닫히는 시점에 발생합니다.
(⑥번 직후 발생)

먼저 Dialog Event Handler가 무엇인지와 Event가 어느 시점에서 발생되는지 간략하게 정리했습니다. 이후 포스팅은 각 Event에 대해 탐구를 진행하면서 알게 된 내용을 소개합니다.

[Next Post] AEM Dialog Event Handler — Part2 : dialog-ready

--

--