Dojo Dojo로 HTML 위젯 개발하기 - 복합 위젯

황제낙엽 2009.03.18 21:31 조회 수 : 25 추천:127

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

복합 위젯

위젯이 항상 또 다른 위젯을 포함하길 원할 수도 있다. 이 절에서는 이를 처리하는 두 가지 방법, 즉 프로그래밍적인 방법과 HTML 템플릿을 사용하는 방법을 다룬다.

용어에 대한 메모

내포 위젯과 복합 위젯에 대해 완벽하게 정의된 단어는 아직 없다. 이 튜토리얼을 위해 내가 사용하고 있는 의미는 다음과 같다.

내포
위젯이 외부의 다른 위젯을 자식으로 갖는 것이다. 내포된 HTML 요소나 addChild() 메서드를 사용한다. 이를테면 TabContainer 위젯은 ContentPane을 내포 위젯으로 담을 수 있다.
복합
내부적으로 자식 위젯으로 생성되는 위젯을 말한다. 대개 부모 위젯의 postCreate() 메서드를 사용한다.

복합 위젯을 프로그래밍적으로 정의하기

먼저 복합 위젯을 만들어 프로그래밍 접근을 하겠다 (이 접근 방법에 대해 더 알고 싶다면 참고 자료를 보라)

HelloWorld 위젯의 HTML 템플릿에서 새 위젯이 나타나기 원하는 결합점을 정의한다. 다음으로 위젯의 postCreate() 메서드에서 프로그래밍적으로 새 위젯을 만들고 노드에 추가한다.

복합 위젯은 (내포 위젯을 사용할 때와 같은) addChild() 메서드를 사용하여 주 위젯의 자식 목록을 추가해야 한다. 이렇게 함으로서 주 위젯과 함께 적절히 소멸하여 메모리가 새는 것을 막을 수 있다.

Listing 36은 프로그래밍적으로 Butoon 위젯을 만들고 그것을 주 위젯에 추가하는 것이다.


Listing 36. dojoAjax/src/widget/HelloWorld.js
                    
·미리보기 | 소스복사·
  1. dojo.provide("dojo.widget.HelloWorld");   
  2. dojo.require("dojo.widget.HtmlWidget");    
  3. dojo.require("dojo.widget.Button"); // we require nested widget definition>   
  4.   
  5. dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {   
  6.    isContainer: true,   
  7.    templateString: '<div>Hello World <br/> '    
  8.       + '<div dojoAttachPoint="compositeWidgetNode"></div></div>',   
  9.   
  10.    // override   
  11.    postCreate: function(args, frag) {    
  12.       this.btnSubmit = dojo.widget.createWidget("Button", { caption: "Submit" });   
  13.       this.addChild(this.btnSubmit, this.compositeWidgetNode);     
  14.    }   
  15. });  

코드를 세부적으로 살펴보자.

  • 먼저 dojo.require("dojo.widget.Button");을 호출해 요구된 위젯 정의의 참조를 포함한다.
  • 다음으로 isContainer 속성을 true로 설정한다. 이 속성은 HtmlWidget 상위 클래스에서 온 것이다. 이 속성은 자식 위젯을 관리하기 위한 하부 구조로 addChild()와 removeChild() 메서드를 제공하며 부모 위젯의 크기가 바뀌었을 때 onResized() 를 호출한다.
  • HTML 템플릿(파일 또는 문자열)은 새 자식 위젯이 추가될 곳에 노드를 정의할 수 있다. 기본 명칭은 containerNode이다. 결합점을 (예제에서처럼) 다른 이름으로 하고 싶다면 addChild() 호출시 두 번째 인자를 명시해야 한다. 특히 복합 위젯에 노드가 하나만 있다면 일관성 있게 containerNode를 쓰도록 한다.
  • 다음으로 복합 위젯을 생성하기 위해 dojo.widget.createWidget()를 사용하고 this.addChild()로 추가한다.

