Revin Guillen씨가 Dojo dojo.data API와 아주 폼나는 방법으로 웹 서비스에 접근하는 방법에 대한 글을 작성하셨습니다.

그는 Wikipedia에 접근하는 것을 예제로 보여주었습니다(데모):

Dojo는 최근 정확히 우리가 원하던 것들을 보여주는 새로운 데이터 저장소를 받았습니다: dojox.data.WikipediaStore 입니다. 이름에서 알 수 있듯이, Wikipedia를 코드에서 쿼리할 수 있는 간단한 객체로 변환합니다. Dojo의 간편한 dojox.rpc 패키지를 사용해서 빌드하면 간단하고, 간략한 DRY[각주:1] 구현을 할 수 있습니다.

겨우 4단계 뿐입니다:

  1. 웹 서비스 객체를 만든다
  2. 새로운 데이터 저장소를 선언하고 ServiceStore를 상속받는다
  3. fetch 메소드를 부여한다
  4. _processResult 메소드를 부여한다

서비스 기술자는 이런 식으로 되어있습니다:

[code:js]
{
    "SMDVersion": "2.0",
    "id": "http://en.wikipedia.org/w/api.php",
    "description": "Wikipedia API",
 
    transport: "JSONP",
    envelope: "URL",
    additionalParameters: true,
    target: "http://en.wikipedia.org/w/api.php",
    parameters: [
        { name: "format", optional: false, "default": "json" }
    ],
 
    services: {
        query: {
            parameters: [
                { name: "action", type: "string", "default": "parse" }
            ]
        }
    }
}
이것을 상점을 만들 때 사용하실 수 있습니다:
[code:js]
dojo.require("dojo.io.script"); // for cross domain JSONP
dojo.require("dojox.rpc.Service");
 
dojo.addOnLoad(function(){
    var mu = dojo.moduleUrl("dojox.rpc.SMDLibrary", "wikipedia.smd");
    var wikipedia = new dojox.rpc.Service(mu);
 
    wikipedia.query({
        action: "parse",
        page: "Main Page"
    }).addCallback(this, function(article){
        dojo.body().innerHTML = article.parse.text["*"];
    });
});

from Working with Web Services with ease; dojo.data and the WikipediaStore
  1. Don't Repeat Yourself [본문으로]
TAG Dojo
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
Dylan Schiemann 씨가 Dojo를 이용한 Flickr 배지 구현이라는 글을 작성하셨습니다.

특히 흥미로운 점은 그가 단순하게 시작한 부분입니다:
[code:xml]
<head>
...
<link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
<style type="text/css">
        img.thing { width:50px; height:50px; }
</style>
...
</head>
<body>
...
<div dojoType="dojox.image.FlickrBadge" rows="8" cols="3" username="dylans"
        tags="dojotoolkit,italy"></div>
...
<script type="text/javascript" src="/dojo/dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
        dojo.require("dojox.image.FlickrBadge");
</script>
</body>

그 다음에 그는 성능 부분을 손보았고, 그 방법에 대해 설명했습니다:
[code:xml]
<head>
...
<link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
<style type="text/css">
        img.thing { width:50px; height:50px; }
</style>
...
</head>
<body>
...
<div id="flickrSidebox"></div>
...
<script type="text/javascript" src="/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
        function initBadge(){
                new dojox.image.FlickrBadge({rows: 8, cols: 3,
                        username: "dylans", tags:"italy,dojotoolkit"},
                        "flickrSidebox").startup();
        }
        dojo.addOnLoad(function(){ dojo.require("dojo.badge");
                dojo.addOnLoad(initBadge)});
</script>
그의 생각의 흐름을 보는 것은 꽤 훌륭합니다. 여러분도 기능에서 시작해서 다시 돌아와 성능을 조정하는 방법으로 시작하실 수 있습니다.

from Badging Flickr with Dojo
Posted by 행복한고니 트랙백 0 : 댓글 0
AOL의 James Burke씨는 AOL이 AOL의 웹 AIM API를 래핑한 Dojo 모듈을 릴리스 했다고 밝혔습니다. 웹 AIM API를 이용하면, 로그인, 메시지 송수신, 친구목록 등을 포함한 주요한 AIM 기능들을 어떠한 웹 페이지에서도 사용할 수 있습니다.
우리 회사 AOL에서 웹 AIM API 래퍼와 사용자 로그인과 친구 목록, 메시지 송수신을 위한 UI 위젯을 포함한  몇몇 Dojo 모듈을 오픈 소스화 했습니다.

모듈은 AOL 웹 메일에서 사용하던 모듈들의 오픈 소스 버전으로, 실 서비스에 사용된 적이 있습니다. 이 모듈은 Dojo 1.1 이상에 맞춰 설계되었습니다.
이 모듈은 AIMDojo 프로젝트의 일부로서 릴리스되었으며 1.0 버전은 즉시 다운로드하실 수 있습니다. James씨는 Dojo와 WEB AIM 통합데모를 제공했습니다.

