행복만땅 개발자

ExtJS 2.2x를 쓰는 경우 IE6에서 그리드 상단 메뉴의 아이콘이 아래의 그림처럼

제대로 표시되지 않는 버그가 남아 있슴을 이제사 알게 되었다.

솔직히 이 버그는 예전에 발견된 버그일뿐 아니라 2.2.1 버젼에서는 fix된 것으로 알고 있었던 터라..

IE7 이후 버젼에만 맞추고 테스트를 진행했었는데..혹여나..

다시 최신버젼을 받아봐도 IE6에서 위에 해당하는 버그가 발생하는 것을 확인할 수 있었다.

예전엔 IE7 이후버젼에 이런 증상이 있었는데 지금은 거꾸로 IE6에서 발생하다니..

해결 방법은 이전버젼에서 적용했던 버그 fix를 그대로 적용하면 된다.

이젠 IE6 버젼에서 정상적으로 돌아가는 것을 확인할 수 있을 것이다.

물론 IE7과  IE8, 파폭, 크롬에서도 정상작동 확인...

function ShowImage(page, tag)
{
    var i = 1;
    var el;
    while (el = document.getElementById(tag + i)) {
        if (i == page)
            el.style.display = 'block';
        else
            el.style.display = 'none';
        i++;
    }
}

<table>
    <tr valign="top">
        <td>
            <div style="display:block" id="image1">
                <img src="/onlamp/2007/08/23/graphics/pic1.jpg" />
            </div>
            <div style="display:none" id="image2">
                <img src="/onlamp/2007/08/23/graphics/pic2.jpg" />
            </div>
            <div style="display:none" id="image3">
                <img src="/onlamp/2007/08/23/graphics/pic3.jpg" />
            </div>
        </td>
        <td width="100%" align="right">
            <select onchange="ShowImage(parseInt(this.value), 'image');">
                <option selected="selected" value="1">Image 1</option>
                <option value="2">Image 2</option>
                <option value="3">Image 3</option>
            </select>
        </td>
    </tr>
</table>

<div style="display:block" id="tab1">
    <ul class="tab">
        <li class="tab_selected" onclick="ShowImage(1, 'tab');">
            Summary
        </li>
        <li onclick="ShowImage(2, 'tab');">
            Details
        </li>
        <li onclick="ShowImage(3, 'tab');">
            Known Issues
        </li>
    </ul>
    <p>
        Introducing the new, improved multi-widget.  It slices, it dices, it even does
        your taxes!  Order yours today!  Call now: 555-WIDG
    </p>
</div>

<div style="display:none" id="tab2">
    <ul class="tab">
        <li onclick="ShowImage(1, 'tab');">
            Summary
        </li>
        <li class="tab_selected" onclick="ShowImage(2, 'tab');">
            Details
        </li>
        <li onclick="ShowImage(3, 'tab');">
            Known Issues
        </li>
    </ul>
    <p>
        The multi-widget is a sophisticated piece of complex machinery designed by the
        country's leading nuclear physicists.  Order yours today and you will quickly
        learn how easy it is to do just about anything in no time, thanks to our patented
        EZ-Widge technology.
    </p>
    <p>
        Motor: 5HP<br />
        Dimensions: 8" x 5" x 2"<br />
        Weight: 212 g<br />
        Radioactivity: negligible
    </p>
</div>

<div style="display:none" id="tab3">
    <ul class="tab">
        <li onclick="ShowImage(1, 'tab');">
            Summary
        </li>
        <li onclick="ShowImage(2, 'tab');">
            Details
        </li>
        <li class="tab_selected" onclick="ShowImage(3, 'tab');">
            Known Issues
        </li>
    </ul>

    <ul>
        <li>Do not use multi-widget near open flames</li>
        <li>Do not run while holding multi-widget</li>
        <li>Do not taunt multi-widget</li>
        <li>
            Multi-widget may, under certain as yet undetermined circumstances,
            spontaneously explode.  We hereby disclaim any libaility for personal injury
            caused as a result of multi-widget; for your safety, we recommend wearing
            body armor while handling multi-widget.
        </li>
    </ul>
</div>

ul.tab {
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid #778;
    font-weight: bold;
}

ul.tab li {
    display: inline;
    padding: 3px 0.5em;
    margin-left: 3px;
    border-top: 1px solid #778;
    border-left: 1px solid #778;
    border-right: 1px solid #778;
    border-bottom: none;
    background: top repeat-x #89aac7;
    white-space: nowrap;
    color: white;
    cursor:pointer;
}

