Ajaxian에 모처럼 마음에 드는 프로그램이 나타났습니다. TinyMCE로 유명한 Moxiecode에서 Plupload라는 범용 업로드 컴포넌트를 릴리스 했습니다. 이 컴포넌트는 각종 플러그인을 활용해서 가능한 풍부한 사용자 경험을 만들어냅니다. HTML5, Google Gears, Silverlight, Flash, Yahoo! Browser Plus 등을 사용해서 드래그 & 드롭(탐색기에서 웹 브라우저로 바로 드래그하여 파일 업로드 가능), 업로드 프로그레스 바, 클라이언트 측 이미지 리사이즈가 가능합니다.
사용하는 백엔드에 따라서 기능이 조금 다를 수 있습니다. 모든 기능을 지원하는 백엔드는 Google Gears입니다.

CoreAPI는 다음과 같이 사용할 수 있습니다.
[code:js]
var uploader = new plupload.Uploader({         runtimes : 'gears,html5,flash,silverlight,browserplus',         browse_button : 'pickfiles',         max_file_size : '10mb',         resize : {width : 320, height : 240, quality : 90},         url : 'upload.php',         flash_swf_url : '/plupload/js/plupload.flash.swf',         silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',         filters : [                 {title : "Image files", extensions : "jpg,gif,png"},                 {title : "Zip files", extensions : "zip"}         ] });
jQuery의 Queue Widget을 사용했다고 합니다.

from Plupload: A rich upload exprerience on pluggable backends
Posted by 행복한고니 트랙백 0 : 댓글 0

Dan Vanderkam씨가 새 컴포넌트 dragtable발표하셨습니다:

지난 몇년간, Stuart Langridge씨의 sorttable 자바스크립트 라이브러리가 널리 사용되었습니다. 이유를 알기는 쉽습니다. 테이블 태그에 class=sortable를 추가하기만 하면 컬럼 헤더가 자동으로 정렬을 지원하도록 클릭할 수 있었기 때문입니다. 아주 쉽죠.

하지만 때때로 정렬 기능이 충분하지 않을 수 있습니다. 만약 테이블에서 한개나 두개의 컬럼에 포커스를 주고 싶을때는요? 클라이언트측 응용프로그램에서는 다룰 컬럼을 드래그해서 다음 칼럼으로 가져다 놓으면 됩니다. 왜 웹 응용프로그램에서는 안될까요?

dragtable로 들어가면. sorttable과 같이, 단순한 class 속성을 통해서도 HTML 테이블이 새 기술을 가지게 할 수 있습니다.

JavaScript를 불러온 후, 여러분은 단순히 class="draggable"을 추가할 수 있으며, class="draggable sortable"를 통해 둘 다 사용할 수도 있습니다.

테스트 베드open source project를 살펴보세요.

from dragtable: drag-and-drop reorderable columns for an HTML table
Posted by 행복한고니 트랙백 0 : 댓글 0
Ivan Bozhanov씨가 최근에 jQuery기반 트리 컴포넌트를 작성하셨습니다. 아시다시피 트리 컴포넌트는 꽤 많습니다. YUI!에도 멋지고 안정적인 트리 컨트롤이 있고, Dojo에도 있고, 공식적인 jQuery UI에는 없지만 트리 플러그인이 몇 개 있습니다. 예상하신대로, Ext JS에도 멋진 트리 컴포넌트가 있습니다.

jsTree의 몇 가지 부분을 살펴보겠습니다. 우선, 많은 트리에서 부족했던 몇 가지 기본 기능이 있습니다:
jstree는 사용자가 노드를 생성, 이름 변경, 재정렬, 이동, 삭제할 수 있습니다.
또한 다른 잘된 대부분의 수정가능한 트리 컴포넌트와 같이 풍부한 이벤트 API를 가지고 있습니다. 하지만 조금 이벤트 타입이 조금 더 세분화 되어있습니다:
여러분은 대부분의 액션에 콜백을 붙일 수 있습니다:
- onbeforechange
- onchange
- onrename
- onmove
- oncreate
- ondelete
- onopen
- onclose
그리고 노드의 "type"에 기반해 사용자가 할 수 있는 것과 그렇지 않은 것을 정하는 규칙을 줄 수도 있습니다. 즉, 개발자가 정의할 수 있는 노드의 유형에 기반해 노드의 이동, 선택, 삭제, 포커싱의 규칙을 정할 수 있습니다.

지역화에 대한 기능이 이미 내장되어있기 때문에, 트리를 생성할 때 지원할 서로 다른 언어에 대해 지정해줄 수 있습니다:
[code:js]
tree1.init($("#nested"), {
  data : "nested.xml",
  xsl : "nested.xsl",
  languages :  [ "en", "bg" ],
  // other stuff omitted
});
그리고는 XML 파일에 다음과 같이 표기하면 됩니다.
[code:xml]
<name lang="bg" icon="images/f.png">Начало</name>
<name lang="en" icon="images/f.png">Home</name>
XML 뿐만 아니라, JSON이나 인라인 HTML도 지원하며 XML 데이터 소스에 대한 XSL 변환까지 내장 기능으로 지원하고 있습니다.

안타깝게도, jsTree는 시각적인 표현면에서는 다른 트리들보다 부족해 보입니다. 하지만, jQuery 상에서 구현된 만큼 이에 대한 지원을 쉽게 추가할 수 있으리라고 예상합니다. 문서도 잘되어 있지만 아직 완전한 것은 아닌 것 같습니다.

from jsTree: jQuery-based JavaScript tree component
Posted by 행복한고니 트랙백 0 : 댓글 2
FancyUpload

FancyUpload 예제 - Queued Image Uploader


Harald Kirschner씨가 파일폼을 대체할 수 있으며 겸손하고(unobtrusive), 멀티파일 업로드는 물론 진행상태바 애니메이션도 되는 FancyUpload의 새 버전을 만들었습니다.

제목의 Swiff 라는 이름에서 알 수 있듯, MooTools 기반입니다. 다음과 같은 코드로 실행되는 Queue가 되는 사진 업로더 예제를 보실 수 있습니다:
[code:Js]
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
        'url': $('form-demo').action,
        'fieldName': 'photoupload',
        'path': '../../source/Swiff.Uploader.swf',
        'onLoad': function() {
                $('demo-status').removeClass('hide');
                $('demo-fallback').destroy();
        }
});

