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

황제낙엽 2009.03.18 21:27 조회 수 : 40 추천: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. });  

이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
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
23 Dojo로 HTML 위젯 개발하기 - Dojo 이벤트 다루기 황제낙엽 2009.03.18 80
22 Dojo로 HTML 위젯 개발하기 - 복합 위젯 황제낙엽 2009.03.18 25
21 Dojo로 HTML 위젯 개발하기 - 내포 위젯 황제낙엽 2009.03.18 21
» 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
쓰기 태그