Dojo Toolkit Basics

Dojo Toolkit은 무엇이며 왜 써야하는가?

Dojo Toolkit은 무엇인가?
- 자바스크립트안에 씌어진 오픈소스 DHTML 툴킷이다.
  > 자바스크립트 라이브러리들의 한 셋이다.
- DHTML과 함께 다년간의 오래된 문제들을 해결하는것이 목표이다.
  > 브라우저 비호환성
- 사용자가 웹페이지들안에 동적인 능력을 쉽게 만들수 있도록 해준다.
  > 위젯들
  > 애니메이션들
- 서버 기술에 무관하다. 즉 어떤 서버기술이 사용되든 상관 없다. (Server technology agnostic)
Dojo Toolkit을 왜 써야하는가?
- 사용자의 웹어플리케이션들을 좀더 사용하기 쉽고, 즉각적으로 반응하고, 편리하게 만들기 위해 Dojo를 사용할 수 있다.
  > AJAX를 지원한다.
- Dojo는 유연함과 관련된 많은 것들을 제공한다.
  > XMLHttpRequest 프로세싱을 숨긴다.
  > 브라우저의 비호환성을 조정한다.
- 강력한 개발자 커뮤니티
Dojo Toolkit의 미래
- 강력한 AJAX기반의 I/O 추상화(리모팅)
- Graceful degradation(우아한 성능 저하)
  
  Graceful degradation
  
  One of the things that keeps a lot of people away from the more modern, dynamic web pages is the question of whether or not users with old machines or accessibility problems will be able to visit your site. With all the books around nowadays citing these issues as a major drawback of new technology, many web developers forgo progressive design because these books have scared them.
  
  This is why dojo's widgets have been designed to work on top of an existing block of code. Most of the widgets add functionality to existing HTML and, in this way, aren't meant to replace the HTML of your page, but extend it.
  
  This means that even when javascript is disabled in the browser (or you are using a browser that doesn't support javascript), the page will still show up and be usable. So if you were using Dojo's Date Picker widget, on a browser without javascript, it would show up as a select box or maybe a input text area. However, with a modern browser you would have a robust graphical calendar.
  
  출처: http://dojotoolkit.org/node/57
  브라우저가 자바스크립트를 지원하지 못하더라도 최소한의 화면은 나오게끔 한다는 원칙
- 뒤로가기, 앞으로가기, 북마킹 지원
- 관점 기반의(Aspect-oriented) 이벤트 시스템
- 위젯을 기반으로 UI를 만든다.
- 위젯 프로토타이핑
- 애니메이션
- 많은 유용한 라이브러리들

Dojo Toolket 패키지 시스템

Dojo Toolkit 패키지 시스템
- Dojo 라이브러리들은 자바라이브러리들과 유사한 패키지들로 구성되어졌다.
- 사용자는 필요로 하는 패키지들을 단지 import 한다.
  > dojo.require("dojo.event.*");
  > dojo.require("dojo.dnd.*");
- require()는 없앨수 있고, 자바스크립트 코드를 동적으로 회수하고 페이지안에서 그들을 로드한다.
- 사용자는 사용자 자신들의 패키지들을 쓸수 있다.
Dojo Toolkit 라이브러리들
- dojo.io: 서버와 AJAX 기반으로 통신
- dojo.event: DOM과 프로그램의 이벤트들을 위한 통일된 이벤트 시스템
- dojo.lang: 자바스크립트를 사용을 좀더 쉽게 만들어주기 위한 유용한 루틴들
- dojo.string: String 처리 루틴들
- dojo.dom: DOM 처리 루틴들
- dojo.style: CSS Style 처리 루틴들
- dojo.html: HTML 명확한 조작들
- dojo.reflect: Reflection API
- dojo.date: Date 처리
- dojo.logging.Logger: Logging 라이브러리
- dojo.profile: JS Profiler
- dojo.regexp: Regular Expression generators
- dojo.dad: Drag and Drop
- dojo.collections: Collection data structures
- dojo.crypto: Cryptographic API
- dojo.reflection: Reflection routines
- dojo.math: Mathematic routines
- dojo.storage: Storage routines
- dojo.uri: URL handling routines
- dojo.widget: Widget framework

dojo.io.bind를 통한 리모팅

dojo.io.bind()

dojo.io.* 네임스페이스는 네트웍 I/O를 위한 일반적인 API들을 포함한다.
> dojo.io.bind()는 낮은 레벨의 XMLHttpRequest 작업을 숨긴다.
> 브라우저안에서 dojo.io.bind()는 "Ajax" 요청들을 만드는 하나의 방법이다.
또다른 처리
> back-button을 차단한다.
> transparent form submission
> 진보한 에러 핸들링

dojo.io.bind() 구문

 
//URL로부터 원본의 text를 리턴받기 위해 요청을 만든다.
dojo.io.bind(
{
    //요청을 위해 만들어진 URL
    url : "http://foo.bar.com/something",

    //성공적인 응답후에 실행되는 콜백 함수
    load : function(type,data,evt) { /*데이타 처리를 하기위한 부분*/}

    //리턴되어지는 데이타의 타입
    mimetype: "text/plain"

    //그밖의 옵션들
    
}
);

Example #1: Simple Request

//URL로부터 원본의 text를 리턴받기 위해 요청을 만든다.
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    load: function(type, data, evt){ },
    mimetype: "text/plain"
});

