Dojo Dojo로 HTML 위젯 개발하기 - 위젯에 프로그래밍에 따라 접근하기

황제낙엽 2009.03.18 21:26 조회 수 : 43 추천:116

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

위젯에 프로그래밍에 따라 접근하기

이 절에서는 HelloWorld 위젯에 약간의 코드를 추가한다. Dojo 툴킷에 전통적인 자바스크립트 프로그래밍 기술이 적용될 때 잘못될 수 있는 부분을 알게 될 것이다.

오래된 형태의 자바스크립트 방법으로 위젯에 접근하기

"Hello World" 문자를 동적으로 변경하기 위해 HelloWorld 위젯에 몇 가지 코드를 추가한다고 가정하자. Listing 17은 능숙한 자바스크립트 개발자가 Dojo 위젯을 다루기 위해 쓴 첫 번째 코드다.


Listing 17. 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.   
  9.                        
  10.                        
  11.                        
  12.                        
  13.                        
  14.                        
  15. <body    
  16.  onload="document.getElementById('someID').innerHTML='New text';">  
  17.    <div id="someID" dojoType="HelloWorld"></div>  
  18. </body>  
  19. </html>  

Dojo 이벤트 시스템에 대해 더 알고 싶다면 참고자료를 참조한다.

어떤 결과가 나왔는지 알겠다! 이 코드는 전혀 작동하지 않는다. 무엇이 잘못되었는지 알아보자.




위로


1. <body onload="..."> 속성 실패

자바스크립트 <body onload="..."> 속성은 Dojo 툴킷에서 호환되지 않는다. 대신에 Dojo는 자체 이벤트 시스템에 onload 이벤트를 감싸두었다. Listing 18은 "Dojo 방식"으로 쓴 같은 코드다.


Listing 18. test.html: Dojo 형태 onload 코드
                    
·미리보기 | 소스복사·
  1. <html>  
  2. <head>  
  3. ...   
  4. <script>  
  5.    dojo.addOnLoad(function(){   
  6.       alert("onload!");   
  7.    });   
  8. </script>  
  9. </head>  




위로


2. Dojo 위젯은 DOM 요소가 아니다

바로 그거다. 그게 전부이다. Dojo 위젯은 DOM과 독립된 실체(entity)로 보통 1개 이상의 DOM 요소를 가지고 있다.

Dojo가 위젯을 생성할 때 위젯을 정의하기 위해 사용한 DOM 노드(<div id="someID" dojoType="HelloWorld"></div>)를 제거한다. 그래서 Dojo가 제어하기 위해 알고 있는 속성을 제외하고는 사라진다. 예를 들어 id 속성은 Dojo의 widgetId가 된다. 이 속성들을 위젯의 특정 DOM 노드에 넣고 싶다면 약간의 작업이 필요하다. 그 예로 Listing 19에서 HTML 템플릿을 이용하여 속성을 DOM 노드에 넣을 수 있다.


Listing 19. dojoAjax/src/widget/template/HtmlHelloWorld.html
                    
·미리보기 | 소스복사·
  1. <div id="${this.widgetId}">  
  2.    Hello World   
  3. </div>  

위 예제에서 ${this.widgetId} 코드 조각을 DOM 노드의 id 속성을 위해 사용했다. widgetId는 Dojo 위젯 하부 구조의 유일한 ID로 정의된 표준 위젯 속성이다. 또한 이것을 DOM ID로 이용하는 것도 가능하다.

속성을 전송하는 또 다른 방법은 자바스크립트 코드 파일에서 fillInTemplate() 메서드를 재정의(override)하는 것이다. 대개 "style" 속성을 전송하기 위해 이 메서드를 재정의한다.




위로


혼합된 방법, 혼합된 결과

이제 오래된 형태의 자바스크립트 코드이지만 중요한 실수를 제거한 코드로 Dojo 컴포넌트에 접근할 수 있다. Listing 17에서 시도한 내용을 Listing 20으로 성공할 수 있다.


Listing 20. test.html: 전통적인 방법으로 Dojo 위젯에 접근하기
                    
·미리보기 | 소스복사·
  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.    dojo.addOnLoad(function(){   
  7.       document.getElementById("someID").innerHTML="New text";   
  8.    });   
  9. </script>  
  10. </head>  
  11. <body>  
  12.    <div id="someID" dojoType="HelloWorld"></div>  
  13. </body>  
  14. </html>  

이 코드는 작동하지만 Dojo가 의도하는 방법은 아니다. 설명한 기법은 사실은 위젯 캡슐화가 안 된 좋지 않은 것이다. 그러나 자바스크립트 경험이 있다면 Dojo 위젯을 이와 같은 방식으로 시작할 것이다. 다음으로 Dojo 툴킷이 제안하는 방법을 살펴보자.