ul.tab li.tab_selected {
    background: #fff;
    border-bottom: 1px solid #fff;
    color: black;
}

<div style="display:block;" id="colors1">
    <table style="background:#eeeebb">
        <tr>
            <td>
                <img src="/onlamp/2007/08/23/graphics/expand.jpg" style="cursor:pointer;"
                alt="Click to Expand" title="Click to Expand" 
                onclick="ShowImage(2, 'colors');" />
            </td>
            <td>
                Choice of four widget colors
            </td>
        </tr>
    </table>
</div>
<div style="display:none;" id="colors2">
    <table style="background:#eeeebb">
        <tr valign="top">
            <td>
                <img src="/onlamp/2007/08/23/graphics/collapse.jpg" style="cursor:pointer;"
                alt="Click to Collapse" title="Click to Collapse" 
                onclick="ShowImage(1, 'colors');" />
            </td>
            <td>
                <ul>
                    <li>blue</li>
                    <li>green</li>
                    <li>red</li>
                    <li>brown</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

// 콜백을 지정
document.onmousedown = mousedown;
document.onmousemove = movemouse;
document.onmouseup   = mouseup;
var lastobj; // 마지막으로 마우스를 올려놓았던 드래그 가능한 객체
var isdrag; // 객체를 드래그 하고 있을 경우 True

// 다음 코드는 여러분이 텍스트를 클릭했을 때 
// 드래그할 수 있는 텍스트를 강조하지 않도록 한다.
// 테이블은 drag_drop이라는 id를 가진 모든 드래그 
// 가능한 텍스트를 포함한다.

window.onload = function()
{
    var e = document.getElementById('drag_drop');
    if (e) {
        if (moz)
            e.onmousedown = function () { return false; } // mozilla
        else
            e.onselectstart = function () { return false; } // ie
    }
}

// 객체의 id에 근거하여 두 객체간에 맞바꾸기가 허용되는지를 확인한다.
// 각각의 드래그할 수 있는 항목들의 짝에 대해 맞바꾸기를 허용하거나 금지하도록 하는
// 조건을 여러분이 원하는 대로 변경한다.
function allowswap(a,b)
{
    if (a.id == "dragdropa" && b.id == "dragdropb" || a.id == "dragdropb" && b.id 
    == "dragdropa")
        return true;
    return false;
}

// 객체가 드래그할 수 있는 것이면 true를 반환 - 필요에 맞게 변경하도록 한다.
function isdraggable(obj)
{
    if (obj.id.substr(0,8) == "dragdrop")
        return true;
    return false;
}

// 마우스 버튼이 놓였을 경우의 콜백. 이 함수는 항목이 드래그 할 수 있는지를 확인하고,
// 드래그 할 수 있으면 프로세스를 초기화한다.
function mousedown(e) 
{
    var obj = moz ? e.target : event.srcElement;
    // DOM 트리를 추적하여 클릭한 항목이 드래그 할 수 있는지를 확인한다.
    // 이렇게 하면 예를 들면 TD를 감싸고 있는 TR이 드래그 할 수 있는 객체일 경우에도
    // 여러분이 클릭할 수 있다.
    while (obj.tagName != "HTML" && obj.tagName != "BODY" && !isdraggable(obj)) {
        obj = moz ? obj.parentNode : obj.parentElement;
    }
    if (isdraggable(obj)) {
    // 만약 드래그 할 수 있으면 전역 플래그 변수를 설정하여 이 객체를 추적하도록 하고,
    // 또한 객체의 포인터를 전역 변수에 저장한다(dragobj).
        isdrag = true;
        dragobj = obj;

        // origx, origy는 드래그되는 객체의 원래 시작 위치임.
        origx = dragobj.style.left;
        origy = dragobj.style.top;

        // x,y는 window내의 절대 좌표
        x = moz ? e.clientX : event.clientX;
        y = moz ? e.clientY : event.clientY;

        // offsetX, offsetY는 여러분이 클릭한 객체가 정확히 어디에 있는지에 의존한다.
        // 따라서 여러분이 객체의 중앙을 클릭할 경우, 객체는 그 위치에서
        // 마우스에 '덧붙여지는데(attached)', 예를 들면 좌상단 모서리에 덧붙여지지는 않는다.
        offsetX = moz ? e.layerX + 2: event.x + 2;
        offsetY = moz ? e.layerY + 2: event.y + 2;
    }
}