Example #2: Simple Request

// 인수를 첫번째로 생성한다.
var bindArgs = {
    url: "http://foo.bar.com/sampleData.txt",
    load: function(type, data, evt){ },
    mimetype: "text/plain"
};
// 요청을 처리한다.
dojo.io.bind(bindArgs);

Example #2: Error Handling

//URL로부터 원본의 text를 리턴받기 위해 요청을 만든다.
//에러 핸들링도 함께
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    load: function(type, data, evt){ },
    error: function(type, error){ /*에러 처리를 하기위한 부분*/},
    mimetype: "text/plain"
});

Example #3: Same as Example #2

// 타입을 사용하여 에러 상태를 처리한다.
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    handle: function(type, data, evt){

    if(type == "load"){
        // 데이타 객체로 어떤일을 한다.
    }else if(type == "error"){
        // 여기서, "data"는 에러객체이다.
        // 에러는 여기에 응답한다.
    }else{
        //이벤트의 다른 타입들
    }
},
mimetype: "text/plain"
});

mimetype - 응답 포맷 명세
- text/plain
  > string format 응답
- text/javascript
  > JavaScript format 응답
- text/xml
  > XML format 응답
- text/json
  > JSON format 응답

Example #4: 동적 컨텐츠 로딩(자바스크립트 string 얻기)

 
// 자바스크립트 리터럴 스트링을 요청한다. 그다음 그것을 평가한다.
// That's also baked into bind, 단지 mimetype 인수에서 다른 기대된 요청 타입을 제공한다.
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.js",
    load: function(type, evaldObj){ },
    mimetype: "text/javascript"
});

Example #5: XMLHTTP 수송의 명백한 명세

 
// 만약 XMLHTTP 수송, 명백한 XMLHTTP 수송을 사용하는것을 사용자가 확실히 원한다면
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.js",
    load: function(type, evaldObj){ },
    mimetype: "text/plain", // plain text 구한다. eval() 금지
    transport: "XMLHTTPTransport"
});

Example #6: 요청을 통한 forms의 Submission

 
// 팔방미인인 bind()는 또한 요청을 통한 forms의 submission을 지원한다.
// 하나의 경고로, XMLHTTP를 넘어 파일업로드를 하지 않고
dojo.io.bind({
    url: "http://foo.bar.com/processForm.cgi",
    load: function(type, evaldObj){ },
    formNode: document.getElementById("formToSubmit")
});

Backward/Forward 버튼, 북마크

Example #6: 뒤로가기 버튼

 
var sampleFormNode = document.getElementById("formToSubmit");

