Dojo Dojo로 HTML 위젯 개발하기 - Dojo 이벤트 다루기

황제낙엽 2009.03.18 21:32 조회 수 : 80 추천:119

sitelink1  
sitelink2  
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  
http://www.ibm.com/developerworks/kr/library/tutorial/wa-dojowidgets/section11.html

Dojo 이벤트 다루기

이 절에서는 "Dojo 방식"으로 이벤트를 다루겠다. 이 장을 읽기 전에 참고자료의 Dojo event system을 읽어두면 좋을 것이다.

HTML 템플릿에 이벤트 핸들러를 붙이기

Listing 39는 Dojo 이벤트 시스템을 이용하여 Dojo 위젯의 이벤트를 다루는 방법이다. HTML 템플릿에서 dojoAttachEvent="eventName: eventHandlerMethod;" 속성을 정의해야 한다. eventName은 표준 DOM 이벤트 이름이다("onClidk" 같은). eventHandlerMethod는 위젯의 자바스크립트 코드에 정의된 메서드로 이벤트 발생시 호출된다. 이 메서드는 Dojo 이벤트 객체를 받아들인다.

Listing 39는 dojoAttachEvent 속성이 HTML 템플릿에서 어떻게 이용되는지 보여준다.


Listing 39. dojoAjax/src/widget/template/HtmlHelloWorld.html
                    
·미리보기 | 소스복사·
  1. <div>  
  2.    <span dojoAttachEvent="onClick: onClickHandler;">  
  3.       Click me   
  4.    </span>  
  5. </div>  

Listing 40 은 자바스크립트 코드에 onClickHandler() 이벤트 핸들러가 어떻게 정의되어 있는지 보여준다.


Listing 40. dojoAjax/src/widget/HelloWorld.js
                    
·미리보기 | 소스복사·
  1. dojo.provide("dojo.widget.HelloWorld");   
  2. dojo.require("dojo.widget.HtmlWidget");    
  3.   
  4. dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {   
  5.    templatePath: dojo.uri.dojoUri("src/widget/templates/HtmlHelloWorld.html"),   
  6.   
  7.    onClickHandler: function(evt) {   
  8.       alert("Node clicked");   
  9.    }       
  10. });  

Listing 41 은 Listing 39 와 40에서 정의한 위젯을 테스트하는 test.html 파일이다.


Listing 41. test.html: 이벤트 핸들링 테스트
                    
·미리보기 | 소스복사·
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="dojoAjax/dojo.js"></script>  
  4. <script type="text/javascript">  
  5.    dojo.require("dojo.widget.HelloWorld");   
  6. </script>  
  7. </head>  
  8. <body>  
  9.    <div dojoType="HelloWorld">  
  10.    </div>  
  11. </body>  
  12. </html>  

Dojo 식으로 이벤트를 핸들링하는 것은 표준 DOM 이벤트를 사용하는 것(node.onclick = function(evt) { this.className='clicked';};}; 같은)과는 조금 다르다. 한 예로 목표 노드를 this 키워드를 통해 접근할 수 없고 대신에 Dojo의 evt.currentTarget 속성을 사용해야 한다.

또 다른 예로는 이벤트 핸들러로부터 true/false를 얻고 싶다면 Dojo로부터 얻은 객체를 사용해야 함을 들 수 있다. evt.returnValue = true/false;를 사용하라.

또 다른 흥미로운 점은 부모 DOM 노드의 이벤트가 넘쳐 자식에게 온 경우 이벤트를 멈출 수 있다는 것이다. dojo.event.browser.stopEvent(evt); 메서드를 사용하라.

게다가 Dojo는 세미콜론(;)을 이용하여 복수개의 이벤트 핸들러를 명시할 수 있다. 이를테면 다음과 같다. dojoAttachEvent="onClick: onClickHandler; onKeyPress: onKeyPressHandler;".




위로


이벤트 핸들러를 동적으로 붙이기

어디든 자바스크립트로 이벤트 핸들러를 동적으로 붙일 수 있다. Listing 42에서는 postCreate 메서드에서 HelloWorld 위젯의 domNode DOM 요소를 이벤트 핸들러로 붙이고 있다. 이 위젯을 테스트하려면 Listing 41의 test.html을 사용하라.


Listing 42. dojoAjax/src/widget/HelloWorld.js
                    
