Rev. 2.73

아주 오랜 시간을 거쳐 드디어 Prototype 1.7의 정식 버전이 릴리즈되었습니다. 1.6.x 버전에 이후 추가적인 50개 이상의 개선 사항이 포함되어 있으며, 개발팀은 이미 1.7.0.1 개발에 착수했다고 합니다. 새롭게 추가된 기능은 RC1 릴리즈 소개 포스트에 기술하고 있으며, 항상 그렇듯이 이번 릴리즈 역시 버그 수정 내용을 포함합니다. RC3 버전과의 차이점을 직접 비교해 보세요.

커밋 트리를 보니 Andrew Dupont씨만 겁나게 달리셨더군요. 당분간 그는 scripty2(script.aculo.us 2.0) 작업에 열중할 것이라고 했습니다. 그리고 다음 버전에 대한 언급도 있었는데, 다음 버그 수정 버전(1.7.0.1)에서는 DOM 코드를 재작성하여 성능 향상이 이루어질 것이며, 그다음 마이너 릴리즈(1.7.1)에서는 ECMAScript5와의 호환성을 추가(Function#bind, Array#map)하고 다음 메이저 릴리즈(1.8)에서는 Ajax 코드의 개선(JSONP지원 및 콜백 발화 보장) 등이 작업될 예정이라고 밝혔습니다.

Comments

IE9 지원을 위한 Prototype 1.7 RC3 버전이 릴리즈 되었습니다. RC2를 배포한지 다섯달 만이며 다음과 같은 변동사항이 있습니다.

요소의 치수 측정에 사용되는 메서드인 Element#getDimensions (관련 메서드로 getWidth와 getHeight가 있습니다.)는 코드 중복을 최소화하기 위해 재정의 되었었지만 몇몇 경우 약간 다른 결과를 만들어 냈기 때문에 이전 구현으로 되돌렸습니다. 그리고 더욱 정확한 측정을 위해서는 Element.Layout 메서드를 사용할 것을 권장합니다. Element.Layout의 사용방법은 간단합니다. 기존에 사용했던 someNode.getWidth() 대신 someNode.measure('border-box-width')와 같은 형식으로 사용할 수 있습니다. 이로써 하위 호환성을 유지할 수 있게 되었고 기존 코드를 재작성할 필요는 없습니다.

곧 출시될 인터넷 익스플로러 9를 공식으로 지원합니다. 최근에 출시된 IE9 베타버전에서 대부분의 유닛 테스트를 통과했으며 브라우저 문제로 인한 하나의 마이너한 이슈가 발견되었고 IE9의 최종버전에서는 수정될 것이라고 했습니다.

Comments

NASDAQ:GOOG

HumbleFinance는 HTML5 데이터 비주얼라이제이션 도구입니다. 마치 플래시로 만들어진 듯한 모양과 기능을 가진 차트를 제공합니다. 표현 범위의 제한이 없고 서로 다른 자료의 축을 공유하여 비교해야하는 금융 자료를 2D 차트로 표현하기에 적합합니다.(Google Finance 와 유사한) 그리고 특정한 구간을 선택하여 확대할 수도 있습니다. PrototypeFlotr 자바스크립트 라이브러리를 이용하였으며, 자바스크립트 변수에 저장된 데이터와 파라미터를 근거로 그래프를 표현하고 CSS와 HTML을 이용하여 컨트롤러와 플래그 모양을 만들었습니다.

HTML:

div id="finance">
    <div id="labels">
        <div id="financeTitle">NASDAQ:GOOG</div>
        <div id="time">
            <a onclick="HumbleFinance.zoom(5);">1w</a>
            <a onclick="HumbleFinance.zoom(21);">1m</a>
            <a onclick="HumbleFinance.zoom(65);">3m</a>
            <a onclick="HumbleFinance.zoom(127);">6m</a>
            <a onclick="HumbleFinance.zoom(254);">1y</a>
            <a onclick="HumbleFinance.zoom(1265);">5y</a>
        </div>
        <div id="dateRange"></div>
    </div>
</div>

Javascript:

Event.observe(document, 'dom:loaded', function() {
    HumbleFinance.trackFormatter = function (obj) {
        var x = Math.floor(obj.x);
        var data = jsonData[x];
        var text = data.date + " Price: " + data.close + " Vol: " + data.volume;
        return text;
    };
    
    HumbleFinance.yTickFormatter = function (n) {
        if (n == this.axes.y.max) return false;
        return '$'+n;
    };
    
    HumbleFinance.xTickFormatter = function (n) { 
        if (n == 0) return false;
        var date = jsonData[n].date;
        date = date.split(' ');
        date = date[2];
        return date; 
    }
    
    HumbleFinance.init('finance', priceData, volumeData, summaryData);
    HumbleFinance.setFlags(flagData); 
    
    var xaxis = HumbleFinance.graphs.summary.axes.x;
    var prevSelection = HumbleFinance.graphs.summary.prevSelection;
    var xmin = xaxis.p2d(prevSelection.first.x);
    var xmax = xaxis.p2d(prevSelection.second.x);
    
    $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    
    Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
        var area = e.memo[0];
        xmin = Math.floor(area.x1);
        xmax = Math.ceil(area.x2);
        var date1 = jsonData[xmin].date;
        var date2 = jsonData[xmax].date;
        $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    });
});

ExplorerCanvas를 이용하면 완벽하지는 않지만 IE계열 브라우저에서도 사용할 수 있습니다.

Comments