dojo.io.bind({
    url: "http://foo.bar.com/sampleData.js",
    load: function(type, evaldObj){
    //성공적으로 서브밋된 뒤로가기를 들었을때 폼에서 숨긴다.
    sampleFormNode.style.display = "none";
},
backButton: function(){
    //그다음 사용자가 "back"을 쳤을때, 폼에서 다시 보여준다.
    sampleFormNode.style.display = "";
},
formNode: sampleFormNode
});

Example #7: Forward Button

var sampleFormNode = document.getElementById("formToSubmit");

dojo.io.bind({
    url: "http://foo.bar.com/sampleData.js",
    load: function(type, evaldObj){
    //성공적으로 서브밋된 뒤로가기를 들었을때 폼에서 숨긴다.
    sampleFormNode.style.display = "none";
},
backButton: function(){
    //그다음 사용자가 "back"을 쳤을때, 폼에서 다시 보여준다.
    sampleFormNode.style.display = "";
},
forwardButton: function(){
    //그리고 만약 다른 요청을 만들기 전에 "forward"를 쳤을때, 이것은 일어난다.
    sampleFormNode.style.display = "none"; //다시 서브밋 하지 않는다.
},
formNode: sampleFormNode
});

Example #8: Bookmarking
- changeULR 플래그에 true 값을 주어 단순하게 통과한다.
- 사용자의 최상위 페이지에서 마지막에 추가된 새로운 타임스탬프 해시값을 가질 수 있다.
```
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    load: function(type, data, evt){ },
    changeURL: true,
    mimetype: "text/plain"
});
```
Example #9: Bookmarking
- 번갈아, changURL에 ture 값 대신에 string을 주어 사용자의 고유한 해시값을 포함하는것이 가능하다.
- http://foo.bar.com/howdy.php#foo,bar,baz
```
dojo.io.bind({
    url: "http://foo.bar.com/sampleData.txt",
    load: function(type, data, evt){ },
    changeURL: "foo,bar,baz",
    mimetype: "text/plain"
});
```

Dojo DOM 처리

Dojo DOM 처리(조종) 루틴들
- dojo.byId("someid")
  > document.getElementById("someid"); 와 같다.
- dojo.dom.isNode(node)
- dojo.dom.getTagName(node)
- dojo.dom.firstElement(node)
- dojo.dom.lastElement(node)
- dojo.dom.nextElement(node)
- dojo.dom.prevElement(node)
- dojo.dom.moveChildren (srcNode, destNode, trim)
- dojo.dom.copyChildren (srcNode, destNode, trim)
- dojo.dom.removeChildren(node)
- dojo.dom.replaceChildren(node, newChild)
- dojo.dom.removeNode(node)
- dojo.dom.getAncestors(node, filterFunction,returnFirstHit)
- dojo.dom.getAncestorsByTag(node, tag)
- dojo.dom.innerXML(node)
- dojo.dom.createDocumentFromText(str, mimetype):
- dojo.dom.insertAfter(node, reference, force):
- dojo.dom.insertAtPosition(node, reference, position)
- dojo.dom.textContent(node)
  > 노드들의 자식을 text만 직렬화하여 구한다.
- dojo.dom.textContent(node, text)
  > 노드들의 자식을 text만 직렬화하여 set한다.

Dojo Event System

Transports
- dojo.io.bind 와 관련된 함수들은 transports를 콜하는 여러 메소드들을 사용하여 서버와 통신할 수 있다.
  > XMLHttp
  > IFrame I/O
  > ScriptSrcIO
- 각각은 확실한 제한을 가지고 있다. 그래서 사용자는 사용자의 상태에 따라 정확하게 작업할 transport을 고를 수 있다.
- 기본 transport는 XMLHttp이다.
- XMLHttp Transport
  > 그것은 다양한 케이스에서 만족스럽게 일한다. 하지만, 파일들을 운반할수 없다. 도메인을 가로질러 작업할 수 없다. (ie는 현재의 페이지와 다른 사이트에 연결할 수 없다.)
  그리고 file:// 프로토콜을 작업할 수 없다.
