Dojo Framework 기본

Dojo framework 기본

1) Demo 를 보면, 대단해 보인다. 특히 Geo Charting, Shipping Routes Map, Day/Night Map

http://demos.dojotoolkit.org/demos/

2) Hello Dojo!

http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/

 ㄱ. 다른 javascript file 과 마찬가지로 dojo.js 파일을 화면에서 호출하면 된다.

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>

      - 프로젝트 내에 있는 dojo.js 파일을 호출하지 않고, CDNs(Content Distribution/Dilievery Network - public internet) 에서  직접 호출할 수 있다.

     - data-dojo-config="async:true" 는 Asyschronous Module Definition(AMD) 즉, 모듈(개별 javascript 파일)을 적용하겠다는 뜻이다. 모듈별로 적용시, deploy 에서 성능이 향상된다.

    - 이때 모듈은 기존에 정의된 모듈과 사용자가 정의한 모듈이 있다. 사용자가 모듈을 정의하기 위해서는 define을 써야 하며, 모듈을 호출하기 위해서는 require를 써야 한다.

 ㄴ. 모듈 사용 기본

    - AMD loaders 는 비동기적으로 동작한다.

    - require 에 정의된 모듈 순서대로, function의 파라미터로 전달된다. (따라서 function 의 파라미터명은 어떤 것이 와도 상관없다. 그러나 일관성을 위해서 모듈명을 사용한다. )

    <script>         require([             'dojo/dom',             'dojo/dom-construct'         ], function (dom, domConstruct) {             var greetingNode = dom.byId('greeting');             domConstruct.place('<i> Dojo!</i>', greetingNode);         });     </script>

    - define 은 별도의 js 파일을 만들고, 아래와 같이 작성해서 사용한다.

define([         'dojo/dom'          ], function(dom) {        var oldText = {};        return {        setText : function(id, text) {        var node = dom.byId(id);        oldText[id] = node.innerHTML;        node.innerHTML = text;        },<span class="Apple-tab-span" style="font-size: 9pt; line-height: 1.5; white-space: pre; background-color: transparent;"> </span><span style="font-size: 9pt; line-height: 1.5; background-color: transparent;">        </span><span class="Apple-tab-span" style="font-size: 9pt; line-height: 1.5; white-space: pre; background-color: transparent;"> </span>        restoreText : function(id) {        var node = dom.byId(id);        node.innerHTML = oldText[id];        delete oldText[id];        }        } } )

 ㄷ. 사용자가 정의한 module 사용하기

   <h1 id="greeting">Hello</h1>    <script>       var dojoConfig = {      async : true,      packages : [{      name : "demo",      location : "/findmyhouse/resource/js/demo"      }]       }    </script>    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" ></script>    <script>       require([                'demo/myModule',                ], function(myModule) {              myModule.setText('greeting', 'Hello Dojo!');                            setTimeout(function() {              myModule.restoreText('greeting');              }, 3000);       });    </script>  </body> <span style="font-size: 9pt; line-height: 1.5; background-color: transparent;"><br /></span>

 ㄹ. plugin 지정

     - require 에서 사용하고자 하는 plugin명과 '!'를 함께 적어준다.

        ex) 브라우저의 DOM 이 모두 이용가능할 때 함수를 수행하고 싶다고 하자. 브라우저의 DOM 이 모두 이용가능한지를 체크하는 plugin 이 있으며, 그 이름은 dojo/domReady 이다. 이것을 아래와 같이 사용한다.

<script> require([ 'dojo/dom', 'dojo/domReady!' //plugin : ensure that the browser's DOM is available ], function(dom) { var greeting = dom.byId('greeting'); greeting.innerHTML += 'from Dojo!'; }) </script>

 ㅁ. animation 적용

     - require(['dom/fx']) 을 통해 아래와 같이 적용한다.

<h1 id="greeting">Hello</h1> <script> require([ 'dojo/dom', 'dojo/fx', 'dojo/domReady!' //plugin : ensure that the browser's DOM is available ], function(dom,fx) { var greeting = dom.byId('greeting'); greeting.innerHTML += 'from Dojo!'; fx.slideTo({ node : greeting, top : 100, left : 200 }).play(); }) </script>

ㅂ. 프로젝트의 Dojo 이용하기

   (1) Download Dojo (https://dojotoolkit.org/download/)

   (2) project 내 포함

   (3) jsp 에 아래와 같이 설정 (spring 일 경우, <script src="/webcontext명/resource/경로/dojo.js />

   (4) 아래와 같이 설정

<script> var dojoConfig = { async : true, baseUrl : '.', packages : [ 'dojo', 'digit', 'dojox', 'demo' //custom module ] } </script>