http://www.ibm.com/developerworks/kr/library/tutorial/wa-dojowidgets/section9.html내포 위젯
이 절에서는 사용자 특화된 내포 위젯을 다루는 기법을 소개한다.
정적 내포 위젯
위젯 속에 위젯을 사용하는 경우가 있다. Dojo TabContainer와 Tree 위젯은 좋은 예다.
Listing 30 은 내포 Button 위젯을 HelloWorld 위젯 안에 사용하는 경우다.
Listing 30. test.html: 정적 내포 위젯 예제 ·미리보기 | 소스복사· - <html>
- <head>
- <script type="text/javascript"
- src="dojoAjax/dojo.js"></script>
- <script type="text/javascript">
- dojo.require("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.Button");
- </script>
- </head>
- <body>
- <div dojoType="HelloWorld">
- <div dojoType="Button"></div>
- </div>
- </body>
- </html>
|
이 가장 간단한 예제에서 isContainer 위젯 매개변수는 참으로 정의하고 HTML 템플릿 안에 containerNode 결합점을 정의해야 한다. 그거면 끝이다. 내포 위젯은 자동으로 그려지고 containerNode에 추가된다.
Listing 31. dojoAjax/src/widget/HelloWorld.js ·미리보기 | 소스복사· - dojo.provide("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.HtmlWidget");
-
- dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {
- isContainer: true,
- templateString: '<div><div dojoAttachPoint="containerNode">'
- + '</div></div>'
- });
|
위 해법은 기본 Dojo 동작만 쓰기 때문에 단순하다. 원한다면 더 복잡하게 사용할 수 있지만 postCreate() 메서드에서 자식 배열(모든 정적 내포 위젯을 담을 표준 위젯 필드)를 처리해야 한다.
Listing 32에서 내포된 사용자 정의 위젯을 containerNode에 추가할 수 있을 뿐만 아니라 내포 위젯 타입 목록을 titleNode 결합점에 추가할 수도 있다.
Listing 32. dojoAjax/src/widget/HelloWorld.js ·미리보기 | 소스복사· - dojo.provide("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.HtmlWidget");
-
- dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {
- isContainer: true,
- templateString: '<div><div dojoAttachPoint="titleNode"></div>'
- + '<br/><div dojoAttachPoint="containerNode">'
- + '</div></div>',
-
- postCreate: function() {
- for(var i in this.children) {
- this._addRow(this.children[i]);
- }
- },
-
- _addRow: function(component) {
- this.titleNode.appendChild(
- document.createTextNode(component.widgetType));
- this.titleNode.appendChild(
- document.createElement("br"));
- }
- });
|
Listing 33은 Listing 32에 정의한 위젯이 동작하는 test.html이다.
Listing 33. test.html: 복수개의 정적 내포 위젯 ·미리보기 | 소스복사· - <html>
- <head>
- <script type="text/javascript" src="dojoAjax/dojo.js"></script>
- <script type="text/javascript">
- dojo.require("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.Button");
- dojo.require("dojo.widget.ContentPane");
- </script>
- </head>
- <body>
- <div dojoType="HelloWorld">
- <div dojoType="Button"></div>
- <div dojoType="ContentPane"></div>
- </div>
- </body>
- </html>
|
내포 위젯을 다루는 더 유용한 예를 찾으려면 Dojo 툴킷의 TabContainer와 Tree 위젯을 보라.
내포 위젯을 동적으로 추가하기
사용자가 런타임에 Dojo 위젯을 위젯에 프로그래밍적으로 추가하고 싶다고 가정해 보자.
위젯 속성과 그들의 동적 변경자에 대해 이야기한 걸 기억하는가? 두 가지 사이의 일관성이 구조적으로 강제 사항이 아닌 것이 현재 Dojo 위젯 구조의 흠일지도 모른다. 물론 이 방법은 더 유연하게 하며 그다지 심각하지 않다. 하지만 그 속성에 대해 동적 변경자가 있는 것을 모른다면 성가신 일이 될 수도 있다. 개발자들이 그것을 추가하는 것을 잊기도 하기 때문에 위젯의 사용성을 상당히 떨어뜨린다.
내포 위젯에도 동일한 문제가 있다. 정적인 방법 대신에 다른 동적인 방법으로 추가해야 한다. 동적으로 추가하기 위해 addChild() 메서드를 사용할 필요가 있다. Listing 34는 정적, 동적으로 위젯을 추가한다. 재사용을 위해 _addRow() 메서드로 분리된 부분에 주의하라. addChild() 메서드를 재정의할 때 상위 클래스도 호출해야 한다.
Listing 34. dojoAjax/src/widget/HelloWorld.js ·미리보기 | 소스복사· - dojo.provide("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.HtmlWidget");
- dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {
- isContainer: true,
- templateString: '<div><div dojoAttachPoint="titleNode"></div>'
- + '<br/><div dojoAttachPoint="containerNode">'
- + '</div></div>',
-
- postCreate: function() {
-
- for(var i in this.children) {
- this._addRow(this.children[i]);
- }
- },
- addChild: function(child, overrideContainerNode,
- pos, ref, insertIndex) {
- this._addRow(child);
- dojo.widget.HelloWorld.superclass.addChild.call(
- this, child, overrideContainerNode);
- },
- _addRow: function(component) {
- this.titleNode.appendChild(
- document.createTextNode(component.widgetType));
- this.titleNode.appendChild(
- document.createElement("br"));
- }
- });
|
Listing 35는 Button 위젯을 생성하고 동적으로 Listing 34의 위젯을 추가하는 것이다.
Listing 35. test.html: 내포 위젯을 동적으로 추가하기 ·미리보기 | 소스복사· - <html>
- <head>
- <script type="text/javascript" src="dojoAjax/dojo.js"></script>
- <script type="text/javascript">
- dojo.require("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.Button");
-
- dojo.addOnLoad(function(){
- var button = dojo.widget.createWidget("Button",
- {caption: "Submit"});
- dojo.widget.byId('someID').addChild(button);
- });
-
- </script>
- </head>
- <body>
- <div id="someID" dojoType="HelloWorld">
- </div>
- </body>
- </html>
|