```
dojo.require("dojo.io.*");

function mySubmit() {
    dojo.io.bind ({
        url: 'server.cfm',
        handler: callBack,
        formNode: dojo.byId('myForm')
    });
}
function callBack(type, data, evt) {
    dojo.byId('result').innerHTML = data;
}
```
- IFrame I/O Transport
  > IFrame I/O Transport는 서버로 파일들을 업로드 할 수 있어 유용하다.
```
dojo.require("dojo.io.*");
dojo.require("dojo.io.IframeIO");

function mySubmit() {
    dojo.io.bind ({
        url: 'server.cfm',
        transport: "IframeTransport",
        handler: callBack,
        formNode: dojo.byId('myForm')
    });
}
function callBack(type, data, evt) {
    dojo.byId('result').innerHTML = data;
}
```
- ScriptSrcIO Transport
  > 보안의 제약때문에 XMLHttp는 다른 도메인으로부터 데이타를 로드할수 없다.
  > ScriptSrcIO Transport는 이것을 하기에 유용하다.
  > Yahoo's RPC(Remote Procedure Call) 서비스는 ScriptSrcIO를 사용하여 실행된다.
```
dojo.require("dojo.io.*");
dojo.require("dojo.io.ScriptSrcIO");

dojo.io.bind({
    url: "http://example.com/json.php",
    transport: "ScriptSrcTransport",
    jsonParamName: "callback",
    mimetype: "text/json",
    content: { ... }
});
```
Overview
- 자바스크립트 이벤트 핸들링
  - 이벤트들은 다음같은 이유로 자바스크립트 컴포넌트들 안에서 주요하다.
    > 사용자 인터페이스를 조정한다.
    > AJAX 요청의 결과이다.
    > 각각 다른 상호작용을 자바스크립트트 컴포넌트들을 허락한다.
- 자바스크립트 이벤트 핸들링의 이슈
  - 크로스 브라우저 이벤트 핸들링은 모아둔 것으로부터 쓰기가 어렵다.
    > 이벤트 핸들링하는 자바스크립트 안에서 다양한 방법이 있다. 그리고 각각의 브라우저는 그들만의 변덕(버릇)과 이슈들이 있다.
  - 증가된 페이지안의 자바스크립트 컴포넌트들의 숫자처럼 컴포넌트 코드들은 좀더 타이트하게 커플이 되어, 적게 유지하려는 경향이 있다.
  - 여러 이벤트 핸들러를 등록하는 것은 어렵다.
    > 새로운 것을 추가하면 그 전 것은 없어진다.
- 왜 Dojo 이벤트 시스템인가?
  - 자바스크립트 이벤트 시스템을 추상화한다.
    > 즉 dojo.event.connect()라는 API를 일관되고 간단한 API를 통해서 어떤 액션에도 반응하게 할 수 있다.
  - 어떤 함수에 대한 호출도 핸들러가 있는 이벤트로 만들 수 있다.
    > 간단한 DOM 이벤트 이상을 핸들링할 수 있다. 즉, DOM 이벤트는 주로 "event"라는 단어와 연관되는데, Dojo는 이벤트에 대한 확장된 시각을 가지고 있다. dojo.event.*라는 패키지 안에 있는 도구를 사용해서 개발자는 어떠한 함수 호출도 이벤트 핸들러로 다뤄질 수 있도록 기반을 만들어 주고 있다.
  - 고급 이벤트 핸들링 스키마들을 제공한다.
    > 관점지향 - 사용자 이벤트 핸들러는 이전 또는 이후를 호출할수 있다.
  - 덜 추잡하다.
    > DOM 노드의 경우는 이벤트 핸들러를 등록할려면 마크업 상에 쓸데없이 on*이라는 속성을 명시적으로 적어 줘야 하는데 이는 추잡해 보인다. (역자주: 마치, 심하게 노출하거나 화장을 한 사람을 길거리에서 보면서 눈살을 찌푸리는 것과 같이.. 이런 뉘앙스가 obtrusive란 단어에 있다.)