from Dojo gets AIM API Supprot from AOL
TAG Dojo
Posted by 행복한고니 트랙백 0 : 댓글 0
Dojo팀은 그들의 문서를 개선시키고 Dojo 개발자들에게 보다 많은 정보를 주려고 정말 열심히 노력하고 있습니다. DojoCampus.orgSitePen 블로그간에, Dojo 커뮤니티를 위한 알찬 교육자료를 제공하고 있습니다.

보통, Ajaxian 자습서는 정말 좋은 교육 자료를 하나만 다루지만 최근에는 두 개의 멋진 자습서도 다룬 적이 있어 Ajaxian 독자들에게 두 개를 제공하기로 했다고 합니다.

Tutorial 1: Dojo Drag and Drop, Part 1: dojo.dnd
이 시리즈의 첫번째 부분에서, Revin Guillen 씨가 dojo.dnd라고 불리는 Dojo의 드래그앤드롭 API로 여러분을 안내할 것입니다.

Revin씨의 자습서에서 진짜 마음에 드는 부분은 개념을 공고히 해주는 그의 값진 코드 예제들입니다. 예를 들어, 드롭 핸들러를 작성하는 그의 데모 코드는 매우 값지고 간결해서 읽는 이로 하여금 드롭 핸들러 작성방법을 쉽게 이해할 수 있게 합니다.
[code:js]
// calculate simple totals in the wishlist and cart titles
var setupCartTitle = function(){
    var title = "Shopping Cart";
    var cartLength = cart.getAllNodes().length;
    if(cartLength){
        var items = cartLength> 1 ? " items" : " item";
        title += " (" + cartLength + items + ")";
    }
    cartPane.setTitle(title);
};
var setupWishlistTitle = function(){
    var title = "Wishlist";
    var wishlistLength = wishlist.getAllNodes().length;
    if(wishlistLength){
        var items = wishlistLength> 1 ? " items" : " item";
        title += " (" + wishlistLength + items + ")";
    }
    wishlistPane.setTitle(title);
};
dojo.connect(cart, "onDndDrop", setupCartTitle);
dojo.connect(wishlist, "onDndDrop", setupWishlistTitle);

Tutorial 3: A Beginner’s Guide to Dojo Charting, Part 1 of 2

다음은 Doug McMaster씨가 Dojo 차트 기능 사용법을 알려드릴 것입니다.
이 두 개의 가이드에서,우리는 Dojo Charting을 얻고 실행하기가 얼마나 쉬운지 살펴보고, 여러분의 차트를 다른 모양으로 만드는 옵션들에 대해 매우 상세히 설명할 것입니다. 오늘은 Part 1에서, 간단한 예제로 시작하고 차트 모양을 정의하는 모든 옵션에 대해 알아보겠습니다. Part 2에서는 차트의 축과 데이터 셋을 정의하는 옵션에 대해 다루도록 하겠습니다.
Doug씨는 Dojo 차트 API에서 2D 차트를 커스터마이징해서 쉽게 차트를 생성하는 법을 설명하고 있습니다. 예제는 보시는 바와 같이 단순합니다:
[code:xml]
<html>
<head>
<title>Basic Charting</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true"></script>
 
<script type="text/javascript">
 
dojo.require("dojox.charting.Chart2D");
 
makeCharts = function(){
 
        var chart1 = new dojox.charting.Chart2D("simplechart");
        chart1.addPlot("default", {type: "Lines"});
        chart1.addAxis("x");
        chart1.addAxis("y", {vertical: true});
        chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
        chart1.render();
 
};
 
dojo.addOnLoad(makeCharts);
 
</script>
</head>
<body>
<div id="simplechart" style="width: 250px; height: 150px;"></div>
</body>
</html>
결과는 이렇습니다:
사용자 삽입 이미지
from Ajaxian Featured Tutorial: A Double Dose of Dojo
Posted by 행복한고니 트랙백 0 : 댓글 0
이와 관련된 비슷한 이슈를 살펴보는 두 개의 글이 있습니다.

첫째, Google Analytics는 Pete Higgins씨가 살펴본 것과 같이 보통 응용프로그램이 멈춰 대기하게 되는 스크립트 태그를 사용합니다.

그래서 "google-anaytics.com 을 기다리는 중..." 과 같은 글을 보아왔었습니다.
이것은 보통 body 태그가 닫히기 전에 있어, Dojo의 addOnLoad 함수가 ga.js가 읽히고 실행되기 전까지 대기하도록 합니다. 저는 SitePen의 Dojo QuickStart 가이드에서 그것을 알게되었습니다. 모든 가이드는 유효한 HTML과 CSS 이고, 커스텀 탭 뷰와 간단한 네비게이션으로 주요 섹션을 구분하고 있습니다. 안타깝지만, 그런 역할을 하는 모든 코드는 addOnLoad 함수내에서 실행됩니다. 그래서, Tennesse의 제 비천한 인터넷 망은 ga.js가 읽히는데 5초 이상 걸리게 하더군요. 요컨데, 때때로 저는 탭이 추가되고 선택되지 않은 탭이 사라짐에 따라 화면이 짜증나게 흔들리며 렌더링되는 것을 경험합니다.

