Flickr Browser

Flickr Browser 데모(출처: Ajaxian)


Jeff Watkins는 Cocoa 데이터 바인딩 모델이 너무 좋은 나머지 결국 이를 웹으로 옮기는 프로젝트를 시작했고 3년만에 결과물이 나왔습니다: Coherent.

몇 가지 데모를 볼 수 있는데, Flickr Browser 나 애플 스토어에서 상품 옵션 선택할 때 사용하는 Laptop configurator 등이 있습니다.

문서화도 되어 있어서 어떤 식으로 동작하는지 배울 수 있습니다. 속성과 바인딩, 위젯 작성법, and API에 대한 상세설명과 같은 자습서도 있습니다.

대부분의 작업은 HTML의 속성과 JavaScript API를 통해서 이루어집니다. 예를 들어, 이런 식으로 바인딩 할 수 있습니다:
[code:js]
userController.bindNameToKeyPath("userId", "search.content.nsid");

그러면 다음과 같은 HTML 에서 바인딩이 일어나게 되죠.
[code:xml]
<div id="demo">
<div id="userSearch">
    <h1><span>Flickr Browser</span></h1>
    <label for="userName">Flickr Username:</label>
    <input id="userName" type="text" valueKeyPath="search.parameters.username"/>
</div>

<div id="userInfo">
    <div class="queryIndicator" visibleKeyPath="user.queryInProgress">
    <img src="images/spinner.gif" width="16" height="16"/> Loading user profile…
    </div>

    <img class="buddyIcon" srcKeyPath="user.iconUrl"/>
    <h1 textKeyPath="user.content.realname._content">Real Name</h1>
    <p textKeyPath="user.content.location._content">Location</p>
</div>

<div id="userTagsList">
    <div class="queryIndicator" visibleKeyPath="userTags.queryInProgress">
    <img src="images/spinner.gif" width="16" height="16"/> Loading tags…
    </div>
</div>

from Coherent: Cocoa Databinding for Ajax on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요