Dojo [펌] 8. DOJO Basic

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) 위젯사용의 이점

              - 프로그래밍 표현식을 강화하여 읽기가 쉽고 , 구성이 단조로워저 에러를 줄일 수 있다.

              - 이미 정의된 기능들을 사용하여 개발 시간을 단축할 수 있다.

              - 위젯을 사용하는데는 특별한 노력없이도 객체에 정의된 위젯의 기능과 의미가 일치하는

                함수와 필드를 통해 쉽게 개발할 수 있다.