저는 script 태그를 head 엘리먼트에 추가하고 그 코드를 Google의 코드가 준비되는 것과는 상관없이 Dom 이 준비되자마자 남은 코드를 실행할 수 있도록 하면서 onLoad 에서 실행하는 것이 안전하리라 판단했습니다.
그는 코드를 보여주었습니다:
[code:js]
dojo.provide("dojox.analytics.ga");
dojo.mixin(dojox.analytics.ga, {
        // _acct: String
        //            your GA urchin tracker account numbers.
        _acct: dojo.config.urchin || "",
 
        // _loadInterval: Integer
        //           time in ms to wait between checking again
        _loadInterval: 420,
 
        _loadGA: function(){
                // summary: load the ga.js file and begin initialization process
                var gaHost = ("https:" == document.location.protocol) ? "https://ssl." : "http://www.";
                var s = dojo.doc.createElement('script');
                s.src = gaHost + "google-analytics.com/ga.js";
                dojo.doc.getElementsByTagName("head")[0].appendChild(s);
                setTimeout(dojo.hitch(this, "_checkGA"), this._loadInterval);
        },
 
        _checkGA: function(){
                // summary: sniff the global _gat variable Google defines.
                //           if it exists, run _gotGA, otherwise, do another interval
                setTimeout(dojo.hitch(this, window['_gat'] ? "_gotGA" : "_checkGA"), this._loadInterval);
        },
 
        _gotGA: function(){
                // summary: initialize the tracker, we've got ga.js loaded
                var ga = this._tracker = dojo.hitch(_gat, "_getTracker", this._acct)();
                ga._initData();
                ga._trackPageview();
                this.GAonLoad.apply(this, arguments);
        },
 
        GAonLoad: function(){
                // stub function to fire when urchin is complete
                // you also have access in this function to this._tracker, which is the
                // root tracker instance you called _initData() on
        }
 
});
 
// start it all up after body is ready:
dojo.addOnLoad(dojox.analytics.ga,"_loadGA");
이것은 Dojo 에서 곧 제공될 예정입니다, 그러면 이렇게 사용하실 수 있게 됩니다:
[code:js]
var pagetracker = new dojox.analytics.Urchin({ ua: "UA-123456-7" });
pagetracker.trackPageView("/ajaxy-notification");

둘째, Weston Ruter씨는 인라인 script 태그에 document.write()를 사용하는 Google AdSense와 AJAX 라이브러리 API를 같이 사용할 때 일어나는 다른 문제를 알려주셨습니다. 예전에 John Resig 씨가 document.write 대신 DOM 작업을 하는 작은 래퍼를 작성하신 적이 있습니다. Weston 씨는 그것에 기초하여 작성했습니다.

전체 코드를 확인해보세요.

from Google Anaytics after onLoad and document.write for XHTML
Posted by 행복한고니 트랙백 0 : 댓글 0
Nexaweb에서 Dojo 기반 새 제품인 dojo.E를 출시했습니다: XML 기반의 마크업을 통해 Ajax를 사용할 수 있도록 해줍니다. 이 때의 마크업은 XML, HTML 심지어 CSS도 가능합니다.

dojo.E Markup
dojo.E Markup은 개발자들이 그들의 dojo 컴포넌트를 직접적으로 dojo 클래스로 변환되는 간단한 마크업 언어를 사용함으로써 기술할 수 있도록 합니다. 예를 들어, dojo의 버튼을 선언한다고 하면, 둘 중 하나는 이렇게 가능합니다;
[code:xml]
<div dojoType=”dijit.form.Button” label=”Hello, world”/>
JavaScript를 사용하면, new dijit.form.Button(htmlElement, “Hello, World”); 와 같습니다.

dojo.E Markup은 다음과 같이 개발자들이 버튼을 기술할 세번째 방법을 제공합니다:
[code:xml]
<script type=“text/xml” dojoType=“dojoe.XmlScript”>
   <ui xmlns:dijit=“dijit”>
        <dijit :form.Button label=“Hello, World!”
           onclick=“alert(’It works!’)”/>
    </ui>
</script>

dojo.E Runtime런타임은 HTML DOM을 수정하거나 dojo 컴포넌트를 더 쉽게 하는 추가 마크업을 제공합니다.
[code:xml]
<xm :xmodify document=”ui”>
        </xm><xm :append select=”//widget.SortList”>
                <li>{0}</li>
        </xm>
위의 xModify 문법은 <li>{0}</li>태그를 dojo.SortList 컴포넌트에 추가하는 dojo.E 런타임을 가리킵니다. 이 경우의 select 구문은 XPath 구문이며 CSS 셀렉터는 아닙니다. 실제 샘플에서 서 위의 코드는 개발자들이 "{0}"을 파라미터화 할 수 있도록 하고 개발자가 "Add" 버튼을 클릭했을 때 xModify 코드를 실행하는 "Macro"로 감싸집니다.