// 마우스가 이동할 때의 콜백. 이 함수는 여러분이 맞바꿀 수 있거나 맞바꿀 수 없는 객체위에서
// 마우스를 움직일 때 커서를 변경할 것이다.
function movemouse(e)
{
    // 현재 객체를 드래그하고 있는지를 확인
    if (isdrag) {
        // 만약 현재 객체를 드래그하고 있다면 드래그되는 객체의 위치를 마우스가 처음 클릭한 이후로
        // 상대적으로 마우스가 움직인만큼 지정한다.
        dragobj.style.left = moz ? origx + e.clientX - x 
              + offsetX + 'px' : origx + event.clientX - x + offsetX;
        dragobj.style.top  = moz ? origy + e.clientY - y + offsetY 
              + 'px' : origy + event.clientY - y + offsetY;
        var obj = moz ? e.target : event.srcElement;
    
        // 지금 맞바꿀 수 없는 엘리먼트상에 있을 경우 커서 스타일을 
        // 맞바꿈이 금지되어 있음을 보여주는 것으로 변경한다.
        if (obj != dragobj && isdraggable(obj) && !allowswap(dragobj,obj)) {
            obj.style.cursor = 'wait';
            // 객체에 대한 핸들을 전역변수에 저장하여 커서를 나중에 초기화할 수 있도록 한다.
            lastobj = obj;
        }
        else if (lastobj)  // 드래그할 수 없는 객체의 이동이 끝나는대로 커서를 초기화한다.
            lastobj.style.cursor = 'pointer';
        return false;
    }
    else {
        // 간혹 드롭 아이콘으로 갇힐 수 있는데, 그러므로 드래그하고 있지는 않지만 드래그할 수 있는
        // 항목을 전달할 때 안전하게 하기 위해 커서를 복원한다.
        var obj = moz ? e.target : event.srcElement;
        if (isdraggable(obj))
            obj.style.cursor = 'pointer';
    }
}

// 마우스 버튼을 놓았을 때의 콜백이며 맞바꾸기가 일어나야 하는지를 확인하며
// 맞바꾸기가 일어나지 말아야할 경우 드래그되는 개체를 원래 시작위치로 되돌려 보낸다.

function mouseup(e)
{
    if (isdrag) {  // 무언가가 드래그되고 있다면

        // 마우스 버튼이 놓여진 객체를 획득한다.
        var obj = moz ? e.target : event.srcElement;

        // 맞바꿀 수 있는 객체에 대해 마우스가 놓여졌는지를 확인한다.
        if (obj != dragobj && isdraggable(obj) && allowswap(dragobj, obj)) {

            // 맞바꾸기가 허용된 경우, 색상, 툴팁, 드래그 되는 객체의 내용을
            // 마우스가 놓여진 객체의 것들과 맞바꾼다.
            var htm = obj.innerHTML;
            obj.innerHTML = dragobj.innerHTML;
            dragobj.innerHTML = htm;

            var col = obj.style.color;
            obj.style.color = dragobj.style.color;
            dragobj.style.color = col;

            var titl = obj.title;
            obj.title = dragobj.title;
            dragobj.title = titl;

            // 현재 드래그하고 있는 객체(dragobj)의 위치를 다른 객체(obj)의 위치로 지정하고
            // obj를 dragobj가 드래그되기 전에 dragobj의 원래 위치(origx, origy)로 이동한다.
            dragobj.style.left = obj.style.left;
            dragobj.style.top = obj.style.top;
            obj.style.left = origx;
            obj.style.top = origy;
        }
        else {
            // 맞바꾸기가 일어나지 않으므로 드래그되는 객체를 원래의 시작 지점으로 돌려보낸다.
            dragobj.style.left = origx;
            dragobj.style.top = origy;
        }

        // 커서가 movemouse에서 바뀌었을 경우 커서를 포인터로 복원한다.
        if (lastobj) {
            lastobj.style.cursor = 'pointer';
        }
    }
    isdrag = false;  // 현재 아무것도 드래그되는 것이 없음
}

<table id="drag_drop" align="center" style="font-size:150%; color:green; 
    background-color:#88ccff; white-space: nowrap;">
  <tr>
    <td>
      <span id="dragdropa" style="cursor: pointer; position: 
      relative; color: #ff0000" title="John Doe">John</span>
    </td>
  </tr>
  <tr>
    <td>
      <span id="dragdropb" style="cursor: pointer; position: 
      relative; color: #a0522d" title="Jane Smith">Jane</span>
    </td>
  </tr>
  <tr>
    <td>
      <span id="dragdropc" style="cursor: pointer; position: 
      relative; color: #00aa00" title="Bill Schwartz">Bill</span>
    </td>
  </tr>
