AEM Accordion 위젯 제작
-버전 정보 : AEM 6.1 / Coral 6.1
AEM에서 위젯을 처음 개발하는 시선으로 작성하였습니다.
경험 공유지만, 개발하는 방법을 중점으로 서술하였으며, Accordion뿐 아니라 다른 위젯을 개발하는 분들에게도 도움이 되었으면 합니다 :)
Accordion 위젯 제작 이유
AEM에서 기본적으로 Dialog에 사용할 수 있는 위젯¹은 만들어져 있지만, Coral UI²에서 제공되는 UI는 위젯으로 만들어져 있지 않습니다.
UI를 사용하기 위해선 Coral UI의 형식에 맞추어 JS를 작성하여야 합니다.
예를 들어, 위젯으로 만들지 않고 사용하기 위해서는 아래와 같은 처리가 필요합니다.
Coral UI를 사용하기 위해 매번 컴포넌트에 Dialog JS를 위와 같이 처리해주는 것은 비효율적이기 때문에 위젯화 하고자 하였습니다.
Accordion 위젯 제작과정
- 위젯 폴더구조 세팅
- Coral UI의 기존 Accordion 로직 재정의
- render.jsp 설정
- 단순 위젯 화 외의 추가옵션 부여
크게 위의 4가지 과정으로 분류하여 진행하였습니다.
1 dialog에서 사용하기 위한 위젯 폴더구조 세팅
(apps 하위로 세팅)
기본 위젯은 보이는 바와 같이 libs 하위 폴더에 정의되어 있습니다.
원본은 유지하면서 신규 위젯을 추가하기 위해 apps 하위에 경로를 설정하였습니다.
apps 하위의 경로는 Override 되는 경로로 만약 libs와 apps에 ‘ABC’위젯이 있다면 Override 되어 Dialog에서 사용 시 apps하위의 ‘ABC’위젯이 적용됩니다.
2Coral UI의 기존 Accordion 로직 재정의
(중복으로 JS가 추가되는 걸 방지하기 위함)
Coral UI의 JS는 위의 경로에 위치되어 있습니다.
3만 Line이 넘는 코드로, 재정의하고자 하는 Accordion 관련 로직은 2032번 Line에 있습니다. (버전에 따라 다소 차이가 있을 수 있습니다.)
JS 코드를 복사하여 신규 위젯에 JS 파일을 만듭니다.
Custom을 위해 변수명을 hiveAccordion으로 변경하였고, 주석은 기존의 Accordion코드 해석을 위해 그대로 유지했습니다.
이렇게 Coral UI의 Accordion은 유지하고, 신규 위젯에 적용되는 Accordion JS를 별도로 생성하였습니다.
3 render.jsp 설정
(dialog의 html 노출을 결정)
위젯을 만들 때 중요한 파일 중 하나인 render.jsp입니다.
render.jsp는 dialog에 노출되는 html이 만들어지는 파일입니다.
기본 위젯을 살펴보면 알 수 있듯이, _cq_dialog의 content.xml 데이터를 기반으로 html이 만들어집니다.
위의 content.xml 구조를 사용하여 Coral UI의 html 형식을 만들기 위해 render.jsp 파일을 작성합니다.
4 단순 위젯화 외의 추가옵션 부여
(기본 사용성 +@)
1~3단계를 거치면 기본적인 Accordion을 사용할 수 있는 위젯이 완성됩니다.
하지만 개발자의 관점에서 추가로 이러한 옵션도 있으면 좋을 것 같다는 생각을 하게 되어 간단한 옵션 두 가지를 생각하게 되었습니다.
- Accordion background 유무를 제어하는 useBox 옵션
- Dialog를 열었을 때 Accordion의 펼친 상태를 제어하는 autoOpen옵션
useBox 옵션
CSS 제어를 위해 다음과 같이 CSS 폴더 및 파일을 생성하였습니다
다음으로 render.jsp에 useBox 옵션을 받을 수 있도록 코드를 수정합니다.
이제 옵션 설정을 위해 다이얼로그 content.xml에 Property를 추가합니다.
위와 같은 설정으로 아래의 다이얼로그가 완성됩니다!
autoOpen 옵션
autoOpen을 제어하도록 하기 위해 accordion.js에 코드를 추가합니다.
content.xml에 property를 설정하면 render.jsp의 accordionAttrs.addOthers 메서드로 Accordion html 태그에 data-autoopen attribute가 생성됩니다.
이제 this._hivelabAcc 함수에 Accordion을 제어하는 로직을 추가합니다.
data-autoopen가 true라면 현재 열려있는 li의 Index를 저장하고, Dialog가 펼쳐질 때 Index를 읽어 해당되는 li를 펼쳐줍니다.
아코디언의 setActive(index)를 사용하여 해당 li를 펼칠 수 있습니다.
Accordion 위젯 완성본
- MultiField 내부 Accordion
- useBox 활용 Accordion
- Single Accordion & autoOpen Accordion
글을 마치며
한번 위젯화를 진행해보면 다른 UI도 위젯화를 할 수 있는 생각이 들게 됩니다.
또한, 기존의 위젯을 API 문서만 읽어 사용하였다면 한번 위젯을 개발해봄으로써 원리를 이해할 수 있고 추가로 커스텀을 시행해볼 수 있게 되었습니다.
처음 위젯을 만들어 보거나 막막하셨던 분이 이 글을 읽고 참고가 되셨길 바랍니다.
