Dojo Toolkit Advanced

Added by 이윤정, last edited by 이윤정 on 5월 11, 2007  (view change)
Toggle Space Navigation Tree
Space Map

Advanced Advanced Features of Dojo Toolkit

Table of Contents

Dojo 위젯 만들기

  1. 위젯을 만들기 위한 단계
    1. 템플릿 만들기
    > dojo/src/widget/templates/HtmlSlideShow.html
    > dojo/src/widget/templates/HtmlSlideShow.css
    2. Bolilerplate 코드를 사용하여 위젯 자바스크립트 클래스 만들기
    > dojo/src/widget/HtmlSlideShow.js
    > 위젯 자바스크립트 클래스는 템플릿들의 경로에 대해 명시한다.
  2. Example: HtmlSlideShow.html Template 
     
<div style="position: relative; width: 800px; height: 600px;" dojoAttachPoint="imagesContainer">
    <img dojoAttachPoint="img1" border="0" hspace="0" vspace="0" class="slideShowImg" style="z-index: 1;" />
    <img dojoAttachPoint="img2" border="0" hspace="0" vspace="0" class="slideShowImg" style="z-index: 0;" />
</div>
  3. Example: HtmlSlideShow.css Template 
     
.slideShowImg {
    position: absolute;
    left: 0px;
    top: 0px;
    border: 2px solid #4d4d4d;
    padding: 0px;
    margin: 0px;
}
  4. Widget Bolilerplate Code 
    // 클래스들을 여기에 선언해서 얻어오는 패키지 시스템을 표시한다.
dojo.provide("dojo.widget.SlideShow");

// 관련있는 것들을 로드한다.
dojo.require("dojo.widget.*");

// 위젯 클래스를 선언한다.
dojo.widget.SlideShow = function(){

// 상속
// see: http://www.cs.rit.edu/~atk/JavaScript/manuals/jsobj/
dojo.widget.HtmlWidget.call(this);
this.templatePath = dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.html");
this.templateCSSPath = dojo.uri.dojoUri("src/widget/templates/HtmlSlideShow.css");
this.widgetType = "SlideShow";
} 

// 상속받은 프로세스를 완료한다.
dj_inherits(dojo.widget.SlideShow, dojo.widget.HtmlWidget);

// 태그를 만든다.
dojo.widget.tags.addParseTreeHandler("dojo:slideshow");

Dojo 드래그 앤 드롭

  1. Dojo Toolkit's Drag and Drop
    • Dojo's Drag-and-Drop facility is implemented as a set of extensible classes whose interaction is mediated by a manager object
      > DragSource
      > DragObject
      > DropTarget
      > DragManager
    • The classes are implemented for each rendering environment.
  2. Example: Drag and Drop 
    // HTML 환경을 위한 몇몇 예제에 대해 기록한다.
// 리스트 아이템을 드래그할수 있게 만든다. 그리고 그것이 타입을 모두 잡을수 있게 한다. 
new dojo.dnd.HtmlDragSource(dojo.byId("item1"), "*");

// 안으로 드롭할수 있고, 다른타입의 드래그소스들에 접근하도록 시키는 <ul> 엘리먼트의 일부를 만든다. 
new dojo.dnd.HtmlDropTarget(dojo.byId("list1"), ["*"]);

// 우리는 드래그소스들의 "typed"를 생성할 수 있다.  
// 드롭타겟들을 드롭타겟 생성자의 두번째 파라메터처럼, 타입들이 주는 배열을 통해 접근하는것을 선택할수 있다.
// 여기에 우리는 호환성 없는 드래그소스와 드롭타겟 객체들을 생성한다.
new dojo.dnd.HtmlDragSource(dojo.byId("item2"), "foo");
new dojo.dnd.HtmlDropTarget(dojo.byId("list2"), ["bar"]);
  3. Demo Scenarios

