Frontend/Javascript

[dojo] Dijit과 친해지기 2탄

버리야 2008. 11. 20. 10:54
반응형
/**
* 이 글은 거의 영문 자료를 보고 제가 이해한 내용이기에~ 간혹.. 말이 안되는 때는 지적을 해주세용~
**/

7. Widget Lifecycle

모든 위젯은 dijit._Widget을 상속하고, 대부분 _Templated mixin한다.
그리고 extension points(methods)를 오버라이드할 수 있다.

* _Widget

1) Lifecycle methods

출처 : Mastering Dojo

preamble() :  constructor전에 arguments를 조작하기 위한 기회를 제공. 거의 사용되지 않는다.

constructor() :  custom behavior를 perform하기 위해 override할 수 있는 첫번째 메소드

하는일 두가지
1. primitive type이 아닌 dijit properties를 초기화한다.
2. life cycle method에 의해 뒤에 수행될 추가적인 properties를 추가한다.

postMixInProperties() : properties가 초기화된 후, buildRendering전에 호출된다.  기본값을 여기서 오버라이드 할 수 있다.
widget이 렌더링되기 전에 instance의 properties를 추가하거나 변경할 필요가 있다면~ 여기서 작업을..

buildRendering() :  _Widget.domNode properties를 실제 DOM element에 set을 한다.
_Templated는 buildRendering 구현을 제공. 이 template을 fetched/read 한다.
buildRendering동안에 node를 생성하고 event를 hooked up한다.
buildRendering이 호출된 후에 dijit은 dojo의 dijit manager object를 추가하여 page가 unload될 때 묵시적인 destructor method동안에 destroy를 할 수 있다.

postCreate() : 위젯이 렌더링된후에 호출. child 위젯은 아직 준비가 안된 상태.
만약 dijit이 어떤 child dijit을 포함하고 그 children에 접근하는 것은 안전한지 않다. 그 child dijit에 안전하게 접근하려면 startup()을 이용해라.
다른 non-child widget에 안전하게 접근하고 dojo.addOnLoad를 사용하여 page가 로드될때까지 기다린다.

startup() : child widget을 선언. 이 method는 widget을 자동적으로 fire를 하고 모든 child widget이 생성된다.
---------------------------------------
여기까지가 widget 의 탄생(?)과 관련된 부분.

다음부터는 소멸~의 시기..

destroyRecursive() : 주의! 이 메소드를 오버라이드 하지말것.
uninitialize 메소드를 제공하고 기타등등의 일을 하므로.
connect를 끊고 기타 등등 자원해제하는 일을 함.

uninitialize() : destoryRecursive를 통해 호출된다.
custom으로 override할 기회를 주는 메소드. 예를 들면 server에 session을 저장하고 callback을 초기화해야한다거나, DOM 레퍼런스를 해제해줘야할때 사용.

2) 위젯을 선언과 생성하면서 흔히 하는 실수

1) postMixInProperties후에 template을 조작하기 위해 호출. => postMinInProperties에서 해줘야하겠지..

2) postMixInProperties후 widget의 초기 appearance를 수정하기위해 호출 =>postMinInProperties에서 해줘야하겠지..

3) startup 대신에 postMixInProperties에서 child widget에 접근 시도

4) uninitialize에서 어떤 필요한 destruction을 perform하기 위한 것을 잊어버림

5) uninitialize대신에 destroyRecursiv를 호출

3) 필수 프로퍼티

id : id는 직접 부여할 수도 있고 system에 의해 assign될 수 있다. 직접 부여하지 않으면 안쓰겠다는 의미로 알고 system-generated된 id를 자동적으로 붙여준다.

lang : 극히 사용이 드물고 기본적으로 dojo의 locale을 widget에 렌더링하기위해 override한다.

domNode : 모든 위젯은 domNode라고 불리우는 root node property를 가지고 있다.

attributeMap : id=, dir=, lang=, class=, style=, title= 이 attribute들을 모든 widget instance에 복사한다.
1.2 버젼부터 attributeMap에서 바뀐점.
- attributeMap can now handle innerHTML and class names too
- You should think of attributeMap as a binding from widget attribute to DOM nodes.
참고 URL : 참고 : http://blog.dojotoolkit.org/2008/08/19/widget-attr

8. _Templated

1) 세가지 중요한 컨셉

- Substitution => ${XXX}
Dijit은 ${xxx} style dojo.string syntax를 template으로 대체 하기 위해 dojo.string 모듈을 사용한다..