위로


Dojo 식으로 위젯에 접근하기

다시 한번 HelloWorld 위젯의 글귀를 동적으로 바꿔보고 싶다면 이번엔 Dojo 식으로 해 보자. Listing 21처럼 HTML 템플릿과 자바스크립트 코드를 수정해 사용하자.


Listing 21. dojoAjax/src/widget/template/HtmlHelloWorld.html
                    
·미리보기 | 소스복사·
  1. <div dojoAttachPoint="domNode">  
  2.    Hello World   
  3. </div>  




위로


결합점

Dojo 위젯은 HTML 템플릿에 생성된 DOM 요소를 조작하기 위해 결합점(attachment point)를 이용한다. 결합접은 기본적으로 DOM 요소에 의해 명명된다. Dojo 방식으로 코딩한다면 id="${this.widgetId}"와 같은 구문을 사용할 필요가 없다. 루트 DOM 노드를 id를 통해 접근할 수 없고 결합점을 통해야 하기 때문이다.

domNode
루트 DOM 요소에 수동으로 domNode 결합점을 대입할 필요가 없다. 이것이 기본이기 때문이다. 수동으로 결합점을 대입하는 것은 하부 개념을 확실히 하기 위해 튜토리얼 용도에만 사용한다.

템플릿의 어떤 HTML 요소에든지 결합점을 대입할 수 있다. 루트 요소 결함점은 전통적으로 domNode라고 명명되어 있다. 다른 요소들은 원하는 컨벤션에 따라 이름을 붙여줄 수 있다. 결합점 이름을 위해 접미사를 노드에 추가하면 코드는 더 읽기 쉬워진다. 결함점은 위젯 생성 때 위젯 필드로 자동으로 할당된다. 위젯 코드의 결합점을 참조하려면 this.someAttachPointNode 표기를 사용한다.

Listing 22 는 동적 변경자가 있는 위젯 코드다. 변경자는 출력될 글귀를 바꾸기 위한 것이다. domNode 결합점이 어떻게 사용되는지 주의하라.


Listing 22. 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.    // dynamic setters   
  8.    setHtml: function(htmlString) {    
  9.       this.domNode.innerHTML = htmlString;    
  10.    }    
  11. });  




위로


widgetId로 위젯 인스턴스 얻기

Dojo 툴킷은 Listing 23과 같이 widgetId를 이용해 동적으로 위젯 참조를 얻는 것이 가능하다.


Listing 23. widgetId로 위젯을 얻기
                    
·미리보기 | 소스복사·
  1. var widget = dojo.widget.manager.getWidgetById('someID');   
  2.   
  3. // or, a short version:   
  4. var widget = dojo.widget.byId('someID');   
  5.   
  6. // Gotcha: the following means document.getElementById('someID')   
  7. var widget = dojo.byId('someID');  




위로


최종 코드

Listing 24는 Dojo 방법으로 완성된 코드다. 위젯 코드에 의해 문구가 어디에 어떻게 출력될 모르고 추상 변경자(abstract setter)를 이용하는 것에 주목하라. 그래서 위젯은 사용자로부터 독립된 로직을 보여준다. 이것은 매우 대단한 일이다.


Listing 24. test.html
                    
·미리보기 | 소스복사·
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="dojoAjax/dojo.js"></script>  
  4. <script type="text/javascript"> dojo.require("dojo.widget.HelloWorld");   
  5.    dojo.addOnLoad(function(){   
  6.       dojo.widget.byId("someID").setHtml("New text");   
  7.    });   
  8. </script>  
  9. </head>  
  10. <body>  
  11.    <div id="someID" dojoType="HelloWorld"></div>  
  12. </body>  
  13. </html>  




위로


동적으로 Dojo 위젯 만들기

이전 예제에서 test.html 파일 내에 정의해서(<div dojoType="HelloWorld"></div>) 정적으로 위젯을 만들었다. 물론 자바스크립트 코드 내에서 dojo.widget.createWidget() 메서드를 사용하여 동적으로 위젯을 생성할 수 있다.


Listing 25. test.html: 동적으로 Dojo 위젯 생성하기
                    
·미리보기 | 소스복사·
  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.   
  7.    dojo.addOnLoad(function(){   
  8.    var newWidget = dojo.widget.createWidget(   
  9.          "HelloWorld", // widgetType   
  10.          {}, // widget attributes, for example {title: "Some Title"}   
  11.          dojo.byId("widgetPlaceholder") // reference to a DOM node that    
  12.             // will be REPLACED by new widget   
  13.          );   
  14.    });   
  15. </script>  
  16. </head>  
  17. <body>  
  18.    <div id="widgetPlaceholder"></div>  
  19. </body>  
  20. </html>  