·미리보기 | 소스복사·
  1. dojo.provide("dojo.widget.HelloWorld");   
  2. dojo.require("dojo.widget.HtmlWidget");    
  3. dojo.require("dojo.event.*");   
  4.   
  5. dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {   
  6.    templateString: '<div dojoAttachPoint="domNode">Click here</div>',   
  7.   
  8.    postCreate: function() {   
  9.       var controller = this;   
  10.       dojo.event.kwConnect({   
  11.   
  12.       srcObj: this.domNode,   
  13.       srcFunc: "onclick",   
  14.       targetObj: controller    
  15.       targetFunc: "onClickHandler",    
  16.       once:true});   
  17.    },   
  18.    onClickHandler: function() {   
  19.       alert("Node clicked");   
  20.    }       
  21. });  




위로


오래된 형태의 DOM 자바스크립트 이벤트 핸들링

Dojo는 프레임워크가 아니라 툴킷이다. 그래서 필요할 때만 서브시스템으로 사용할 수 있다. 한 가지 예로 이벤트 핸들러를 오래된 DOM 형태의 자바스크립트 방식으로 this.domNode.onclick = function() {dojo.debug("Clicked");};처럼 정의할 수 있다. 무엇을 하고 있는지만 확실히 알고 있다면 오래된 형태의 이벤트 핸들링에 문제가 없다.

어떤 경우 위젯 기반구조나 이벤트 핸들링 같은 Dojo 서브시스템을 확장된 형태로 사용하면 응용 프로그램의 메모리가 넘치거나 반응이 느려질 수도 있다. 한번에 시각적인 컴포넌트를 많이 불러들인 특이한 경우에 특히 그렇다. Dojo 서브시스템과 브라우저 가상 머신에 부담을 주지 않도록 하는 것이 좋다.

오래된 형태의 이벤트 핸들링 기법은 브라우저의 자바스크립트 가상 머신이 다루기 더 쉬울 수도 있다. Dojo 이벤트 핸들링 시스템을 사용하면 개발자의 삶이 더 편해진다. 개인적인 판단과 상식으로 이 둘 사이의 균형을 잡을 필요가 있다.




위로


HTML 템플릿의 자바스크립트

HTML 템플릿에서 자바스크립트를 사용하면서 경험하는 가장 큰 문제는 HTML 템플릿의 개념적인 일관성이 깨진다는 것이다. 하지만 그것이 무얼 하는지 정확히 이해한다면 여전히 할만하다. 다음 예제를 보자. 

·미리보기 | 소스복사·
  1. <div onclick="dojo.widget.byId('${this.widgetId}').onMouseClick();">Click me<div>  


이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
34 스크랩 황제낙엽 2009.03.11 27
33 웹 개발 패러다임의 전환 - Flex와 Ajax의 동거 황제낙엽 2006.12.21 125
32 Ajax 강의 정리 황제낙엽 2006.04.04 73
31 자바 기술을 이용한 AJAX의 활용 황제낙엽 2006.02.08 15
30 대표적인 AJAX Framework 소개 file 황제낙엽 2007.02.14 100
29 Ajax Framework 인기 순위: Ajaxian.com 황제낙엽 2007.02.13 23
28 prototype.js 를 위한 개발자 노트 (Ajax Framework) file 황제낙엽 2007.02.15 15
27 Dojo 샘플 file 황제낙엽 2009.03.23 22
26 Dojo로 HTML 위젯 개발하기 - 참고자료 황제낙엽 2009.03.18 16
25 Dojo로 HTML 위젯 개발하기 - 정리 황제낙엽 2009.03.18 15
24 Dojo로 HTML 위젯 개발하기 - 개발과 디버깅: 기타 황제낙엽 2009.03.18 49
» Dojo로 HTML 위젯 개발하기 - Dojo 이벤트 다루기 황제낙엽 2009.03.18 80
22 Dojo로 HTML 위젯 개발하기 - 복합 위젯 황제낙엽 2009.03.18 25
21 Dojo로 HTML 위젯 개발하기 - 내포 위젯 황제낙엽 2009.03.18 21
20 Dojo로 HTML 위젯 개발하기 - 내포 HTML 황제낙엽 2009.03.18 40
19 Dojo로 HTML 위젯 개발하기 - 위젯에 프로그래밍에 따라 접근하기 황제낙엽 2009.03.18 43
18 Dojo로 HTML 위젯 개발하기 - 위젯 개발의 기초 황제낙엽 2009.03.18 18
17 Dojo로 HTML 위젯 개발하기 - 'Hello World' 위젯 황제낙엽 2009.03.18 62
16 Dojo로 HTML 위젯 개발하기 - Dojo HTML 위젯 황제낙엽 2009.03.18 363
15 Dojo로 HTML 위젯 개발하기 - 시작하기 황제낙엽 2009.03.18 20
쓰기 태그