Dojo Dojo로 HTML 위젯 개발하기 - 내포 HTML

황제낙엽 2009.03.18 21:27 조회 수 : 137 추천:136

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

내포 HTML

이 절에서는 Dojo HTML 위젯 생성을 포함하여 좀더 복잡한 문제를 몇 가지 고려할 것이다. 먼저 위젯 요소 속의 HTML을 다루는 여러 기술을 알아보겠다.

정적 내포 HTML

위젯 요소 내에 정적으로 정의한 HTML을 다뤄야 한다면 Listing 27을 참고하라.


Listing 27. test.html: 정적 내포 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">Some user-specific    
  10.    <b>HTML</b></div>  
  11. </body>  
  12. </html>  

Dojo는 위젯을 생성할 때 그것을 정의하기 위해 사용한 DOM 요소를 삭제한다. 그래서 내포된 HTML DOM 요소가 삭제되기 전에 필요한 요소를 모두 옮길 필요가 있다. 이렇게 하기 위해 Dojo 위젯의 메서드 fillInTemplate()을 재정의해야 한다. 이 메서드는 원래 HTML DOM 요소와 이미 생성된 Dojo 위젯을 모두 다룰 수 있게 해준다. 그 방법은 Listing 28에서 살펴보겠다(원래 상위 클래스의 fillInTemplate() 메서드를 호출해야 함을 명심하라).


Listing 28. dojoAjax/src/widget/HelloWorld.js: 정적 내포 HTML 전송하기
                    
·미리보기 | 소스복사·
  1. dojo.provide("dojo.widget.HelloWorld");   
  2. dojo.require("dojo.widget.HtmlWidget");    
  3.   
  4. dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {   
  5.    templateString: '<div dojoAttachPoint="domNode"></div>',   
  6.   
  7.    // override   
  8.    fillInTemplate: function(args, frag) {   
  9.       // Getting original HTML element   
  10.       var source = this.getFragNodeRef(frag);   
  11.   
  12.       // Moving all children of original element to    
  13.       // the desired node of the new component   
  14.       while(source.hasChildNodes()) {    
  15.          var node = dojo.dom.removeNode(source.firstChild);    
  16.          this.domNode.appendChild(node);    
  17.       }   
  18.   
  19.       // Invoking original dojo fillInTemplate() method   
  20.       dojo.widget.HelloWorld.superclass.fillInTemplate.call(this, args, frag);   
  21.    }   
  22. });  

S그래서 위 코드는 모든 HTML DOM 노드를 원하는 곳에 내포 HTML로 옮긴다. 이 경우에 domNode 결합점의 자식이 된다. HTML 템플릿은 문자열로 제공된다.

정적 내포 HTML을 다루는 또 다른 방법은 위젯 속성 isContainer를 true로 설정하는 것이다. 이것은 Listing 28의 방법처럼 HTML 내용을 옮겨야 한다.




위로


내포 HTML 동적으로 추가하기

동적으로 내포 HTML을 추가하는 방법은 두 가지가 있다. 이 방법은 동적 HTML이 어떻게 제공되느냐에 따라 다르다.

  • 문자열로 제공되는 경우에는 원하는 DOM 노드의 innerHTML 속성을 이용해 새 HTML을 설정할 수 있다.
  • DOM 노드로 제공되는 경우에는 원하는 DOM 노드의 appendChild() DOM 메서드를 이용하여 추가할 수 있다.

두 가지 모두 적당한 예는 다음과 같다.


Listing 29. dojoAjax/src/widget/HelloWorld.js: 내포 HTML 동적으로 추가하기
                    
·미리보기 | 소스복사·
  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: '<div dojoAttachPoint="domNode"></div>',   
  6.   
  7.    // dynamic setters   
  8.    setHtml: function(html) {    
  9.       if (dojo.lang.isString(html)) {   
  10.          this.domNode.innerHTML = html;    
  11.       } else if (dojo.dom.isNode(html)) {   
  12.          // Cleaning whatever was there before   
  13.          dojo.dom.removeChildren(this.domNode);   
  14.          // Adding new element   
  15.          this.domNode.appendChild(html);    
  16.       } else {   
  17.          dojo.lang.assert(false, "setHtml called with incorrect type: "    
  18.             + (typeof html));   
  19.       }   
  20.    }   
  21. });  

이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
61 Spring에서 DWR Annotation 사용하기 file 황제낙엽 2009.10.28 248
60 DWR 2.0 and Spring 2.x - The DWR namespace handler 황제낙엽 2009.05.16 226
59 jQuery Event 객체 정보 황제낙엽 2009.05.02 129
58 jQuery로 Ajax 개발을 단순화 하기 황제낙엽 2009.04.16 151
57 Building Your Own Widget Library with YUI 황제낙엽 2009.04.16 467
56 Dojo 샘플 file 황제낙엽 2009.03.23 123
55 Dojo로 HTML 위젯 개발하기 - 참고자료 황제낙엽 2009.03.18 114
54 Dojo로 HTML 위젯 개발하기 - 정리 황제낙엽 2009.03.18 109
53 Dojo로 HTML 위젯 개발하기 - 개발과 디버깅: 기타 황제낙엽 2009.03.18 153
52 Dojo로 HTML 위젯 개발하기 - Dojo 이벤트 다루기 황제낙엽 2009.03.18 166
51 Dojo로 HTML 위젯 개발하기 - 복합 위젯 황제낙엽 2009.03.18 115
50 Dojo로 HTML 위젯 개발하기 - 내포 위젯 황제낙엽 2009.03.18 121
» Dojo로 HTML 위젯 개발하기 - 내포 HTML 황제낙엽 2009.03.18 137
48 Dojo로 HTML 위젯 개발하기 - 위젯에 프로그래밍에 따라 접근하기 황제낙엽 2009.03.18 133
47 Dojo로 HTML 위젯 개발하기 - 위젯 개발의 기초 황제낙엽 2009.03.18 123
46 Dojo로 HTML 위젯 개발하기 - 'Hello World' 위젯 황제낙엽 2009.03.18 154
45 Dojo로 HTML 위젯 개발하기 - Dojo HTML 위젯 황제낙엽 2009.03.18 474
44 Dojo로 HTML 위젯 개발하기 - 시작하기 황제낙엽 2009.03.18 142
43 Dojo로 HTML 위젯 개발하기 - Dojo 툴킷은 무엇인가? 황제낙엽 2009.03.18 171
42 Dojo로 HTML 위젯 개발하기 - 시작에 앞서 황제낙엽 2009.03.18 117
쓰기 태그