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

위젯 개발의 기초

이 절에서는 Dojo HTML 위젯을 생성하는 기본적인 것 몇 가지를 다룬다. 위젯을 변경하기 위해 속성을 사용하며 HTML 템플릿에 코드 토막을 넣고 CSS를 참고하며 다양한 곳에 위치한 이미지 파일을 사용한다.

위젯 속성 사용하기

위젯의 행동과 뷰를 속성을 사용하여 수정할 수 있다. 예를 들어 HelloWorld 위젯을 수정하여 속성에 포함된 글을 출력할 수 있다. Listing 7, Listing 8, Listing 9의 코드를 적당한 파일에 복사하고 브라우저에서 test.html를 다시 읽어들인다. 위젯은 "This is text is passed as a widget attribute."라고 출력할 것이다.

Listing 8의 자바스크립트 코드는 속성 정의를 보여준다.

속성의 기본 값을 반드시 부여해야 한다(Listing 8의 text 속성을 참고) 그렇지 않으면 그 속성들은 무시된다(Dojo는 test.html의 위젯을 정의하기 위해 사용한 DOM 노드의 속성 값들을 무시한다).

실제 값을 사용하는 코드에 값을 전송하는 코드는 Listing 9에 있다(다음 절에서 다룰 것이다.)

                    
·미리보기 | 소스복사·
<div>${this.text}</div>  

속성 처리하기

속성은 보통 (뒤에 언급할) postCreate() 메서드의 위젯 코드에서 처리된다. 또 다른 인기있는 부분은 fillInTemplate() 메서드다. 많은 Dojo 위젯에서 속성들이 postCreate()에서 처리된다는 것을 명심하라. 물론 정해진 속성의 값을 바꾸는 변경자(setter)도 있다(먼저 언급되었던 setText("...")와 같은 경우다). 이것들에는 두 가지 차이점이 있다. postCreate() 메서드를 사용하면 위젯 생성 때 속성 값을 지정하게 되고 변경자를 이용하면 동적으로 실행시간에 변경한다. 두 방법 중 하나를 일관되게 적용하는 것이 좋은 프로그래밍 습관이다.

위로

HTML 템플릿의 코드 조각

HTML 템플릿에 코드를 포함하는 것은 나쁘게 보인다. 하지만 종종 필요한 경우가 있다. dojoRoot를 이미지를 위해 사용한다거나 속성을 직접 출력하거나 국제화를 위해 사용할 수 있다.

Dojo는 코드 조각을 이용하여 HTML 템플릿에 자바스크립트 코드를 포함시킨다. ${...} 표기법을 사용하면 코드가 위젯 객체 문맥에서 평가된다. 이론적으로는 HTML 템플릿에서 this 하위의 항목을 모두 사용할 수 있다. 하지만 (아래에서 언급할) dojoRoot 상수와 공개된 위젯 속성만 사용하는 것을 추천한다.

Listing 10은 HTML 템플릿에서 코드 조각을 어떻게 사용하는지 보여준다.

                    
·미리보기 | 소스복사·
<div id="${this.widgetId}">  
   <img src="${dojoRoot}../images/yourimage.gif"/>  
   ${this.text}   
</div>  

물론 다음에 논의할 내용처럼 HTML 템플릿 안에 이밴트 핸들러를 기술하는 방법도 가능한다.

위로

CSS 추가하기

HTML 페이지에 이미 불러온 전역적인 CSS 파일이 있다면 HTML 템플릿과 자바스크립트 코드에서 CSS 클래스를 참조할 수 있다. 프로젝트 특화된 위젯에 괜찮은 방법이다.

하지만 전체적으로 위젯이 모두 갖추길 원하거나 여러 프로젝트에 재사용을 해야 한다면 Dojo가 지원하는 위젯별 CSS 파일을 사용하라. 이 파일은 관련된 위젯을 함께 자동으로 읽어들인다.

Listing 11은 자바스크립트 코드 파일의 위젯별 CSS 파일을 어떻게 정의하는지 보여준다.

                    
·미리보기 | 소스복사·
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"),     
   templateCssPath: dojo.uri.dojoUri("src/widget/templates/HtmlHelloWorld.css")   
});  

Listing 12는 HTML 템플릿의 CSS 클래스를 사용하는 법을 보여준다.

                    
·미리보기 | 소스복사·
<div class="helloWorld_caption">  
   Hello World   
</div>  

Listing 13은 Listing 12에서 참조한 클래스를 정의한 예제 CSS 파일이다.

                    
·미리보기 | 소스복사·
.helloWorld_caption {   
   font-family: Verdana;   
   font-size: 10pt;   
}  

CSS 클래스의 이름이 프로젝트에서 유일해야 한다는 것을 명심하라. 그렇기 때문에 CSS의 클래스 이름에 접두사를 붙이는 방법은 좋은 생각이다. 상속된 CSS를 프로그램적으로 생성한 DOM 요소에 적용하는 경우엔 별 문제가 없다.

위로

이미지 참조하기

Dojo에서 자바스크립트 코드로부터 이미지를 참조하는 적절한 방법은 Dojo 루트 디렉토리로부터 상대 URL을 제공하는 dojo.uri.dojoUri 메서드를 사용하는 것이다. Dojo 파일 구조 외부의 파일이라면 ".."를 이용하여 찾아야 한다. 예를 들어 img.src = dojo.uri.dojoUri("../images/yourimage.gif");와 같은 방법이 있다.

                    
·미리보기 | 소스복사·
var img = document.createElement("img");   
// the dojo way   
img.src = dojo.uri.dojoUri("src/widget/templates/images/yourimage.gif");   
// relative to the page using this component (depends on page location,    
// thus breaks encapsulation and is not recommended)   
img.src = "dojoAjax/src/widget/templates/images/yourimage.gif";  

Dojo에서 HTML 템플릿의 이미지를 참조하는 방법은 Listing 15에서 봤던 Dojo 루트 디렉토리에 상대적인 URL을 ${dojoRoot} 상수를 이용하여 만드는 것이다.

                    
·미리보기 | 소스복사·
<img src="${dojoRoot}src/widget/templates/images/yourimage.gif"/>  

CSS 파일에서 이미지를 참조하기 위해 CSS 자체 특징을 사용할 수도 있다. Listing 16처럼 CSS 파일 자체가 위치한 디렉토리에서 상대 경로로 이미지를 참조한다.

                    
·미리보기 | 소스복사·
background-image: url("images/yourimage.jpg");   
  
/* Internet Explorer-only hack, relative to dojo root directory, not recommended */  
background-image: expression(dojo.uri.dojoUri(   
    "src/widget/templates/images/yourimage.gif"));