dojo.widget.createWidget() 메서드는 2~4개의 인자를 가지며 마지막 2개는 약간 기교적이다.

  • 첫 번째 인자는 위젯의 타입이다.
  • 두 번째 인자는 위젯 속성의 해시다.
  • 세 번째 인자는 DOM 노드이며 네 번째 인자에 따라 다른 방법으로 적용된다.
    • 네 번째 인자가 없다면 DOM 노드는 (그 자신의 domNode에 의해 시작된) 새 위젯으로 교체된다.
    • 네 번째 인자가 있다면 dojo.dom.insertAtPosition(node, ref, position) 메서드에 의해 위치가 결정되고 위젯은 세 번째 인자에 상대적으로 삽입된다(참조 노드가 대체되거나 삭제되지 않는다).
  • position 인자는 다음과 같다.
    • before: 위젯은 참조 노드 이전에 추가된다(그래서 이전 형제가 된다).
    • after: 위젯은 참조 노드 다음에 추가된다(그래서 다음 형제가 된다).
    • first: 위젯은 참조 노드의 첫째 자식이 된다.

물론 수동으로 삽입할 수 있다. 세 번째와 네 번째 인자를 기술하지 않고 Listing 26과 같이 원하는 위치에 위젯 domNode를 삽입할 수 있다.


Listing 26. 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.        
  7.    dojo.addOnLoad(function(){   
  8.       var newWidget = dojo.widget.createWidget(   
  9.          "HelloWorld", // widgetType   
  10.          {} // widget attributes, for example {title: "Some Title"}   
  11.          );   
  12.       dojo.byId("widgetPlaceholder").appendChild(newWidget.domNode);   
  13.    });   
  14. </script>  
  15. </head>  
  16. <body>  
  17.    <div id="widgetPlaceholder"></div>  
  18. </body>  
  19. </html>  

dojo.widget.createWidget()이 부모/자식 관계를 형성하지 않는다는 점에 주의하라. 그래서 위젯의 계층 관계가 필요하다면 수동으로 관계를 만들어야 한다. 이 주제에 대해서는 앞으로 내포 위젯과 복합 위젯을 다룰 때 더 자세히 살펴보겠다.


이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
61 Spring에서 DWR Annotation 사용하기 file 황제낙엽 2009.10.28 151
60 DWR 2.0 and Spring 2.x - The DWR namespace handler 황제낙엽 2009.05.16 124
59 jQuery Event 객체 정보 황제낙엽 2009.05.02 19
58 jQuery로 Ajax 개발을 단순화 하기 황제낙엽 2009.04.16 67
57 Building Your Own Widget Library with YUI 황제낙엽 2009.04.16 321
56 Dojo 샘플 file 황제낙엽 2009.03.23 22
55 Dojo로 HTML 위젯 개발하기 - 참고자료 황제낙엽 2009.03.18 16
54 Dojo로 HTML 위젯 개발하기 - 정리 황제낙엽 2009.03.18 15
53 Dojo로 HTML 위젯 개발하기 - 개발과 디버깅: 기타 황제낙엽 2009.03.18 49
52 Dojo로 HTML 위젯 개발하기 - Dojo 이벤트 다루기 황제낙엽 2009.03.18 80
51 Dojo로 HTML 위젯 개발하기 - 복합 위젯 황제낙엽 2009.03.18 25
50 Dojo로 HTML 위젯 개발하기 - 내포 위젯 황제낙엽 2009.03.18 21
49 Dojo로 HTML 위젯 개발하기 - 내포 HTML 황제낙엽 2009.03.18 40
» Dojo로 HTML 위젯 개발하기 - 위젯에 프로그래밍에 따라 접근하기 황제낙엽 2009.03.18 43
47 Dojo로 HTML 위젯 개발하기 - 위젯 개발의 기초 황제낙엽 2009.03.18 18
46 Dojo로 HTML 위젯 개발하기 - 'Hello World' 위젯 황제낙엽 2009.03.18 62
45 Dojo로 HTML 위젯 개발하기 - Dojo HTML 위젯 황제낙엽 2009.03.18 363
44 Dojo로 HTML 위젯 개발하기 - 시작하기 황제낙엽 2009.03.18 20
43 Dojo로 HTML 위젯 개발하기 - Dojo 툴킷은 무엇인가? 황제낙엽 2009.03.18 82
42 Dojo로 HTML 위젯 개발하기 - 시작에 앞서 황제낙엽 2009.03.18 22
쓰기 태그