</table>

편의상 테이블에 객체가 위치해 있을 경우 각기 다른 색상을 띠도록 하였는데, 중요한 점은 드래그할 수 있는 항목의 id가 allowswap에서도 참조되며 style 속성이 position:relative라는 사실이다. 이 공식은 자바스크립트에서 객체들의 위치를 계산하여 상대적인 위치를 추정하는데 사용되었다. 또한 감싸고 있는 테이블의 id는 drag_drop인데, window.onload 함수의 맨 위에서 참조되고 있다는 것도 알아두도록 한다.

요약

대체로 앞서의 예제들은 웹 페이지의 일부를 나누거나 선택적으로 보이게끔 하는 데 있어 다소 창의적인 방식으로 div 태그가 사용될 수 있음을 보여주고 있다. 드래그 앤 드롭 예제는 요즘 볼 수 있는 대부부의 고급스런 웹 페이지에서 볼 수 있는 상당히 강력한 개념을 정말로 간단하게 보여주는 예제의 하나일 뿐이다. 거기에 조금만 더 작업을 하면 예를 들어 완전히 커스터마이즈가 가능한 홈 페이지를 만들어 여러분이 각종 뉴스 피드나 이미지, 그리고 핵심 컨텐츠들을 드래그 하고 서로 위치를 바꿀 수 있도록 할 수도 있다. 여러분의 상상력만이 유일한 제약사항일 뿐이다!

제공: 한빛 네트워크
저자: Howard Feldman
역자: 이대엽
원문: Advanced JavaScript II

몇년전에 ajax란 것을 듣고 사용하기 위해서 좀더 쉽게 쓸수 없을까 하는 생각에 혹 framework는 없을까

당시엔 국내에 관련서적도 없었던 터라 인터넷 검색으로 framework 라고 해서 찾은 것이 prototype 과 dojo 였다.

그때에도 ui적인 측면이 강한 dojo에 흥미를 가졌었지만 느린 속도 때문에  직관적이면서 심플한 prototype 을 애용하게 되었다.

하지만 이클립스 wtp 에서도 dojo 를 지원하더니 이번에 스트럿츠2로 한번 개발해볼까 했더니

지원하는 테마인 ajax가 바로 dojo 가 아닌가

기존에 prototype 으로 만들어논 프레임웍을 스트럿츠2의 테마로 등록하는 방법은 없을까 찾아는 보지만 어째 좀..

이번기회에 다시금 dojo에 익숙해져 보자는 생각에 끄적여본다.

dojo이 드뎌 1.0대로 진입을.. 0_0

예전엔 객체 생성하는 방법도 버젼마다 조금씩 달랐었는데 이번버젼엔 어떻게 바뀌었을까나

dojo는 홈페이지에서 받던지 다음링크 http://download.dojotoolkit.org/release-1.0.2/dojo-release-1.0.2.zip 에서 파일을 다운 받아서 웹 디렉토리에 적당히 풀고, (그 디렉토리를 js라고 하면) 다음과 같이 쓰고 사용하면 된다.

주의: 할 점은 dojo가 두 번 들어간다는 것이다. dojo폴더 이하에 생긴다는 뜻...

확실히 가볍던 prototype에 비해 왠지 묵진한 느낌의 dojo.  zip파일 로도 약 3.9M 정도니..묵진한건 기분만은 아닌듯

하지만 다른 건 필요없다.

기본기능에 충실한 dojo만을 사용하길 원한다면   AOL developer network 에서 지원하는 dojo framework를 사용해도 된다.

아니면 다음링크에서 기냥 받아두 된다.

http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js.uncompressed.js (압축안된 버전)
http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js(압축된 버전)

와우. dojo 가 이리 가볍다니...ㅋ

아니면 다음과 같이 사용해도 된다.

JavaScript 클래스에 대한 확장

prototype.js라이브러리에 기능을 추가하기 위한 방법중 하나는 현재 존재하는 JavaScript클래스를 확장하는 것이다.

Object 클래스를 위한 확장

Number 클래스를 위한 확장

다음의 예제는 0에서 9까지의 메시지 박스를 표시할것이다.

Function 클래스를 위한 확장

실제로 이 확장중 하나를 보자.

String 클래스를 위한 확장

Array 클래스를 위한 확장