아래와 같은 할 일 목록 예제를 보여주는 라이브 에디터를 시연해보실 수 있습니다.
[code:js]
<declarations>
        <dojoe :Macro id="add" xmlns:dojoe="dojoe">
        <![CDATA[
        <xm:xmodify xmlns="html" xmlns:xm="dojoe" xmlns:dijit="dijit" document="ui">
                <xm :append select="//widget.SortList ">
                        <li>{0}</li>
                </xm>
      
        ]]>
        </dojoe>
</declarations>
<ui xmlns:dijit="dijit" xmlns:dojox="dojox" xmlns="html">
        <div id="input_container">
                <span>ToDo:</span>
                <input style="width: 184px; margin-left:3px;" id="textbox" type="text" class="input_tbx" value="Item"/>
                <input class="button" type="button" value="Add" onclick="dojoe.containers.macro.get('add').execute(document.getElementById('textbox').value);" />
        </div>
        <div id="list_container">
                <dojox :widget.SortList  title="SortList From Markup" style="width:300px; height:150px;">
                        <li>A. Download and Install the dojo.E</li>
                        <li>B. Build dojo.E Application</li>
                        <li>C. Profit</li>
                </dojox>
        </div>
</ui>
from Nexaweb announces dojo.E markup and runtime on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Mike Wilcox씨가 Dojo를 위한 Firebug Lite에 대한 글을 작성하고 그것이 어떻게 console.log()를 뛰어넘었는지를 보여주었습니다.

꽤 그럴 듯 해보이는 것 같습니다. ^^
사용자 삽입 이미지

Dion씨는 DOM Inspector 가 가장 흥미로웠다고 하는군요.
사용자 삽입 이미지


from Dojo Firebug Lite: Beyond console.log on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
Dojo의 Pete Higgins씨가 만든 dojo.workers를 이용한 멋진 예제를 작성했습니다.

IE6에 대한 지원은 다른 곳으로 날려버리는 걸로 마무리했네요(저도 이렇게 하고 싶을 때가 참 많습니다만...).
[code:js]
var newp = function(){
 // IE6 branch of this demo
 window.location.href = "http://" +
  (confirm("Is it 2008?") ?
   "webkit.org" : "mozilla.org") +
  "/";
}
 
// setup our branch launch:
dojo.addOnLoad((dojo.isIE && dojo.isIE <7 ? newp : init));

from dojo.workers: a showcase on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1
PHP 계의 유명한 Zend Framework과 따로 말할 필요도 없이 유명한 JavaScript 프레임웍인 Dojo가 만나 통합본을출시했습니다. 각자 서버사이드 프레임웍의 정상과 프론트엔드의 정상을 목표로 하고 있어 서로 힘을 합치기로 했다고 합니다.