/**
 * Various interactions
 */
$('demo-browse-all').addEvent('click', function() {
        swiffy.browse();
        return false;
});

$('demo-browse-images').addEvent('click', function() {
        swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
        return false;
});

$('demo-clear').addEvent('click', function() {
        swiffy.removeFile();
        return false;
});

$('demo-upload').addEvent('click', function() {
        swiffy.upload();
        return false;
});

from FancyUpload: Swiff meets Ajax on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Stephen Celis 씨가 날짜 범위를 입력할 때, 날짜 선택기를 두 번 사용하는 것에 짜증이 났나봅니다. 그래서 드래그로 날짜를 선택할 수 있는 timeframe를 만들었습니다(제 성격하고 비슷하네요).

Prototype을 기반으로 작성되었고, 이런 식으로 사용할 수 있습니다:

[code:JScript]
new Timeframe('calendars', {
            startfield: 'start',
            endfield: 'end',
            previousbutton: 'previous',
            todaybutton: 'today',
            nextbutton: 'next',
            resetbutton: 'reset' });

그러면 이런 화면을 볼 수 있죠.
TimeFrame 데모

예제로 제 신혼여행 날짜를 선택해보았습니다 ;)

데모를 직접 테스트 해보실 수도 있습니다. 조금만 더 이뻤으면 좋았겠다라는 아쉬움은 살짝 드네요 ^^;;

from Timeframe: Prototype date range component on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

글쓴이가 작년 1월에 event driven application design in JavaScript 에 대해 쓴 적이 있는데, 이 아이디어에 영감을 얻은 Caridy Patiño씨가 Bubbling Library를 작성했습니다.

Caridy는 YUI 블로그에 버블링 라이브러리를 이용한 디커플링 방법을 작성했습니다.

본질적으로, 그의 해결책은 여러분이 응용프로그램 모듈에서 커스텀 이벤트를 가지고 실행순서나 가능성에 상관없이 이벤트를 살펴볼 수 있도록 합니다. 만약 이벤트의 순서에 종속적으로 된다면 단순하게 커스텀 이벤트를 사용하는 것은 꽤 곤란할 수도 있습니다. Caridy씨가 제안한 디커플링 해결책은 걱정거리를 하나 줄여주게 될 것입니다.

from Making application modules communicate with each other using Decoupling on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

JS 타임머신

2008.04.11 22:39 from [IT] Web Tech
from JS Time Machine on Ajaxian

Kristian Thornley 씨가 시간에 따른 데이터 변화를 보여주고자 맥 레오파드 JS 타임머신을  만들었습니다.

JS Time machine

JS Time Machine


Kristian씨는 말합니다. “현재는 패널의 데이터가 너무 상세하면 효과가 좀 버겁습니다.
제가 아마 onScale, preScale, postScale 등의 이벤트 핸들러를 만들게 될 것입니다. Livegrid와 약간 비슷하게 Ajax calls와 preload 데이터를 불러올 수 있는 것들이죠.”


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