Dojo Dojo로 HTML 위젯 개발하기 - Dojo HTML 위젯

황제낙엽 2009.03.18 21:15 조회 수 : 363 추천:102

sitelink1  
sitelink2  
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  
http://www.ibm.com/developerworks/kr/library/tutorial/wa-dojowidgets/section4.html

Dojo HTML 위젯

이 절에서는 Dojo HTML 위젯이 무엇인지, 구성하는 파일이 무엇인지를 설명하고 위젯의 디렉토리 구조를 살펴본 후 위젯을 사용하는 첫 번째 예제를 보여주겠다.

Dojo 위젯은 무엇인가?

Dojo 위젯은 JSP의 커스텀 태그나 Tapestry의 <span jwcid="...">와 비슷하지만 웹 브라우저 단에서 처리된다. Dojo 위젯은 편리하게 재사용하기 위해 시각적인 웹 컴포넌트를 캡슐화한다.

Dojo 위젯 구조는 DOM 객체 구조에 독립적이다. 각 Dojo 위젯은 DOM 고유의 widgetId를 가지고 있으며 0개 이상의 DOM 요소(element)뿐만 아니라 자식 Dojo 위젯을 가진다.

위젯 부분

위젯은 여러 파일로 구성되어 있다. 자바스크립트 코드 파일은 필수적이고 다른 파일들은 선택적이다.

  • 자바스크립트 코드 파일(*.js)은 자바스크립트로 된 위젯 로직을 담는다. 이 파일은 자바스크립트 DOM 객체 API를 사용하여 시각적인 로직을 담당한다(Dojo는 공통적인 기능을 단순화시켜줄 여러 가지 유용한 라이브러리를 제공한다).
  • HTML 템플릿(*.html)은 HTML로 된 기본 위젯 표시를 제공한다. 템플릿이 매우 단순하면 문자열로 코드 파일 속에 포함할 수 있다.
  • CSS 스타일 파일(*.css)은 시각적인 스타일을 포함한다. 이 내용은 HTML 템플릿이나 자바스크립트 코드에서 사용된다.
  • 이미지 파일(*.gif, *.jpg 등)은 위젯이 사용할 이미지를 담는다.

그림 1. 위젯 디렉토리 구조
위젯 디렉터리 구조

HTML 코드의 Dojo 위젯

이제부터 HTML에서 Dojo 위젯을 어떻게 정의하는지 알아보자. 예를 들어 "Button"이라고 불리는 표준 Dojo 위젯을 사용할 것이다. 이전에 만든 test.htm 파일에 아래 코드를 복사한 후 브라우저로 읽어들인다. 코드는 "Submit"이라고 적힌 Dojo 버튼 위젯을 보여주는 HTML 코드를 동적으로 생성한다.


Listing 1. test.hml: Dojo 버튼 위젯
                    
·미리보기 | 소스복사·
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="dojoAjax/dojo.js"></script>    
  4. <script type="text/javascript">    
  5.     dojo.require("dojo.widget.Button");   
  6. </script>  
  7. </head>  
  8. <body>  
  9.     <div dojoType="Button">Submit</div>  
  10. </body>  
  11. </html>  

Listing 1에서 위젯 종류는 HTML <div> 요소의 dojoType 속성(attribute)으로 정의한다. Listing 2에서 보는 것처럼 유니크 태그로 Dojo 위젯을 정의할 수도 있다.


Listing 2. test.html: 유니크 태그로 정의한 버튼 위젯
                    
·미리보기 | 소스복사·
  1. <html>  
  2. <head>  
  3. <script type="text/javascript" src="dojoAjax/dojo.js"></script>    
  4. <script type="text/javascript">    
  5.     dojo.require("dojo.widget.Button");   
  6. </script>  
  7. </head>  
  8. <body>  
  9.     <dojo:button>Submit</dojo:button>  
  10. </body>  
  11. </html>  

첫 번째 방법(<div dojoType="Button">...)은 일반적인 방법으로 대부분의 브라우저에서 오랫동안 작동해왔다. 또 Dojo에 특화된 태그를 인식하지 못하는 HTML 편집기에서도 사용할 수 있다.

이 튜토리얼에선 첫 번째 방법을 사용할 것이다.


이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
34 스크랩 황제낙엽 2009.03.11 27
33 웹 개발 패러다임의 전환 - Flex와 Ajax의 동거 황제낙엽 2006.12.21 125
32 Ajax 강의 정리 황제낙엽 2006.04.04 73
31 자바 기술을 이용한 AJAX의 활용 황제낙엽 2006.02.08 15
30 대표적인 AJAX Framework 소개 file 황제낙엽 2007.02.14 100
29 Ajax Framework 인기 순위: Ajaxian.com 황제낙엽 2007.02.13 23
28 prototype.js 를 위한 개발자 노트 (Ajax Framework) file 황제낙엽 2007.02.15 15
27 Dojo 샘플 file 황제낙엽 2009.03.23 22
26 Dojo로 HTML 위젯 개발하기 - 참고자료 황제낙엽 2009.03.18 16
25 Dojo로 HTML 위젯 개발하기 - 정리 황제낙엽 2009.03.18 15
24 Dojo로 HTML 위젯 개발하기 - 개발과 디버깅: 기타 황제낙엽 2009.03.18 49
23 Dojo로 HTML 위젯 개발하기 - Dojo 이벤트 다루기 황제낙엽 2009.03.18 80
22 Dojo로 HTML 위젯 개발하기 - 복합 위젯 황제낙엽 2009.03.18 25
21 Dojo로 HTML 위젯 개발하기 - 내포 위젯 황제낙엽 2009.03.18 21
20 Dojo로 HTML 위젯 개발하기 - 내포 HTML 황제낙엽 2009.03.18 40
19 Dojo로 HTML 위젯 개발하기 - 위젯에 프로그래밍에 따라 접근하기 황제낙엽 2009.03.18 43
18 Dojo로 HTML 위젯 개발하기 - 위젯 개발의 기초 황제낙엽 2009.03.18 18
17 Dojo로 HTML 위젯 개발하기 - 'Hello World' 위젯 황제낙엽 2009.03.18 62
» Dojo로 HTML 위젯 개발하기 - Dojo HTML 위젯 황제낙엽 2009.03.18 363
15 Dojo로 HTML 위젯 개발하기 - 시작하기 황제낙엽 2009.03.18 20
쓰기 태그