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

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

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. });  

이 게시물을
목록
쓰기 태그