| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
1. Dojo는 DHTML를 개발하기위해 사용하는 JavaScript 툴로써 이벤트 시스템과 I/O API 들을 통하여 복잡한 문법들을
간소화 하고 파워풀한 JavaScript 프로그래밍을 가능하게 해준다.
2. Dojo를 페이지에 사용하려면 3가지 단계를 거쳐야 한다.
1) Dojo의 설정파일을 통하여 초기 설절을 한다.
<script type="text/javascript">
// 디버그를 할 것인지 정한다.
djConfig = { isDebug: false };
</script>
2) Dojo 라이브러리를 임포트 한다.
// 스크립트가 로드되면서 Dojo를 사용할 수 있다.
<script type="text/javascript" src="/dojo/dojo-0.4.2-ajax/dojo/dojo.js"></script>
3) 필요한 패키지를 임포트한다.
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.io.*");
dojo.require("dojo.widget.*");
</script>
1) dojo.widget.* 이라는 의미는 dojo/src/widget/ 하위의 모든 JS 파일들을 로드하라는 의미이다.
2) 개인이 정의 한 JS 들도 같은 방식으로 로드가 가능하다.
예) dojo.require("example.a"); ==> dojo/src/example/a.js 로드
3. DOJO 이벤트
1) Dojo API중 dojo.event.connect() 를 통하여 Dojo에 기반한 객체가 아니더라도 쉽게 여러가지 이벤트를
관리 할 수 있으며 이때 이벤트의 대상은 객체 , 엘리먼트 등 다양한 대상이 될 수 있다.
// 버튼에 onclick 이벤트를 처리할 핸들러를 등록한다.
function init(){
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed')
}
function helloPressed(){
alert('You pressed the button');
}
// 객체(exampleObj)를 생성한 후 객체의 함수에 이벤트와 핸들러를 등록한다.
var exampleObj = {
counter: 0,
foo: function(){
alert("foo");
this.counter++;
},
bar: function(){
alert("bar");
this.counter++;
}
};
// 객체의 함수를 등록하면 함수가 호출될대 이벤트 핸들러를 호출한다.
dojo.event.connect(exampleObj, "foo", exampleObj, "bar");
4. dojo.io.bind 를 사용한 Ajax 사용
1) dojo.io.bind() 함수의 설정을 통하여 Ajax를 쉽고 강력하게 사용할 수 있다.
// 기본적로 호출할 주소 설정 , 완료시 결과를 받을 데이터타입 설정 ,
// 실행이 완료 되었을때 실행될 콜백함수 , 에러발생시 처리함 수 등을 설정할 수있다.
dojo.io.bind({
url: "http://foo.bar.com/sampleData.txt",
load: function(type, data, evt){ /*do something w/ the data */ },
error: function(type, error){ /*do something w/ the error*/ },
//응답이 없을 경우 TimeOut를 지정할 수 있다. 기본 값은 0으로 개속 대한다.
timeoutSeconds: 2,
// 요청한 후 설정된 시간을 초과한다면 핸들러를 통해 처리할 수 있다
timeout: function(type, data, evt){ alert("I am tired of waiting.");}
mimetype: "text/plain"
//Form에 직렬화되 전송될 Data를 설정하고 폼객체를 설정하면 자동으로
//Form의 submit과 똑같은 Data를 전송할 수 있다.
formNode: dojo.byId("myForm");
});
2) 함수의 사용법은 한번에 위의 것 처럼 사용도 가능하지만 설정정보를 객체화 한후 객체를 통한
호출도 가능하다.
var kw = {
url: "http://foo.bar.com/sampleData.txt",
load: function(type, data, evt){ /*do something w/ the data */ },
error: function(type, error){ /*do something w/ the error*/ },
timeoutSeconds: 2,
timeout: function(type, data, evt){ alert("I am tired of waiting.");}
mimetype: "text/plain"
method: "GET"
};
dojo.io.bind(kw);
5. Dojo의 리소스의 사용
1) Dojo에서 필요한 함수나 위젯을 사용하기 위해서는 그것을이 포함되어 있는 파일들을 API를 보고
자바와 같이 임포트 하면되다.
// 다음과 같이 스크립트에 선언한다면 내부적으로는 src/html/extras.js 파일을 인클루드 하게된다.
dojo.require("dojo.html.extras")
6. 위젯의 사용
1) Dojo에서 위젯의 사용은 엘리먼트에 CSS 스타일을 적용하는 것과 비슷하다.
// 다음과 같이 정의된 버튼은 파란색의 버튼을 보여주는데 Dom 노드를 살펴보면
// 버튼을 중심으로 많은 이미지들이 배치된 것을 볼수있는데 CSS와 같이 정해진 엘리먼트를
// Dojo에 정의된 대로 설정해준다.
<button dojoType="Button" id="foo"> Click me </button>
//위젯으로 정의된 객체는 다음과 같이 dojo API를 통하여 호출이 가능하다.
var myButton = dojo.widget.byId("foo");
2) 위젯을 사용하는 방법은 엘리먼트으 속성 , 클래스식 사용, 네임스페이스의 사용 세가지 방법이 있다.
// 엘리먼트의 속성을 사용하여 위젯을 로드한다.
<input dojoType="ComboBox" value="default">
// CSS를 사용하여 위젯을 로드한다.
<input dojoType="ComboBox" value="default" dataUrl="comboBoxData.js">
// 네임스페이스를 사용하여 위젯을 로드한다.
<dojo:ComboBox value="default" dataUrl="comboBoxData.js">
3) 위젯사용의 이점
- 프로그래밍 표현식을 강화하여 읽기가 쉽고 , 구성이 단조로워저 에러를 줄일 수 있다.
- 이미 정의된 기능들을 사용하여 개발 시간을 단축할 수 있다.
- 위젯을 사용하는데는 특별한 노력없이도 객체에 정의된 위젯의 기능과 의미가 일치하는
함수와 필드를 통해 쉽게 개발할 수 있다.
