AEM Component : Dialog UX Part1
Datasource 를 이용한 List 구현.
안녕하세요~ 하이브랩에서 AEM 개발을 맡고 있는 김태형입니다 :)
이 글은 사용성 개선을 위한 개발 진행하면서 느꼈던 경험이나 기술을 공유하려고 작성했습니다.
AEM 개발 또는 기획을 하는 분들에게 도움이 되었으면 합니다.>ㅁ<
AEM 개발팀은 사용성 개선을 Static Component¹ 기반에서 많은 고민을 했습니다.
“Link 관련 기능 중 ID 입력란이 있는 거는 알겠는데.. 내가 생각하는 Component의 ID 값을 뭔지 어떻게 알지?”
“ID를 알기 위해서 페이지에 존재하는 Component 를 모두 확인해야 한다니.. 너무 불편하지 않나?”
“ 사용자에게 ID 입력을 요청할 것이 아니라 페이지에서 선택 가능한 ID List를 제공하고 선택하도록 하는게 좋지 않을까?”
List 형태를 어떻게 제공할까라는 고민을 계속 하였고, 동료들이 개발 방법을 정리해 놓은 문서와 갓구글의 정보를 통해 방법을 찾고, 공식 사이트에 등록된 예제를 통해 전체적인 코드 분석 후 필요한 부분을 발췌하여 개발을 시작했습니다.
Step 1 ) 노드 구조 파악
일단 AEM의 Data 저장소인 CRX/DE로 무작정 접속 후 페이지에서 최하위 Component의 노드 구조를 보던 중 경우의 수를 생각하기 시작했습니다.
순차 노드 탐색을 할 때 depth를 가지는 노드 구조가 있다면 과연 어떻게 처리해야 될지를 생각했습니다.
일단 노드를 제어할 수 있는 API 가 있지 않을까 하며 검색을 했더니 AEM에서 제공해주고 있었고, NodeIterator를 통해서 순차적으로 노드를 탐색을 할 수 있었습니다.
Step 2 ) 재귀 함수로 개발
private void recursiveNodeSearch( NodeIterator iterator ) {
try {
while ( iterator.hasNext() ) {
Node node = iterator.nextNode();
if ( node.hasProperty( "./id" ) ) {
map.put( node.getProperty( "./id").getString(),
node.getProperty( "./id" ).getString() );
} else {
recursiveNodeSearch( node.getNodes() );
}
}
} catch ( RepositoryException re ) {
logger.error( "Exception :::::: " + re.getMessage() );
}
}상위 노드의 유효성을 먼저 체크를 하고, 존재하면 노드 객체를 저장합니다. 노드의 ID 값을 저장하는 Property 가 존재하면 Key, Value 구조를 지닌 Map에 저장을 하고, Property 가 존재하지 않으면 자기 자신을 호출해서 앞선 과정을 반복합니다.
“재귀 함수를 통해서 ID값을 추출했어요~!”
동료 曰 “재귀 함수는 복잡도가 낮아서 퍼포먼스가 좋아요~”
“아 진짜요~? 퍼포먼스까지 잡았다니!! 끼얏!!”
결과물
“Component의 종류를 인식하기 위해 ID 값과 Component를 화면에 같이 제공하면 가시성도 높아지고, 사용성 개선이 더 이뤄지지 않을까?”
추가된 고민은 Part2 에서 보여드리겠습니다.
1.Static Component : DB의 정보를 보여주는 것이 아닌 사용자의 입력 데이터로만 보이는 정적인 Component.
2.재귀 함수 : 컴퓨터 과학에 있어서 재귀는 자신을 정의할 때 자기 자신을 재참조하는 방법을 뜻함.
