동적,정적 Dijit 위젯(widjet)구현하기

Dojo Toolkit 이 제공하는 위젯들을 굉장히 쓸만한다.
대표적으로 사용되는 위젯들은 dijit.form 위젯들인데, Textbox, Date, Time 등 폼에 관련된 많은 것들이 깔끔하고 편하다. 예전에 동적으로 Tree 를 생성하는 글을 작성한 바있는데, 이번엔 정적/동적 및 동적으로 만들어진 widjet 을 prototype 으로 다루는 방법에 대해서 설명해보겠다. 물론... 이 글을 쓸만한 가치가 없을 정도로 쉽다.

1. 동적으로 위젯 생성하기
스크립트 로드는 당연한 일이므로 작성하지 않는다.
동적이든, 정적이든 해당 위젯을 임포트해야한다.
여기선 버튼을 예로 들어보겠다.

{{{
// import dojo class
dojo.require("dijit.form.Button");

// create object
var button = new dijit.form.Button('clickMeButton', {

label:'눌러주세요',
onClick:function() {

alert('Thank you, touch me.^^');

}

});

}}}

// append document
$('buttons').appendChild(button.domNode); // 이게 중요하다.
// button 자체는 dojo 에서 몇개의 element 감싸버리기 때문에 모든 dijit widjet 을 특정 엘리먼트에 포함시키려 한다면 domNode 속성을 이용하여야한다.

<div id="buttons">
</div>

2. 정적으로 추가하기
정적으로 추가하는 것은 더욱 쉽다.

// import
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // 정적 파싱은 이 부분이 필요하다.

<div id="buttons">

<button id="clickMeButton" dojoType="dijit.form.Button" onClick="alert(Thank you, touch me);">날 클릭해줘요</button>

</div>

3. 왠만하면 정적으로 추가하는게 보기도 편하고 좋다.
그러나 ajax 를 이용한다든지 하여서 동적으로 페이지를 인클루드하면 도조 파싱이 이미 끝난지라 소용이 없다.
따라서 로딩을 다 한후에는 다시 파싱을 할 필요가 있다.

다음 예제는 prototype.js 의 Ajax 기능을 이용하여 buttons 레이어에 동적으로 페이지를 로드한 후, dojo 파싱을 하는 예제다.
new Ajax.Updater($('buttons'), "/button.tpl", {
                onComplete:function(request) {
                    dojo.parser.parse(dojo.byId('buttons'));
                }
            });

야호! 이제 도조랑 프로토타입으로 못할 짓이 없다!