Dojo 애니메이션

  1. Dojo 애니메이션
    • 개발자들을 위한 이벤트 기반의 애니메이션 라이브러리를 강력하게 제공한다.
  2. 속성을 바꾼다.
    • 이 명령은 duration 속성을 변경한다.
      > anim.duration = 1000; //1초가 되도록 duration을 변경한다.
    • Do not change these values during an animation as the behavior for such an action isn't defined
    • 액션을 정의하지 않은 것과 유사한 행동같은 애니메이션을 하는 동안 그들의 값을 변경하지 않는다.
  3. 애니메이션 객체를 생성하기 위해 dojo.animation.Animation()을 호출한다.
    • var anim = new dojo.animation.Animation(curve,duration, accel, repeatCount);
      > curve - 특별한 객체 상세한 아래에서 애니메이션 포인트들을 주기 위해 사용된다.
      > duration - 밀리세컨드내의 애니메이션 길이.
      > accel - 가속하는(1 = max accel), 감속하는(-1 = max decel), 일정한 속도로 움직이는(0 = no accel) 애니메이션 인지 어떤지를 정의한다.
      > repeatCount - 만약 0보다 큰 숫자를 할당하면, 애니메이션은 많은 시간 반복될 것이다. 만약 -1로 할당하면, 애니메이션은 잠깐중지/멈춤할때 까지 영원히 반복될것이다.
  4. All Animations are Time-driven
    • 사용자는 애니메이션의 기간을 명시한다. 그리고 그것은 타임 프레임안에서 실행된다.
    • 이 시스템의 장점은 애니메이션들을 CPU속도에 상관없이 살필수 있다는 것이다.
  5. All Animations Run Off of Curves
    • curve는 특별한 객체이다. getValue( n ) 메소드를 가지고 단지 요구를 하는. 저기서 n은 숫자들의 배열을 리턴하는 0과 1사이의 숫자이다.
    • Dojo는 dojo.math.curves 안에 이용할수 있는 약간의 pre-build curves를 가지고 있다.
  6. Example: Animation on Curves 
    function Line(start, end) {
    this.start = start;
    this.end = end;
    this.dimensions = start.length;
    
    //simple function to find point on an n-dimensional, straight line
    this.getValue = function(n) {
        var retVal = new Array(this.dimensions);
        for(var i=0;i<this.dimensions;i++)
            retVal[i] = ((this.end[i] - this.start[i]) * n) + this.start[i];
        return retVal;
    }
    return this;
}
  7. 이벤트 기반
    • Dojo 애니메이션 라이브러리는 애니메이션의 모든 부분으로 끌어들이기 위해 개발자들에게 허락한다. 간단하고 직관적인 방법으로 고급 애니메이션들을 만들수 있게 한다.
  8. 이벤트 핸들러
    • onBegin - 애니메이션이 play되었을때(시작과 함께) 실행된다.(from the beginning)
    • onAnimate - 애니메이션이 반복될때마다 실행된다.
    • onEnd - 애니메이션이 완료되었을때 실행된다.
    • onPlay - 애니메이션이 play되었을때(다른 포인트로부터, 시작에 포함되어) 실행된다.
    • onPause - 애니메이션이 잠시 멈출때 마다 실행된다.
    • onStop - 애니메이션이 멈출때 마다 실행된다.(stop()이 호출될때, 종료되고 있는것이 아니다.)
    • handler - 이벤트들을 모두 catch 한다. 사용자는 이벤트의 모든 타입을 처리하기위해 하나의 핸들러만 선언할 수 있다.
      사용자는 실행되는 이벤트의 종류가 무엇인지 알수있는 이벤트객체의 타입 속성을 확인할 수 있다.
  9. Example: Slide a node across the screen 
    var anim = new dojo.animation.Animation(
    // linear points from (0,0) to (400,200)
    new dojo.math.curves.Line([0,0], [400,200]),
    1. , // do it over a 3 second duration
    2. // with no acceleration
);
dojo.event.connect(anim, "onAnimate", function(e) {
    node.style.left = e.x + "px";
    node.style.top = e.y + "px";
});
dojo.event.connect(anim, "onBegin", function(e) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("Animation started!"));
    document.body.appendChild(div);
});
dojo.event.connect(anim, "onEnd", function(e) {
    var div = document.createElement("div");
    div.appendChild(document.createTextNode("Animation done!"));
    document.body.appendChild(div);
});
anim.play();
  10. Demo Scenarios

Dojo 스토리지

  1. dojo.storage는 무엇인가?
    • Dojo.storage는 스토리지와 함께 자바스크립트 어플리케이션들을 제공하는 일관된 API이다.
    • It is a generic front-end to be able to provide all JavaScript applications a consistent API for their storage needs
      그것은 일반적인 그들의 스토리지의 요구사항들을 위해 모든 자바스크립트 어플리케이션의 일관된 API를 제공할수 있는 front-end 이다.
    • 스토리지 백엔드는 mechanism이 적절하든 적절하지 않든 사용할 수 있다.
      > dojo.storage는 자동적으로 그들의 환경을 파악한다. 그리고 스토리지 옵션들을 이용한다. 가장 적절한 것 하나를 선택한다.
  2. Future Storage Providers
    • Cookie Storage Provider - 유지한 hash table을 위해 쿠키들을 사용한다.
    • Flash Storage Provider - 유지한 데이타를 위해 Flash's SharedObjects를 사용한다.
    • ActiveX Storage Provider - 유지한 데이타를 위해 COM's File APIs를 사용한다.
    • XPCOM Storage Provider - 유지한 데이타를 위해 XPCOM's File APIs를 사용한다.
    • Form Storage Provider - 일시적인 데이타를 저장하는 숨겨진 폼의 텍스트 자동저장 특징을 사용한다. (실제로 간단한 히소트리 라이브러리는 이같은 트릭을 사용한다.)
    • WHAT WG Storage Provider - WHAT Working Group에 선언되어진 것처럼 스토리리 데이타를 위해 Native Browser 영속성을 사용한다.
    • IE Storage Provider - 데이타를 60K까지 저장하는 IE 소유의 능력들을 사용한다.

Dojo 성능 튜닝

  1. Performance Tuning의 범위
    • Download
    • Parsing
    • Instantiating
    • Deferred download
  2. Download
    • 웹서버 세팅
      > 사용자 웹서버를 자바스크립트파일등등 처럼 set한다. 브라우저가 매번 리로드를 시도하지 않은 것같은 "Cachecontent" 설정을 가진다.
      > 웹서버 압축 사용하기(mod_deflate on apache)
    • custom dojo.js 파일 만든다.
      > to speedup download you should build a custom "edition" of dojo.js containing the modules your app needs
  3. Parsing
    • Dojo는 만약 그들이 위젯이라면 알기위해 노드들을 모두 검색한다.
    • dojoType widget tag를 검색하기 취한 노드들을 기술한다.
    • 페이지 내의 태그 숫자를 줄인다.
  4. Deferred Download
    • 한번에 사용자의 전체페이지를 다운로딩 하는것보다 사용자가 그들을 필요로 할때까지 일부분을 미룬다. 
      <div dojoType="Tooltip" href="tooltip.jsp"></div>
<div dojoType="TabContainer">
    <a dojoType="LinkPane" href="tab1.jsp">Tab #1</a>
    <a dojoType="LinkPane" href="tab2.jsp">Tab #2</a>
</div>
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.