조리법:Qooxdoo에서 핸들러를 비즈니스 단위로 추상화 하고 단축키 지원하기

위클립스
이동: 둘러보기, 찾기


목차

[편집] Command 선언

Qooxdoo에서의 명령 선언은 이클립스의 커맨드 프레임워크와 유사하다. 커맨드는 동작의 구현을 포함하지 않으며, 커맨드의 이름(레이블), 아이콘등으로 선언된다.

다소 특이한 점이 하나 있는데, 생성자의 첫번째 인자가 단축키 표현식이라는 점이다.

var deleteCommand = new x.ui.core.Command("DEL").set({
  "label"   : "삭제",
  "enabled" : false
});

향후, deleteCommand 객체는 DEL키가 눌릴 때 마다, execute 이벤트를 발생시키게 된다.

[편집] 핸들러 추가

핸들러를 추가하는 것은 Qooxdoo 내에서 이벤트 핸들러를 부착하는 것과 동일하며, execute 이벤트를 이용한다:

deleteCommand.addListener("execute", function(e){
  alert("선택된 항목을 지웁니다!");
});

[편집] 단축키의 적용 범위 제어

좋은 단축키 시스템은 반드시 포커스에 대응을 해야 한다. 아무대서나 단축키가 발동된다면, 복잡한 프로그램에서는 쓸 수가 없다.

트리가 활성화 되었을 때에만, 단축키가 활성화 되도록 해 보자:

tree.addListener("activate", function(e){
  deleteCommand.set({"enabled": true});
});
 
tree.addListener("deactivate", function(e){
  deleteCommand.set({"enabled": false});
});

[편집] UI에 기여

이제, 명령을 정의하고, 비즈니스로직(핸들러)를 구현하였고, 단축키의 스코프를 통제하는 코드를 짰으니, UI에 이 명령을 기여하는 것만 남았다.

만들어진 명령을 UI로 기여하기:

var treeMenu = new qx.ui.menu.Menu();
treeMenu.add(new qx.ui.menu.Button().set({
  "command" : deleteCommand
}));
tree.set("contextMenu", treeMenu");

[편집] 결론

수행결과는 http://tinyurl.com/nhabpxs 에서 확인 할 수 있다.

대강 이런 구조다:

핸들러와 UI기여가 분리되어 있다는 점에서는 이클립스 커맨드 컨셉과 유사하지만, 단축키가 얽혀 있고, UI가 직접 커맨드와 관계를 갖는 면에서는 JFace Action이나, 스윙과 유사하다.

아쉬운 점들을 꼽자면:

정도이지 싶다. 덜파서 아직 못 찾은 것일 수도 있는데, 없는 것 같다.

이 기사에 대한 의견은 토론 페이지를 통해 나눌 수 있습니다.

개인 도구
이름공간
변수
행위
포탈
탐색
도움
도구모음