| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
http://www.ibm.com/developerworks/kr/library/tutorial/wa-dojowidgets/section5.html
Listing 3 . dojoAjax/src/widget/HelloWorld.js
'Hello World' 위젯
전통적인 "Hello World" 위젯은 previous section에서 다룬 파일 구조나 디렉토리 구조보다 더 친숙할 것이다.
Listing 3 은 HelloWorld 위젯에 필요한 자바스크립트 파일의 내용이다. 이 코드를 튜토리얼의 설정 부분에서 생성했던 적당한 파일에 저장한다.
Listing 3 . dojoAjax/src/widget/HelloWorld.js
·미리보기 | 소스복사·
- dojo.provide("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.HtmlWidget");
- dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {
- templatePath: dojo.uri.dojoUri("src/widget/templates/HtmlHelloWorld.html")
- });
dojo.widget.HtmlWidget이 HelloWorld 위젯의 상위 클래스란 것에 주의하라.
Listing 4는 Listing 3의 예제 코드를 위해 만든 HTML 템플릿이다. 앞에서 만들었던 적당한 파일에 이 코드를 저장한다.
Listing 4. dojoAjax/src/widget/template/HtmlHelloWorld.html
·미리보기 | 소스복사·- <div>
- Hello World
- </div>
아래의 HTML을 test.html 파일에 저장한 후 브라우저로 읽어들이면 "Hello World."라는 글귀를 볼 수 있다.
Listing 5. test.html: Hello World 테스트
·미리보기 | 소스복사·- <html>
- <head>
- <script type="text/javascript" src="dojoAjax/dojo.js"></script>
- <script type="text/javascript">
- dojo.require("dojo.widget.HelloWorld");
- </script>
- </head>
- <body>
- <!-- as an HTML element with dojoType attribute -->
- <div dojoType="HelloWorld"></div>
- </body>
- </html>
HTML 템플릿이 단순하다면 Listing 6처럼 자바스크립트 파일에 문자열로 저장하는 게 낫다.
Listing 6. dojoAjax/src/widget/HelloWorld.js
·미리보기 | 소스복사·- dojo.provide("dojo.widget.HelloWorld");
- dojo.require("dojo.widget.HtmlWidget");
-
- dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {
- templateString: "<div>Hello World</div>"
- });