첫 버전에서 볼 수 있는 것들은 다음과 같습니다:
  • JSON-RPC 서버: 우리는 Zend-Json_Server를 다시 작업하고 있습니다. 이건 0.2.0 때부터 인큐베이터에만 있었고 JSON-RPC 명세를 실제로 따라서 출시된 적은 없었습니다. 이것이 JSON-RPC 클라이언트 구현체를 가진 다른 툴킷들 뿐 아니라, Dojo와도 매끄럽게 작업할 수 있도록 도와줄 것입니다. 그 제안이 아직 승인을 기다리고 있기는 하나 기실 이 작업은 이미 끝났습니다; 확인하고 싶으시면 ZF svn을 참고하세요.

    원래의 Zend_Json_Server는 버려질 것입니다. 제대로 테스트되거나 문서화가 되어있지도 않아 출시를 방해하고 있었습니다. 게다가, 자신만의 주먹구구식 표준을 사용하고 있었기때문에, 진정한 JSON-RPC 서버가 제공해야할 상호운용성을 제공하지 않았습니다. 저는 비로소 범용적 이용에 맞는 표준 호환 솔루션을 제공할 수 있게 되어 무척 흥분했습니다.

    One final note: JSON-RPC 스펙은 1.0과 2.0 의 서로 다른 두 종류가 있습니다. 현재 제가 구현한 결과물은 요청에 적재할 포맷을 전환할 수 있으며, 서로 다른 적합한 SMD 포맷을 잘 전달합니다.

  • dojo() View Helper: 페이지에 Dojo를 사용가능하게 하는 것은 단순히 dojo.js 스크립트를 로딩하는 것만큼 사소하진 않습니다 -- AOL CDN 이나 로컬 경로 중 어디에서 읽어들일 것인지 선택해야하고, dojo 추가기능인 dijit나 dojox 모듈을 읽어들이려 하거나 필요할 수도 있고, 커스텀 모듈과 경로를 지정해야하며, onLoad()에서 실행할 코드도 정해주고, dijits를 꾸밀 스타일시트도 정해야 합니다. 이들 위에서, 이 정보는 페이지에서 페이지에서 변경될 수 있고, 일부 페이지에서만 필요해질 수도 있습니다. dojo() view helper는 placeholder 로서 작동하고, 상기 작업을 용이하게 할 뿐만 아니라 페이지에서 필요한 style과 script 엘리먼트의 렌더링을 관리합니다.
  • Form 엘리먼트 구현: 개발자들이 javascript와 ajax 툴킷을 제대로 사용하는 곳 중 하나는 폼form입니다. 특히, 다양한 형태의 폼 입력 컨트롤들은 JavaScript 만이 제공할 수 있는 개선되고 풍부한 사용자 인터페이스의 이점을 취할 수 있습니다: 달력 날짜 선택기, 시간 선택기, 기타 등등. 게다가, 많은 개발자들은 사용자에게 즉각적인 유효성 검사 피드백을 제공하기 위해 (서버를 거치는 대신) 클라이언트측 유효성 검사를 사용하는 것을 좋아합니다. 우리는 대부분의 관련된 사용문제를 해결할 수 있을 것 같은 폼 엘리먼트의 소그룹을 정의하고, Zend_Form과 활용될 수 있는 Dojo 특화 버전을 작성할 것입니다(중요사항 하나: Zend_Form의 설계는 이미 Dojo와 잘 작동하도록 되어있습니다. 간단히 적절한 엘리먼트 속성attribute를 설정하는 것만으로도 많은 위젯과 클라이언트측 유효성검사를 사용할 수 있습니다.)
  • dojo.data 호환성: dojo.data는 표준 스토리지 인터페이스를 정의합니다; 이 포맷으로 데이터를 제공하는 서비스는 사용자 인터페이스를 위한 고유연성과 동적 컨텐트를 제공하기 위한 다양한 Dojo 기능에서 사용됩니다. 우리는 XmlHttpRequest에 응답하는 dojo.data 호환 자료를 작성할 컴포넌트를 작성할 것입니다; 간단히 데이터를 사용하고 그것과 관련된 메타데이터를 제공하기만 하면 됩니다.
물론, Dojo 대신 다른 Ajax 라이브러리도 Zend 프레임웍과 함께 사용할 수 있습니다. 이번 일이 어떻게 해서 가능했을까요?

두 개의 프로젝트들과 커뮤니티들 사이에는 시너지와 유사성이 많습니다:

  • 라이센스와 IP: 두 프로젝트 모두 매우 비즈니스 친화적입니다.
  • 설계 유사성: "use-at-will(의도할 때 사용)" 아키텍처에 대한 강력한 강조 등의 유사한 철학을 가지고 있습니다.
  • 둘 다 JSON 포맷을 강력히 사용합니다
  • 종합 Ajax 솔루션: Dojo에 다 있습니다
  • 표준: "Dojo는 공개된 표준을 구현할 뿐 아니라 표준을 이끕니다"
  • 커뮤니티와 지원: 강력한 커뮤니티와 그에 대한 지원
에.. 다음은 JSON-RPC 데모의 일부 코드입니다:
[code:js]
<h2>Dojo JSON-RPC Demo</h2>
<input name="foo" type="button" value="Demo" onClick="demoRpc()"/>
<?
$this->dojo()->setLocalPath('/js/dojo/dojo.js')
             ->addStyleSheetModule('dijit.themes.tundra')
             ->requireModule('dojo.rpc.JsonService');
$this->headScript()->captureStart(); ?>
function demoRpc()
{
    var myObject = new dojo.rpc.JsonService('/json-rpc.php');
    console.log(myObject.bar());
}
<? $this->headScript()->captureEnd() ?>

from Dojo and Zend Framework Integration Released on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Eugene Lazutkin씨가 JavaScript에서 AOP를 진지하게 구현한 dojox.lang.aspect 에 대한 글을 썼습니다.

Dion씨는 AOSD(AOP 소프트웨어 컨퍼런스)에 참석해서 화면의 AOP에 흥분했던 사람으로서, 누군가 JavaScript에서 이런 작업을 해주었다는 것이 마음에 들었다고 합니다.

물론, 모든 것을 가로채야 하지만, JavaScript와 같은 동적 언어에서는 메소드를 래핑하기만 하면 되는 쉬운 일입니다. 하지만 AOP의 힘(그리고 복잡함!)은 jointpoints, pointcuts 그리고 웜홀의 세계에 있는 것이죠 :)

여기에는, 동적언어가 그닥 도움이 되지 못합니다. Eugene씨는 더 연구를 하셔서 피보나치 수열을 예제로 작성하셨습니다:

[code:js]
var fib = new Fibonacci;
 