시작하기 위해, Array는 Enumerable를 확장한다. 그래서 Enumerable객체내에 정의되는 모든 편리한 메소드는 사용가능하다. 이것외에도, 아래의 메소드들이 구현되었다.

document DOM 객체를 위한 확장

Event 객체를 위한 확장

window객체의 이벤트를 로그하기 위한 이벤트 핸들러를 추가하는 객체를 사용하는 방법을 보자.

prototype.js에 새롭게 정의된 객체와 클래스

라이브러리가 당신을 돕는 다른 방법은 객체지향 디자인과 공통적인 기능을 위한 지원 모두를 구현하는 많은 객체를 제공하는 것이다.

PeriodicalExecuter 객체

이 객체는 주어진 함수를 주어진 시간간격으로 반복적으로 호출하기 위한 로직을 제공한다.

프라퍼티	타입	상세설명
callback	Function()	호출되기 위한 함수. 이 함수로 전달될 파라미터는 없다.
frequency	Number	이것은 수초내 간격으로 실질적으로 작용
currentlyExecuting	Boolean	만약 함수 호출이 진행중이라면 표시

Prototype 객체

Prototype 객체는 사용되는 라이브러리의 버전을 명시하는 것보다 중요한 역활을 가지지 않는다.

Enumerable 객체

Enumerable 객체는 list형태의 구조내에서 항목을 반복하기 위한 좀더 멋진 코드를 작성하는 것을 허용한다.

많은 객체들은 유용한 인터페이스에 영향을 끼치기 위해 Enumerable 을 확장한다.

Hash 객체

Hash 객체는 hash구조를 구현한다. 이를테면, Key:Value쌍의 집합.

Hash객체내 각각의 항목은 두개의 요소(첫번째는 key, 두번째는 value)를 가진 배열이다. 각각의 항목은 두개의 프라퍼티(key 와 value)를 가진다.

ObjectRange 클래스

Enumerable으로부터 상속

상위 경계나 하위 경계로 값들의 범위를 표시

The Class object

Class 객체는 라이브러리에서 다른 클래스를 선언할때 사용된다. 클래스를 선언할때 이 객체를 사용하는 것은 생성자로 제공되는 initialize()메소드를 지원하기 위한 새로운 클래스를 발생시킨다.

아래의 샘플을 보라.

Ajax 객체

이 객체는 AJAX기능을 제공하는 많은 다른 클래스를 위한 root와 명명공간(namespace)처럼 제공한다.

Ajax.Responders 객체

Enumerable로 부터 상속되었다

이 객체는 Ajax관련 이벤트가 발생할때 호출될 객체의 목록을 보존한다. 예를 들어, 당신이 AJAX작업을 위한 전역 예외 핸들러를 연결하길 원한다면 이 객체를 사용할수 있다.

Ajax.Base 클래스

이 클래스는 Ajax객체내 정의된 다른 대부분의 클래스를 위한 기본(base)클래스처럼 사용된다.

Ajax.Request 클래스

Ajax.Base로 부터 상속

AJAX 작업을 캡슐화

options 인자 객체

AJAX작업의 중요한 부분은 options 인자이다. 이것은 기대되는 프라퍼티를 가지는 동안 어떠한 객체도 전달될수 있다. 이것은 AJAX호출을 위해 익명 객체를 생성하는 것이 공통적이다.

Ajax.Updater 클래스

Ajax.Request로 부터 상속

요청된 url이 당신 페이지의 특정 요소내 직접적으로 삽입하길 원하는 HTML을 반환할때 사용된다. 당신은 url이 도착을 평가할 <script>블럭을 반환할때 이 객체를 사용할수 있다. 스크립트로 작업하기 위해 evalScripts 옵션을 사용하라.

Ajax.PeriodicalUpdater 클래스

Ajax.Base로 부터 상속

이 클래스는 반복적으로 인스턴스화하고 페이지에서 요소를 새롭게 하거나 Ajax.Updater가 수행할수 있는 다른 작업중 어느것을 수행하기 위한 Ajax.Updater객체를 사용한다. 좀더 많은 정보를 위해 Ajax.Updater 참조를 체크하라.

Element 객체

이 객체는 DOM내 요소를 변경하기 위해 몇몇 유틸리티성 함수들을 제공한다.

The Abstract 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떤 프라퍼티나 메소드도 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

Abstract.Insertion 클래스

이 클래스는 동적으로 내용물을 추가할 다른 클래스를 위한 기본 클래스처럼 사용된다. 이 클래스는 추상 클래스처럼 사용된다.

Insertion 객체