- Attach points
attribute 값을 통해 node를 직접 reference할 수 있게 해준다.

- Event points
template에서의 node와 widget method 사이의 관계를 생성하기 위해 사용.
DOM event로 응답이 올때 호출된다.

2) Lifecycle methods

buildRendering() : _Template에서 mixing의 가장 두드러진 효과는 widget의 buildRendering 메소드를 overriding한 결과.

buildRendering은 화면에 보여주기 위한 dijit의 template file과 같이 fetching과 관련된 귀찮은 작업을 handle 하기 위해 override함.

3) 필수 프로퍼티
templateNode : a node that represents the widget template. Pre-empts both templateString and templatePath.

templateString : widget template을 표현하는 string
templatePath는 inline templateString이 convert된 것. 동기 네트워크 콜을 방지한다.
예)  templateString: "<button><span>hello &lt; world</span></button>"

templatePath : template(HTML file) Path. this widget relative to dojo.baseUrl
templatePath: dojo.moduleUrl('buri','template.html')

widgetsInTemplate : 기본값은 false
Dojo 0.4에서 추가된 widgetsInTemplate 속성은 HTML 템플릿 내에 복합 위젯을 생성하려면 widgetsInTemplate: true로 setting한다.

widgetsInTemplate은 기본값 false로 있기 때문에 생략가능.
templatePath랑 templateString이랑 둘다 정의되어 있으면 templateString이 우선순위가 높다.

9. Dijit 종류

1) Form Dijits
Form, Button, ComboBox,FilteringSelect, NumberSpinner, Slider, Textarea, SimpleTextarea, MultiSelect, TextBox
- SimpleTextarea, MultiSelect는 1.1버젼에서 추가됨.

2) Layout Dijits
ContentPane, TabContainer, StackContainer, AccordionContainer, BorderContainer
- BorderContainer는 1.1버젼에서 새로 추가되고 기존에 있던 SplitContainer와 LayoutContainer deprecated 되었다.

3) Application Dijits
Menu, Toolbar, Dialog, TooltipDialog, ProgressBar, TitlePane, Tooltip, InlineEditBox, ColorPalette, Editor, Tree
- Menu의 CheckableMenuItem이 1.2버젼에서 새로 추가되었다.

10. 기타 등등

Tree
1.1에서 DnD으로 많은 이슈가 있었다. Tree안의 item을 드래깅하면 동작하지 않았는데 이 이슈를 fix 되었다.
dojo.data와 Tree간의 interface layer를 추가했다.

1.2에서 추가된 _Widget.placeAt 메소드
_Widget.placeAt()는 domNode를 조작하기 위한 function, widget의 domNode(나 addChild()를)를 쉽게 chain하고 place하는것을 허용

Layout widgets
가장 흔히 쓰이는 left/right/top/bottom/center panes의 web page의 simple API를 제공.
1.2에서 IE가 아닌 브라우저에서의 resizing이 더 부드럽게 된다(특히 firefox)

dojo.byId와 dijit.byId
domNode가 필요하면 dojo.byId를, widget이 필요하면 dijit.byId
dijit.byId("id" == dijit.byNode(dojo.byId("id"))
dojo.byId("id" == dijit.byId("id").domNode

dojo.place()
dojo.place(domNode, refDomNode, position) : domNode를 refDomNode를 기준으로 위치/순서를 변경한다.

11. 참고


Dojo The Definitive Guide
Mastering Dojo

lifecycle에 대해 관한 글
http://ajaxian.com/archives/dissecting-dijit-dojo-widgets
http://www.sitepen.com/blog/2007/11/13/dissecting-dijit/
http://docs.google.com/Present?docid=dfxgjqrf_78fr7h6sd7

Dojo에 대한 내용을 검색하면 거의~ 유일하게 나오는 한국어가 있는 블로그
http://iolothebard.tistory.com/tag/Dojo

Develop HTML Widgets with Dojo
http://www.ibm.com/developerworks/edu/wa-dw-wa-dojowidgets.html

Creating an AJAX Rating Widget
http://www.progressive-coding.com/tutorial.php?id=6

Dojo Custom Widget Tutorial
http://www.coachwei.com/blog/_archives/2007/3/28/2841519.html

Creating a New Dojo Widget
http://www.alexatnet.com/articles/view/item/id/49/name/creating-new-dojo-widget



반응형