// we will time the calculations
aop.advise(fib, "calculate", aop.timer("fib");
 
fib.calculate(15);
fib.setOrder(0);
fib.calculate(15);
 
// now lets use memoization
aop.advise(fib, "calculate", aop.memoizer());
aop.advise(fib, /^set/, aop.memoizerGuard("calculate"));
 
fib.setOrder(1); // set order back to 1 - regular Fibonacci numbers
fib.calculate(15);
fib.setOrder(0);

Memoization 의 결과는 이렇습니다:

제 컴퓨터의 Firefox 3 에서 15의 1-order(정규) 피보나치 숫자의 계산(987)은 momoization 없이는 ~48ms가 걸렸고 momoization을 하고 난 후에는 0-1ms가 걸렸습니다. 15의 0-order 피보나치 숫자의 계산(32768)은 memoization을 하지 않은 상태에서는 ~1155ms가 걸렸고, 이후에는 0-1ms 가 걸렸습니다. 보시다시피 이 기술은 그리 많은 시간을 들이지 않고도 엄청난 효과를 거둘 수 있습니다.

Java와 마찬가지로, 우리는 날마다 pointcuts에 대해 걱정하는 개발자를 보지 않아도 되게 되었습니다. 대신, 현존하는 것을 사용하는 것만으로도 매우 유용할 것입니다.

from dojox.lang.aspect : More than just interception on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Spring JavaScript 모듈을 탑재한 Spring Web Flow 2.0이 릴리스 되었습니다.

다음은 Ajax 이벤트를 호출하는 onclick wrapper 예제입니다:

[code:js]
<a id="prevResultsLink" href="search?searchString=${searchCriteria.searchString}&page=${searchCriteria.page - 1}">Previous Results</a>
<script type="text/javascript">
    Spring.addDecoration(new Spring.AjaxEventDecoration({
        elementId: "prevResultsLink",
        event: "onclick",
        params: { fragments: "body" }
    }));
</script>
Dion씨가 SpringSource의 Keith Donald씨와 Jeremy Grelle씨를 만나 Web 티어에서 진행되는 것들에 대해 이야기를 나누었다고 합니다. 코어 웹 프레임웍(Sprint MVC)에서 Spring Webflow 컨트롤러 엔진으로, 새로운 Spring JS 모듈로 여러 부분이 이동하고 있다고 합니다.

Spring JS를 이용하면 보다 쉽게 Java 만으로 멋진 Ajax 동작들을 작성할 수 있다고 합니다. 따로 사용할 수도 있고, 당연한 말이지만 Spring 프레임웍과도 잘 연동된다고 합니다.

from Spring WebFlow 2.0; JavaScript Module Released on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0

사용자 삽입 이미지
글을 읽기 전에...

이 글에서 영속성, 영구적인 등으로 쓰인 단어는 persistent 입니다. 영구 저장소(persistent storage)라는 것은 비휘발성 메모리로 저장된 데이터가 영구적으로 보존되는 것을 말합니다. 같은 단어를 장기보존 스토리지(혹은 저장소), 영구 스토리지 등으로 표현하기도 합니다.

본문 내용

Sitepen의 Kris Zyp씨가 Persevere를 릴리스했습니다:

Persevere 프로젝트는 HTTP REST, JSON-RPC, JSONPath, HTTP 채널의 직관적인 표준 기반의 JSON 인테페이스를 사용한 분산 컴퓨팅과 영속성을 위한 오픈소스 도구 모음입니다. Persevere 프로젝트의 핵심은 Persevere 서버입니다. Persevere 서버는 Persevere JavaScript 클라이언트를 포함하고 있지만 표준 기반 인터페이스는 어느 프레임웍이나 클라이언트와도 사용할 수 있도록 하고 있습니다.

Persevere 서버는 객체 저장 엔진이자 인터랙티브한 서버측 JavaScript 환경에서 동적인 JSON 데이터의 영구적인 데이터 저장소를 제공해주는 응용프로그램 서버(Java/Rhino 상에서 실행)입니다. 현재는 베타판이며, JavaScript, Dojo, Ajax 개발자들에게 흥미로울만한 매우 충실한 기능들을 자랑하고 있습니다

다음은 JavaScript로 만들어진 자동-동기화를 하는 실시간 Persevere 데이터 그리드의 데모입니다:

[code:js]
var persevereStores = dojox.data.PersevereStore.getStores(); // persevere stores are auto-generated
customerStore = persevereStores.Customer; // and get the Customer store
dataModel = new dojox.grid._data.DojoData(null,null,{/*rowsPerPage:12,*/store:customerStore,query:"",clientSort:true});

addItem = function() {
        // need to specify the parent because the customerStore is hierarchical and the grid model will
        // call newItem without any info who the parent
        //customerStore.parentId="0.examples.customers";
        grid.addRow({firstName: "firstName", lastName:"lastName",created:dojo.date.stamp.toISOString(new Date,{zulu:true})});
}

from Persevere: JSON Storage / Application Server on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Live Chess
Piotr Dachtera씨가 자신이 예전에 만들었던 체스를 Comet을 이용해 보다 확장성있도록 만들었습니다. 클라이언트 사이드에는 dojox.cometd 를 사용했고 서버로는 Jetty를 사용했습니다. Dylan씨가 이에 대한 글을 작성했습니다.

Mathieu Nouzareth씨는 역시 Jetty와 Comet 기술을 사용한 Flash 기반 게임 플랫폼인 Cafe.com에 대한 글을 코멘트에 남겼습니다.

from Live Chess with Comet on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0
Craig Riecke, Rawld Gill, Alex Russell 이 분들이 Pragmatic Programmers와 함께 Mastering Dojo 베타 책의 일부(확인해보시면 알겠지만, 정말 '일부'입니다)를 Ajaxian 커뮤니티에 공개했습니다.

무엇을 얻을 수 있을까요?

첫째는, Dojo DOM API에 대해 자세히 알게 되었다는 것입니다. 구체적으로, 저자는 인터뷰 질문 예제를 주고 DOM을 직접 조작해보이면서 우리가 이 과제를 해결할 수 있도록 했습니다. 우리는 dojo.query와 클래스 추가기능를 이용한 코드를 보게 되었습니다:
[code:js]
function layout1(){
  dojo.addClass(dojo.query("form> p")[0], "formTitle");
  dojo.query("div.questions p").forEach(function(node, i) {
    dojo.addClass(node, (i % 2) ? "lightBand" : "darkBand");
  });
}
그 뒤 dojo.query의 복잡한 부분과 그 이상을 심도있게 파고 들었습니다.

두번째는, Dojo와 함께 등장한 서로 다른 두가지 기능 - dojo.data와 dojox.Grid - 을 살펴볼 수 있는 Dojo라는 이름의 Ajax를 알 수 있게 되었습니다. 해당 챕터는 이런 기능들을 이용해서  위시 리스트를 작성했습니다.

목차에서 보듯 책에는 훨씬 더 많은 내용이 있습니다. Dojo 커뮤니티에 존재하는 아주 많은 다양한 주제들을 400 페이지에 다 망라해놓았습니다.

이를 공유해 준 저자들과 편집자께 감사드립니다.

from Exclusive Mastering Dojo Chapters on Ajaxian
TAG books, Dojo,
Posted by 행복한고니 트랙백 0 : 댓글 0
이번에는 Dojo Toolkit과 Sitepen의 Alex Russell 씨입니다. Dojo를 이용해 모두를 위한 환상적이고 반응이 빠른 응용프로그램들을 만들어내는 방법에 대해 설명했습니다. 모두를 위해 같은 팀의 Becky Gibson씨와 그 밖의 다른 사람들이 수고해주었습니다.


Ajax Pioneer: Alex Russell of the Dojo Toolkit from Dion Almaer on Vimeo.

Previously on Ajax Pioneer Week...

from Ajax Pioneer Week: Alex Russell of Dojo on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Mike Wilcox씨가 Open Screen 프로젝트에 대한 존경의 표시로 Dojo 메소드를 Flash로 포팅하는 연재글을 쓰기 시작했습니다(Dion씨는 Adobe의 방향은 칭찬하지만, 라이센스 등이 명확해지기 전까지는 사용하지 않을 생각이라고 합니다).

첫번째 글에서 Mike 씨는 dojo.hitch를 ActionScript로 포팅했습니다:

[code:js]
_global.lang = {
        hitch: function(scope, method){
                if(!method){
                        method = scope;
                        scope = _global;
                }
                var args;
                if(arguments.length>2){
                        args = arguments;
                        args.shift();
                        args.shift();
                }
                if(typeof(method) == "string"){
                        return  function(){ scope[method].apply(scope, args) };
                }
                return function(){ method.apply(scope, args) };
        }
}

두번째 글에서는 dojo.connect() 지원을 추가했습니다:
[code:js]
_global.lang = {
        __conListeners:{},
        __id:0,
        connect: function(source, event, target, callback){
                var hitched = this._hitch(target, callback);
                var listener = new Object();
                listener[event] = function(args){
                        hitched();
                }
                if(!source.broadcasters) {
                        source.broadcasters = {};
                        AsBroadcaster.initialize(source)
                }
                source.addListener(listener);
                if(!source.broadcasters[event]){
                        source[event] = function(){
                                source.broadcastMessage(event, arguments);
                        }
                        source.broadcasters[event] = true;
                }
                var id = "connect_"+this.__id++;
                this.__conListeners[id] = {listener:listener, source:source};
                return id;
        }
        disconnect: function(id){
                var con = this.__conListeners[id];
                if(con){
                        con.source.removeListener(con.listener);
                        con = null;
                }
        }
}

from Porting Dojo Methods to Flash on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
DojoDir

Sam Foster씨가 Dojo를 이용해 키보드 단축키를 지원하는 디렉토리 리스트 예제를 만들었습니다.

탭키 혹은 마우스 클릭으로 우측 상단에 있는 박스로 이동해, 목록을 필터링할 수 있습니다

Dojo 응용프로그램들이 어떤 식으로 작동하는지 보여주는 좋은 예제인 것 같습니다:

[code:xml]
<div style="display:none" jsId="linksStore"
        dojoType="dojo.data.ItemFileWriteStore">
        <script type="dojo/method" event="preamble" args="params">
                params.data = {
                        identifier: "id",
                        items: []
                }
        </script>
</div>

from Usable Directory Listings with Dojo on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Simon Willison씨가 data- 속성을 통해 HTML 엘리먼트에 필요한 속성을 추가할 수 있는 방법으로 논의되는 HTML 5 스펙의 일부에 대해 글을 썼습니다.

예를 들어, 게임 상의의 우주선이라고 하면 이렇게 표현할 수 있습니다:

[code:Xml]
<div class="spaceship" data-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.id].fire()">
  Fire
 </button>
