| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
Dojo HTML 위젯
이 절에서는 Dojo HTML 위젯이 무엇인지, 구성하는 파일이 무엇인지를 설명하고 위젯의 디렉토리 구조를 살펴본 후 위젯을 사용하는 첫 번째 예제를 보여주겠다.
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 위젯을 어떻게 정의하는지 알아보자. 예를 들어 "Button"이라고 불리는 표준 Dojo 위젯을 사용할 것이다. 이전에 만든 test.htm 파일에 아래 코드를 복사한 후 브라우저로 읽어들인다. 코드는 "Submit"이라고 적힌 Dojo 버튼 위젯을 보여주는 HTML 코드를 동적으로 생성한다.
Listing 1. test.hml: Dojo 버튼 위젯
|
Listing 1에서 위젯 종류는 HTML <div> 요소의 dojoType 속성(attribute)으로 정의한다. Listing 2에서 보는 것처럼 유니크 태그로 Dojo 위젯을 정의할 수도 있다.
Listing 2. test.html: 유니크 태그로 정의한 버튼 위젯
|
첫 번째 방법(<div dojoType="Button">...)은 일반적인 방법으로 대부분의 브라우저에서 오랫동안 작동해왔다. 또 Dojo에 특화된 태그를 인식하지 못하는 HTML 편집기에서도 사용할 수 있다.
이 튜토리얼에선 첫 번째 방법을 사용할 것이다.
