[dojo] Dijit과 친해지기 1탄

/**
* 이 글은 거의 영문 자료를 보고 제가 이해한 내용이기에~ 간혹.. 말이 안되는 때는 지적을 해주세용~
**/

1. Dijit이란?

Dojo widget system.
Javascript Function Object.
Create widgets programmatically, or use declarative markup.
HTML markup, css, javascript, static resource인 image와 같은 resource의 collection이다.
widget은 dojo.declare로 생성된다.

2. 선언적인 방법으로 위젯(declarative widget) 생성하기

widget은 HTML markup으로 생성되고 dojoType= attribute로 선언한다.

이 방법으로 생성을 하려면 dojo.parser가 require되어야 하고 parseOnLoad가 true로 set되어야 한다.

Dojo parser가 전체 HTML 소스를 스캐닝하면서 dojoType= 으로 선언된 tag를 찾아내서 해당 type으로 widget object를 생성한다.

<script type="text/javascript">
       dojo.require("dijit.form.Button");
</script>
<form>
<button id="searchBtn" dojoType="dijit.form.Button"
      onClick='console.log("click! search button")'>SEARCH</button>
</form>

3. 프로그래밍 방법으로 위젯(programmatic widget) 생성하기

1) new operator를 사용하여 생성
new 연산자를 사용하여 호출하면 파라미터는 widget의 attributes로 assigne된다.

dojo.parser가 필요하지 않고 parseOnLoad를 djConfig에 set하지 않아도 된다.

<script type="text/javascript">
dojo.addOnLoad(function(){
    var widget = new dijit.form.Button({
        label: "hello!",
        name: "programmatic"
    });
    widget.placeAt("buttonContainer");
});
</script>
<form>
<p id="buttonContainer" style="display: none;"></p>
</form>

2) dojo.place()나 Dijit container method중에 선호하는 DOM function으로 DOM tree에 widget을 insert하는 방법

4. declarative widget을 만들까? programmatic widget을 만들까?

declarative widget과 programmatic widget은 위젯을 생성하는 방법의 차이만 있을 뿐 한번 widget이 setup되면 차이점은 없다.

declarative widget은 어떤 모양이나올지 알 수 있고 쉽게 만들 수 있다.

programmatic widget은 많은 수의 widget을 만들거나 동적인 위젯을 만들때 효과적이고 declarative widget에 비해 좀 더 유연하다.

5. Extension Points

위젯은 객체이기 때문에 override가 가능하다.
소스 코드를 바꾸는 것이 아닌 안전하게 behavior를 바꾸는 것이 좋겠지!.

method와 extension points는 단지 둘다 widget class method 이다. 의미상 다를 뿐~
extension points는 프로그래머에 의해 overrice된 메소드를 의미.

6. 위젯 참조를 위한 5가지 방법

1) jsId
2) dijit.byId(id)
3) dijit.byNode(nodeVariable)
4) dijit.getEnclosingWidget(nodeVariable)
5) You can read an attribute or call a method on another object that returns a widget.