</div>

Simon 씨는  "이것은 설정값을 HTML 컨텐트로 저장할 장소가 마땅찮은 겸손한(unobtrusive) JavaScript에서 매우 유용하게 사용할 수 있습니다. 이는 또한 Dojo가 Dojo 위젯임을 표시하기 위해 커스텀 속성을 추가할 수 있는 승인된 방법을 가지게 됐다는 것을 의미합니다." 라는 사실을 지적했습니다.

from Embed your data- in HTML 5 on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0

from DOH, let me test my code! on Ajaxian

Dustin Machi 씨가 JavaScript 테스트 프레임웍인 DOH, the Dojo Objective Harness 에 대해 썼습니다.

Dojo 응용프로그램과 사용가능하지만 Dojo가 없어도 가능합니다.

테스트를 하려면 몇가지 패턴을 따라주어야 하는데, Dustin 씨가 여러분이 따라 할 수 있도록 문서를 작성했습니다.

HTML에 이 페이지를 전환하는 코드를 넣으면 끝납니다:

[code:xml]
<meta http-equiv="REFRESH" content="0;
    url=../../../util/doh/runner.html?testModule=company.tests.foo
          &registerModulePath=company,../../company">

이런 식으로 테스트를 등록할 수 있습니다:
[code:js]
doh.register("project.tests.TestGroupA",
       [
               {
                       name: "My Function Test [_myfunc()]",
                       timeout: 4000,
                       runTest: function(){
                              var result = _myFunc("a", "b");
                              doh.assertEqual("Foo", result);
                            }
                 }
   ]
);
Posted by 행복한고니 트랙백 0 : 댓글 0
from Dojo XHR Plugins; How do you want your XHR today? on Ajaxian