이 객체는 라이브러리내 다른 클래스를 위한 root처럼 제공한다. 이것은 어떠한 프라퍼티나 메소드를 가지지 않는다. 이 객체에 정의된 클래스는 전통적인 추상 클래스처럼 처리된다.

Insertion.Before 클래스

Abstract.Insertion로 부터 상속

요소 앞에 HTML삽입

다음의 코드는

다음처럼 HTML이 변경될것이다.

Insertion.Top 클래스

Abstract.Insertion로 부터 상속

요소아래의 첫번째 자식으로 HTML을 삽입. 이 내용물은 요소의 열기 태그뒤에 위치할것이다.

다음의 코드는

다음처럼 HTML이 변경될것이다.

Insertion.Bottom 클래스

Abstract.Insertion로 부터 상속

요소아래의 마지막 자식으로 HTML삽입. 내용물은 요소의 닫기 태그앞에 위치할것이다.

다음의 코드는

다음처럼 HTML이 변경될것이다.

Insertion.After 클래스

Abstract.Insertion로 부터 상속

요소의 닫기 태그뒤 HTML삽입

다음의 코드는

Field 객체

이 객체는 폼내 input필드와 작동하기 위한 몇가지 유틸리티성 함수를 제공한다.

Form 객체

이 객체는 데이터 항목 폼과 그것들의 입력 field와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

Form.Element 객체

이 객체는 폼요소와 작동하기 위한 몇몇 유틸리티성 함수를 제공한다.

Form.Element.Serializers 객체

이 객체는 폼요소의 현재 값을 가져오기 위해 라이브러리 내부적으로 사용되는 몇몇 유틸리티성 함수를 제공한다.

Abstract.TimedObserver 클래스

이 클래스는 값이 변경(또는 프라퍼티가 클래스정의를 얻어내는)될때까지 하나의 요소를 모니터링할 다른 클래스를 위한 기본클래스처럼 사용된다. 이 클래스는 추상클래스처럼 사용된다.

하위클래스는 요소의 입력값, style프라퍼티중 하나, 또는 테이블내 row의 수, 또는 당신이 추적하고자 하는 모든것을 모니터링하기 위해 생성될수 있다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

Form.Element.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼 입력 요소의 값을 모니터링하는 Abstract.TimedObserver의 구현물. 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.Element.EventObserver 클래스를 대신 사용할수 있다.

Form.Observer 클래스

Abstract.TimedObserver로 부터 상속

폼내 데이터 항목 요소의 값이 변경하는지를 모니터링하는 Abstract.TimedObserver의 구현물. 당신이 값 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함하는 폼을 모니터링하고자 할때 이 클래스를 사용하라. 이 경우 당신은 Form.EventObserver 클래스를 대신 사용할수 있다.

Abstract.EventObserver 클래스

이 클래스는 요소를 위해 값-변경 이벤트가 발생할때마다 콜백함수를 수행하는 다른 클래스를 위한 기본 클래스처럼 사용된다.

Abstract.EventObserver 타입의 다중 객체는 다른것을 지우지 않고 같은 요소로 묶일수 있다. 콜백은 요소에 할당되는 순서대로 수행될것이다.

트리거 형태의 이벤트는 radio버튼과 checkbox를 위해서는 onclick이고 대개의 textbox와 리스트박스/드랍다운을 위해서는 onchange이다.

얻어낸 클래스는 요소내 모니터링되는 현재 값을 무엇인지 판단하기 위한 메소드를 구현하는 것이다.

Form.Element.EventObserver 클래스

Abstract.EventObserver로 부터 상속

요소내 값 변경을 감지하기 위한 폼 데이터 항목 요소의 적절한 이벤트를 위한 콜백 함수를 수행하는 Abstract.EventObserver의 구현물. 만약 요소가 변경을 보고하는 이벤트를 드러내지 않는다면, 당신은 Form.Element.Observer 클래스를 대신 사용할수 있다.

Form.EventObserver 클래스

Abstract.EventObserver로 부터 상속

값이 변결될때 감지하기 위한 요소의 이벤트를 사용하여 폼내 포함되는 어느 데이터 항목 요소에 변경을 모니터링하는 Abstract.EventObserver의 구현물. 만약 폼이 변경을 보고하는 이벤트를 드러내지 않는 요소를 포함한다면, 당신은 Form.Observer 클래스를 대신 사용할수 있다.

Position 객체 (예비 문서)

이 객체는 요소 위치할당을 작업할때 돕는 수많은 함수를 제공한다.