물론 addChild() 대신에 this.nestedWidgetNode.appendChild(this.btnSubmit.domNode);. 를 사용할 수 있다. 그러나 이 경우에는 새 위젯이 부모 위젯의 자식으로 추가되지 않고 부모가 소멸할 때 수동으로 제거해야 한다. 새 위젯은 크기 변경에 대한 통보와 같은 부모 자식 관계의 이점을 잃어버린다. 대부분의 경우 제공되는 기반구조를 쓰는 것이 나으므로 해킹(hack)은 마지막 선택으로 남겨두라.

Listing 37은 Listing 36의 위젯을 테스트하는 test.html 파일이다.


Listing 37. 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>  




위로


HTML 템플릿에서 복합 위젯 정의하기

복합 위젯을 만드는 다른 방법은 HTML 템플릿에 직접 정의하는 것이다. 이 방법은 적절하며 Dojo 0.4에서는 더 직접적인 방법을 제공할 것이다. 아래의 코드 예제는 이전 코드보다 커 보인다. 하지만 복합적인 문제에서 더 간단해 보이고 더 적은 자바스크립트 루틴이 필요할 것이다.

Listing 38은 HTML 템플릿에 정의된 복합 위젯을 처리하는 위젯 코드다. 이 방법은 현재로선 약간의 Dojo 마법을 사용해야 한다. Listing 37의 test.html을 사용해 이 위젯을 테스트한다.


Listing 38. dojoAjax/src/widget/HelloWorld.js
                    
·미리보기 | 소스복사·
  1. dojo.provide("dojo.widget.HelloWorld");   
  2. dojo.require("dojo.widget.HtmlWidget");    
  3. dojo.require("dojo.widget.Button"); // we require nested widget definition   
  4. dojo.require("dojo.widget.*"); // useful libraries   
  5. dojo.require("dojo.xml.Parse");   
  6. dojo.require("dojo.dom");   
  7.   
  8. dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {   
  9.    widgetType: "HelloWorld",   
  10.    isContainer: true,   
  11.    templateString: '<div>Hello World <br/> '    
  12.       + '<div dojoType="Button" caption="Submit">'    
  13.       + '</div></div>',   
  14.   
  15.    // override   
  16.    postCreate: function(args, frag) {    
  17.       // dojo mambo-jumbo that converts all dojo tags into widgets   
  18.       var xmlParser = new dojo.xml.Parse();   
  19.       var dojoParser = dojo.widget.getParser();    
  20.       var jsObj = xmlParser.parseElement(this.domNode, null, true);    
  21.       var components = dojoParser.createComponents(jsObj, this);   
  22.   
  23.       // now, 'components' is an array with all    
  24.       // first-level composite dojo widgets   
  25.       this.btnSubmit = components[0];   
  26.    }   
  27. });   

postCreate() 메서드에서는 위젯이 HTML 템플릿에서 이미 생성됐을 때 Dojo 파서를 실행하여 Dojo 정의를 전부 위젯으로 바꿔야 한다. 그 결과 첫 번째 레벨 위젯의 배열을 얻게 된다.

배열 속 위젯들은 HTML 템플릿과 순서가 같다. 복합 위젯의 자식 위젯에 접근하기 위해 someWidget.children[0]을 사용하라.

Dojo 0.4와 복합 위젯
Dojo 0.4에서는 HTML 템플릿 내에 widgetsInTemplate 속성으로 복합 위젯을 정의하는 새 방법이 도입된다. 이 기능은 이 튜토리얼의 범위에서 벗어난다.

생성된 위젯을 얻는 다른 방법은 위젯에 유일한 ID를 발급하는 것이다. 그 후 위젯 id를 통해 얻으면 된다(dojo.widget.byId("...")). 이 방법을 사용할 때 (한 페이지에 한 위젯의 여러 인스턴스가 있다면) 그 id가 유일하도록 주의해야 한다. 그래서 이 방법이 더 큰 작업처럼 보인다. HTML 템플릿에는 이미 많은 id가 있다. 이 방법의 장점은 HTML 템플릿이 어떤 순서로 재배열되어도 문제없이 작동된다는 것이다.

두 경우 모두 복합 위젯은 createComponents() 메서드를 사용하여 루트 위젯의 자식으로 알맞게 추가된다.



이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
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
» 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
쓰기 태그