Neil Roberts씨가 Dojo를 사용한 XHR 플러그인과 어떻게 시스템을 확장할 수 있는지에 대해 글을 썼습니다.

여러분이 dojo.xhrGet을 봤다면, "받아들일수 있는 값이: 텍스트(기본값), json, json-comment-optional, json-comment-filtered, javascript, xml"과 같다는 것을 알게될 것입니다, 하지만:

여러분이 모를만한 것은 handleAs 파라미터가 단지 어떤 플러그인을 사용할지 정하는 방법에 불과하다는 것입니다. 이 플러그인들이 어디있는지, 어떻게 동작하는지, 어떻게 여러분의 프로젝트에 적용될 수 있는지를 알면 반복작업을 쉽게 보다 적은 에러로 수행할 수 있습니다.

그는 json 스타일 콜백에 피기백 방식을 사용했고, 쿼리 할 때에 대한 훅을 추가했습니다. 업데이트된 객체가 있다면 JSON 방식으로 되돌아올테고, 그러면 추가로 원격 호출을 하지 않아도 그들을 다룰 수가 있습니다:

[code:js]
dojo._contentHandlers.json = (function(old){
  return function(xhr){
    var json = old(xhr);
    if(json.updated){
      processUpdatedObjects(json.updated);
      delete json.updated;
    }
    return json;
  }
})(dojo._contentHandlers.json);

다음으로, Neil은 노드를 자동 업데이트하는 시스템을 작성했습니다:
[code:js]
dojo.xhrGet({
  url: "node-updates.php",
  handleAs: "node-update-server"
});

dojo.xhrGet({
  url: "node-content.php?node=sidebar",
  node: "sidebar",
  handleAs: "node-update"
});

참, 쉽죠:
[code:js]
dojo.mixin(dojo._contentHandlers, {
  "node-update-server": function(xhr){
    var json = dojo._contentHandlers.json(xhr);
    dojo.forEach(json.updates, function(update){
      var node = dojo.byId(update.id);
      if(node){
        node.innerHTML = update.html;
      }
    });
  },
  "node-update": function(xhr){
    var node = dojo.byId(xhr.args.node);
    if(node){
      node.innerHTML = dojo._contentHandlers.text(xhr);
    }
  }
});

Dojo 도 꽤 유연한 것 같습니다. 원하는 데이터 형태를 다루기 위해 간단히 새로운 handleAs 타입을 추가하기만 하면 되네요.
Posted by 행복한고니 트랙백 0 : 댓글 0