- dojo.event.connect(srcObj, "srcFunc", "targetFunc")
  - 이벤트 핸들링을 위한 일관된 API를 제공한다.
  - 브라우저의 차이점들을 추상화 한다.
  - 몇몇 브라우저에서 나타나는 메모리 렉을 막아준다.
  - 하나의 이벤트 타입의 하나의 이벤트 핸들러(다수의 이벤트 핸들러들)보다 좀더 추가해서 상세히 처리한다.

Handling DOM events

Example #1 - DOM 이벤트는 명명된 이벤트 핸들러를 사용한다.

<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
window.onload = function () {
    var link = document.getElementById("mylink");
    //"myHandler"이벤트 핸들러는 "mylink"노드의 "onclick" 속성을 위해 등록한다.
    dojo.event.connect(link, "onclick", myHandler);
}

//"myHandler"처럼 명명되어 이벤트 핸들러를 선언한다.
function myHandler(evt) {
    alert("myHandler: invoked - this is my named event handler");
}
</script>
<a href="#" id="mylink">Click Me</a>

Example #2 - 이름없는(익명의) 이벤트 핸들러 사용하기

<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
window.onload = function () {
    var link = document.getElementById("mylink");
    //익명의 함수에서 link 엘리먼트 'onclick' 속성을 연결한다. 
    dojo.event.connect(link, "onclick", function(evt) {
        var srcElement;
        if (evt.target) {
            srcElement = evt.target;
        } else if (evt.srcElement) {
            srcElement = evt.srcElement;
        }
        if (srcElement) {
            alert("dojo.event.connect event: " + srcElement.getAttribute("id"));
        }
    });
}"
</script>
<a href="#" id="mylink" onclick="alert('inline event');">Click Me</a>

Example #3 - 이벤트 핸들러처럼 객체의 메소드 추가하기

//사용자가 이벤트핸들러를 등록하기 위한 노드를 확인한다.
var handlerNode = document.getElementById("handler");
//connect()는  handlerNode.onclick()이 호출되었을때 안전하게 호출한다. object.handler()는 같은 인수들과 함께 호출될것이다.
dojo.event.connect(handlerNode, "onclick", object, "handler");

Example #3 - 멀티 핸들러 등록

var handlerNode = document.getElementById("handler");
//명백한 핸들러들의 멀티 리스너들을 연결한다. 그들은 등록된 순서대로 호출된다.
//이것은 하나의 onclick 이벤트로부터 두가지 분리된 actions으로 시작될것이다.
dojo.event.connect(handlerNode, "onclick", object, "handler");
dojo.event.connect(handlerNode, "onclick", object, "handler2");

Chaining function calls

다른 함수를 위해 객체의 함수 붙이기
- 사용자가 함수가 호출할때, 다른 함수를 호출하는걸 필요로 할때 사용한다.
  > 이벤트의 소스는 DOM 이벤트를 호출하지 않는 함수이다.
- 같은 dojo.event.connect()를 사용한다.
  > dojo.event.connect(srcObj, "srcFunc", targetObj, "targetFunc");

Example #5a: 다른 함수를 위해 객체의 함수 붙이기

//메소드들의 커플과 간단한 객체 선언하기
var exampleObj = {
    counter: 0,
    foo: function(){
    this.counter++;
    alert("foo: counter = " + this.counter);
},
bar: function(){
    this.counter++;
    alert("bar: counter = " + this.counter);
}
};
//나는 exampleObj.foo를 호출할때는 언제나 exampleObj.foo가 호출되기를 원한다. 
//어떻게 할수있나?

Example #5b: 다른 함수를 위해 객체의 함수 붙이기

