AEM 이벤트 핸들러 (listeners)

AEM 6.1에서 JS를 통해 Component 내의 dialog select를 이벤트 핸들러로 제어하기 위해 공부한 것입니다.

---

1. Component 내에서 select 노드 안에 listeners : selectionchange를 통해 단일 listeners 노드로만 제어

function() {
  var select = this;
  var selectedOption = select.getValue();
  var dialog = select.findParentByType('dialog');
  var text1 = dialog.getField('./text1').el.dom;
  var text2 = dialog.getField('./text2').el.dom;
  

  if (selectedOption === 'option1') {
    text1.style.display = "block";
    text2.style.display = "none";
  } else if (selectedOption === 'option2') {
    text1.style.display = "none";
    text2.style.display = "block";
  } else {
    text1.style.display = "none";
    text2.style.display = "none";
  }
}

select의 이름을 SelectOption으로 지정하고 text1과 text2를 동일한 경로에 지정
 
그 후 SelectOption 하위에 options 노드를 두고 options의 하위로 option1과 2를 지정하였다.
 
엘리먼트로 text1과 2의 name 값을 잡아주고 조건문을 통해 option1이 선택 시,
 
text1의 style.display를 block하고, text2의 경우 style.display를 none 하는 방식으로 하였다.
 
생각보다 간편하게 만들어졌으나, 엘리먼트에서 textField 전체를 지정하였기에
 
같은 dialog 내에 다른 textField가 존재한다면 같이 적용된다는 단점이 있다.
 
또한 TextField의 input 창만을 숨겨줄 뿐, TextLabel의 경우에는 적용되지 않았다.

---

function() {
  var select = this;
  var selectedOption = select.getValue();
  var dialog = select.findParentByType('dialog');
  var text1 = dialog.getField('./text1');
  var text2 = dialog.getField('./text2');

  var label1 = text1.findParentByType('panel').items.get(7).el.dom; //label1에 text1 위치의 상위 panel을 찾고 panel 하위의 items 노드에 있는 7번째 el.dom을 get
  var label2 = text2.findParentByType('panel').items.get(8).el.dom; //label1에 text1 위치의 상위 panel을 찾고 panel 하위의 items 노드에 있는 8번째 el.dom을 get


  if (selectedOption === 'option1') { //option1이 선택되었을때
    text1.show();
    text2.hide();
    label1.style.display = 'block';
    label2.style.display = 'none';
  } else if (selectedOption === 'option2') { //option2가 선택되었을때
    text1.hide();
    text2.show();
    label1.style.display = 'none';
    label2.style.display = 'block';
  } else { //아무것도 선택하지 않았을때
    text1.hide();
    text2.hide();
    label1.style.display = 'none';
    label2.style.display = 'none';
  }
}

그래서 TextLabel까지 잡아주면서 다른 TextField는 포함되지 않도록 엘리먼트에서 순서를 지정해주었고
 
label1과 2로 함수를 지정하여 부모 panel에서 적용되어 첫번째부 0으로 설정하였다.
 
다만, 이 방식으로 할때 JS를 디버깅에서 찾을 수 없는 것 같다.

---

2. 다른 경로에 JS 파일을 만들고 listeners 노드를 통해 호출해오는 방식(Helper class 경로)

var Toggle = {};

Toggle.SelectOption = function(field, value) {
  var selectedOption = value;
  var dialog = field.findParentByType('dialog');
  var text1 = dialog.getField('./text1');
  var text2 = dialog.getField('./text2');

  if (selectedOption === 'option1') {
    text1.show();
    text2.hide();
  } else if (selectedOption === 'option2') {
    text1.hide();
    text2.show();
  } else {
    text1.hide();
    text2.hide();
  }
};

function(field, value) {Toggle.SelectOption(field, value);}

해당 방식에서는 제어하는데 있어서 간편하고 유용하다는 Toogle 방식을 이용하여 JS에서 이벤트 핸들러를 정의했다
 
위에서 한 방식에 비하면 코드가 짧아지고 원하는 결과값을 얻을 수 있었다.
 
두번째의 경우에는 listeners:selectionchange에 value 값으로 넣어주면 된다.
 
이렇게 할 경우 JS파일을 정상적으로 호출하여 select한 option값에 따라 text컴포넌트 전체를 감춰준다.

---

여기까지 공부했던 AEM에서 이벤트 핸들러를 통해 컴포넌트 제어하는 방법이였습니다.
 
페이지 자체에 적용하기 위해서는 해당 코드 외에도 html 등에서 컴포넌트를 화면에 보여줘야 합니다.