Dojo Dojo로 HTML 위젯 개발하기 - 'Hello World' 위젯

황제낙엽 2009.03.18 21:16 조회 수 : 311 추천:122

http://www.ibm.com/developerworks/kr/library/tutorial/wa-dojowidgets/section5.html

'Hello World' 위젯

전통적인 "Hello World" 위젯은 previous section에서 다룬 파일 구조나 디렉토리 구조보다 더 친숙할 것이다.

Hello World.js

Listing 3 은 HelloWorld 위젯에 필요한 자바스크립트 파일의 내용이다. 이 코드를 튜토리얼의 설정 부분에서 생성했던 적당한 파일에 저장한다.


Listing 3 . dojoAjax/src/widget/HelloWorld.js
·미리보기 | 소스복사·
  1. dojo.provide("dojo.widget.HelloWorld");   
  2. dojo.require("dojo.widget.HtmlWidget");   
  3.   
  4. dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {    
  5.    templatePath: dojo.uri.dojoUri("src/widget/templates/HtmlHelloWorld.html")   
  6. });   

dojo.widget.HtmlWidget이 HelloWorld 위젯의 상위 클래스란 것에 주의하라.

Listing 4는 Listing 3의 예제 코드를 위해 만든 HTML 템플릿이다. 앞에서 만들었던 적당한 파일에 이 코드를 저장한다.


Listing 4. dojoAjax/src/widget/template/HtmlHelloWorld.html

·미리보기 | 소스복사·
  1. <div>  
  2.    Hello World   
  3. </div>  

아래의 HTML을 test.html 파일에 저장한 후 브라우저로 읽어들이면 "Hello World."라는 글귀를 볼 수 있다.


Listing 5. test.html: Hello World 테스트
·미리보기 | 소스복사·
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="dojoAjax/dojo.js"></script>  
  4. <script type="text/javascript">  
  5.    dojo.require("dojo.widget.HelloWorld");   
  6. </script>  
  7. </head>  
  8. <body>  
  9.    <!-- as an HTML element with dojoType attribute -->  
  10.    <div dojoType="HelloWorld"></div>  
  11. </body>  
  12. </html>  

HTML 템플릿을 문자열로 제공하기

HTML 템플릿이 단순하다면 Listing 6처럼 자바스크립트 파일에 문자열로 저장하는 게 낫다.


Listing 6. dojoAjax/src/widget/HelloWorld.js
·미리보기 | 소스복사·
  1. dojo.provide("dojo.widget.HelloWorld");   
  2. dojo.require("dojo.widget.HtmlWidget");   
  3.   
  4. dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, {   
  5.    templateString: "<div>Hello World</div>"  
  6. });   

이 게시물을
목록
쓰기 태그