//우리는 우리가 DOM이벤트들과 함께 하는 같은 방법으로 이것을 set 할수 있다.
//현재 foo()호출될때, bar()도 호출할 수 있다.
//그때문에 카운터가 두번 증가한다. 그리고 "foo"와 "bar"의 alert이 발생한다.
dojo.event.connect(exampleObj, "foo", exampleObj, "bar");

Aspect-Oriented ("before advice" and"after advice")
- Before Advice
  - dojo.event.connect()는 소스 함수가 호출되기 전에 리스너를 호출해서 사용할수 있다.
    > Aspect Oriented Programming terminology(AOP) 에서 이것은 "before advice"라고 부른다.
  - Example: "bar"는 exampleObj.foo가 호출되었을때,"foo" 전에 호출된다.
    > dojo.event.connect("before", exampleObj, "foo", exampleObj,"bar");
  - "after advice"는 default이다.
- Example #6: Attaching a function of an object to another function - "before"
```
var exampleObj = {
    counter: 0,
    foo: function(){
    this.counter++;
    alert("foo: counter = " + this.counter);
},
bar: function(){
    this.counter++;
    alert("bar: counter = " + this.counter);
}
};
// "bar"함수는 "foo"전에 호출된다.
dojo.event.connect("before", exampleObj, "foo", exampleObj, "bar");
```
- Event Handler Wrapper
  - 어떤 경우, 사용자는 자바스크립트 컴포넌트의 소스코드를 수정하지 않고, 이벤트 핸들러의 행동이나, 인수들의 수정을 원할수 있다.
    > 이벤트 핸들러 리스너들이 충분하지 않을때, "before" 또는 "after"를 추가해라.
  - Dojo안에서 이것은 첫번째 인수처럼 "around"와 함께 dojo.io.connect을 통상적으로 사용한다.
    > dojo.io.connect("around", ...);
  - 그것은 서블릿 필터 스키마처럼 행동한다.
    > 요청들을 가로채고, 행동을 수정한다
    // custom event handler wrapper function customLoadHandler(invocation) { alert("custom menu name =" + invocation.args[0].name); // 인수의 name 속성을 수정한다. invocation.args[0].name = "Custom Menu"; //디폴트 이벤트 핸들러를 호출한다. invocation.proceed(); } function ImageScroller() { this.load = function (args) { alert("default menu name=" + args.name); } } var is = new ImageScroller(); dojo.event.connect("around", is, "load", this, "customLoadHandler"); is.load({name: "My Menu", items: ['File', 'Save']}); // alerts "custom menu name=My Menu" // alerts "default menu name=Custom Menu"
- Publish/Subscribe Event Handling
  - 사용자가 컴포넌트들 사이에서 익명의 이벤트 통신을 필요로 할때 사용한다.
  - 좀더 유연한 컴포넌트를 만들기 위해 초기화 파라메터안에서 통과되는 topic 이름을 주기 위해 컴포넌트의 커스터마이징을 허락한다.
- Disconnecting event handlers
  - 이벤트들을 위해 dojo.event.disconnect()을 사용해라.
    > dojo.event.connect()에서 통과한 것과 동일한 인수들을 정확하게 통과해라.
  - topics를 위한 dojo.event.topic.unsubscribe()
    > dojo.event.topic.subscribe()# Resources 에서 통과한 것과 동일한 인수들을 정확하게 통과해라.
Resources
- Dojo 이벤트 시스템의 리소스들
  - "Events for JavaScript Components" article written by Greg Murray
    > https://bpcatalog.dev.java.net/source/browse/*checkout*/bpcatalog/ee5/docs/ajax/handling-js-events.html
  - "Dojo Event System" home page
    > http://dojotoolkit.org/docs/dojo_event_system.html
  - "Dojo Event Examples" Wiki
    > http://dojo.jot.com/EventExamples

Dojo Widgets 사용

Widget이 무엇이냐?
- button, text box, scroll bar, calendar, tree 등등 과 같은 UI 엘리먼트이다.
  > 위젯들은 DOM API와 함께 처리하면 좀더 쉽다.
- 혼합된 엘리먼트를 만들 수 있다.
- 사용자 스타일을 가질수 있다.
- 이벤트 핸들러들을 등록할수 있다.
  > 이벤트 핸들러들을 백엔드 서비스로 호출할 수 있다.
- 브라우저 비호환성을 조절할 수 있다.
Dojo 위젯 시스템의 미래
- 프로토타입의 능력, 테스트, 컴포넌트 UI의 기능향상과 상호작용
- HTML안에 사용자 UI 빠르게 프로토타입을 사용할수 있는 템플릿들을 제공한다. 그리고 사용자가 포함한 페이지들 위에 마크업처럼 사용자 위젯을 드러낸다.
- 프로토타이핑을 하면서 했던 작업이 배치를 하는 시점에 버려지지 않는다.
  > 즉 위젯은 재사용이 용이하다. Dojo 툴킷 또한 디스플레이 페이지에 몇개의 마크업 엘리먼트만 포함하면 바로 사용 가능한 몇개의 유용한 위젯을 포함하고 있다.
Mechanism
- Dojo 공간 HTML 템플릿들과 파일안의 CSS 일부분들은 위젯이 구조화되었을때 참고한다.
- 이벤트 핸들러의 setup과 DOM 노드들과 관련된 생성은 사용자의 HTML 마크업 위의 약간의 extra 속성을 통해 조절한다.
사용자 페이지에 위젯 추가하는 세가지 방법
- 사용자는 세가지 메소드 중에 하나를 사용할 수 있다.
  > <dojo:NameofWidget ../>
  > <div dojoType="NameOfWidget" ..../>
  > <div class="dojo-NameOfWidget" .../>
Dojo 툴킷 안에 내장된 위젯들(2006년 6월)
- 사용자는 사용자의 html 또는 jsp 페이지안에 추가하여 내장된 위젯을 사용할 수 있다.
- List, Editor, Fisheye, Form, Mail, Tree, contentPane, datePicker, dialog, layoutContainer, rounded, spilitContainer, tabContainer, tooltip, etc.
- 더욱 많은것이 커뮤니티 멤버들에 의해 만들어지고 있다.
Editor Widget

Editor Widget 사용법

<script>
dojo.require("dojo.widget.Editor");
</script>
<body>
    <div dojoType="Editor" items="formatblock;|;
      insertunorderedlist;insertorderedlist;|
      ;bold;italic;underline;strikethrough;|;createLink;">
    ...

FisheyeList & FisheyeListItem Widgets

FisheyeList & FisheyeListItem Widgets 사용법

<script>
dojo.require("dojo.widget.FisheyeList");
dojo.hostenv.writeIncludes();
</script>
<body>
<div class="dojo-FisheyeList"
dojo:itemWidth="50" dojo:itemHeight="50"
dojo:itemMaxWidth="200" dojo:itemMaxHeight="200"
dojo:orientation="horizontal"
dojo:effectUnits="2"
dojo:itemPadding="10"
dojo:attachEdge="top"
dojo:labelEdge="bottom"
dojo:enableCrappySvgSupport="false"
>
<div class="dojo-FisheyeListItem" onClick="load_app(1);"
dojo:iconsrc="images/icon_browser.png" caption="Web Browser">
</div>
<div class="dojo-FisheyeListItem" onClick="load_app(2);"
dojo:iconsrc="images/icon_calendar.png" caption="Calendar">
</div>
<div class="dojo-FisheyeListItem" onClick="load_app(3);"
dojo:iconsrc="images/icon_email.png" caption="Email">
</div>
<div class="dojo-FisheyeListItem" onClick="load_app(4);"
dojo:iconsrc="images/icon_texteditor.png" caption="Text Editor">
</div>
...

Form Widget
datePicker Widget
Mail Widget
Tree Widget
Demo Scenarios
- Accessing demo pages that contain various built-in Widgets from the web
  (or locally deployed demo pages if there is no internet)
  > http://archive.dojotoolkit.org/nightly/demos/widget
- See source (by clicking source button)