Sencha Touch Charts breathes new life into your data and utilizes
hardware acceleration for optimized performance. With natural gestures
in Sencha Touch Charts, visualizing and understanding complex datasets
is effortless. Pinch-to-zoom, swipe-to-pan across data, and tap for deep
dives. Data flows come to life with every tap, pinch, and swipe.
Built with Web Standards
Sencha Touch Charts uses HTML5 capabilities like Canvas elements for
drawing and CSS3 for styling, delivering the highest performance and
richest experience in today’s mobile web browsers. All touch events use
Sencha Touch’s sophisticated events and gesture system which is
optimized for modern mobile web browers.
Built on top of our industry-leading mobile web app framework, Sencha Touch Charts is now available to buy
as a commercially licensed, $99 add-on to Sencha Touch. Open Source
Sencha Touch developers will be able to use Sencha Touch Charts free of
charge under the terms of the GPLv3 license. Sencha Touch Charts is
compatible with Sencha Touch 1.1 and above.
최근들어 웹어플리케이션의 사용자 경험(UX)는 점점 더 화려하고 풍부하게 발전되어 왔습니다. GMail, Meebo 그리고 Bespin같
은 브라우저 안에서 동작하는 어플리케이션들은 미래의 웹이 어떻게 보여지고 느껴질지에 대한 그림을 보여주고 있습니다. 좋은
사용자경험(UX)을 완성하는데 있어 중요한 요소중에 하나가 사용자의 동작에 빠르게 반응하는 어플리케이션을 만드는 것입니다.
사용자는 어플리케이션이 한동안 어떤일을 수행하면서 사용자의 반응에 응답하지 못하고 멈춰있는 동안의 기다림을 싫어하기 때문이죠.
자바스크립트 프로그래밍 언어는 현대 클라이언트 기반 웹 어플리케이션의 핵심이라고 할 수 있습니다. 자바스크립트와 DOM은
본래 단일 스레드로 동작합니다. 이것은 자바스크립트가 어떤 특정 시점에 오직 하나의 일만 수행할 수 있다는 의미입니다.
32개의 코어를 가지고 있는 컴퓨터라 할지라도 오래 걸리는 연산을 수행할때 여전히 그 중의 하나의 코어만 사용된다는 것입니다.
예를 들어, 달로 가는 최적의 궤적을 계산하여 화면에 그 궤적을 애니메이션으로 보여주는 어플리케이션에서 궤적을 계산하는 동안은
동시에 그 궤적의 애니메이션을 화면상에 보여줄 수 없다는 것입니다. 그뿐만 아니라 계산 도중에는 마우스 클릭이나 키보드 입력에
전혀 반응 할 수도 없는 것이죠.
동시성(Concurrency)
동시성은 집중적인 계산을 수행중에도 반응성을 유지하기 위한 방법으로 사용되어 지는 최근 현대 프로그래밍 언어의 한 부분입니다. 예전에는 종종 스레드를 사용하여 동시성을 처리하였습니다. 그러나 스레드의 경우 다수의 다른 스레드에서 동시에 같은 데이타를 처리할때 매우 난해한 오류나 복잡한 현상을 자주 일이켜 프로그래머로 하여금 프로그램 흐름의 이해를 어렵게 만들기도 합니다.
WHATWG으로 부터 추천되고
Firefox 3.5에 추가된 WebWorkers는 멀티스레딩을 이용한 프로그램에서 야기되던 문제들 없이도 동시성을 자바스크립트
어플리케이션에서 동작하도록 해줍니다. 사용법은 쉽습니다. 단지 Worker 인터페이스를 사용하기만 하면 됩니다.
아래의 예제에서 worker.js 파일이 로드되고 코드를 실행하기 위해 새로운 스레드가 생성될 것입니다.
// Start worker from file "worker.js"var worker =new Worker("worker.js");
주 화면 스레드와 workers 사이의 정보교환은 postMessage 함수를 이용하여 정보를 전달함으로 이루어집니다.
postMessage는 다수의 윈도우간의 정보교환을 목적으로 Firefox3에 추가되었습니다. worker에서 페이지로 정보를
보내기 위해서는 단순히 메시지를 보내기만 하면 됩니다.
// Send a message back to the main UI thread
postMessage("Hello Page!");
worker로 부터 메시지를 받기 위해서는 worker 오브젝트에 “onmessage” 콜백을 등록해야합니다. 여기에 콜백
함수로 전달되는 이벤트 데이타를 경고창으로 보여줍니다. 이 경우 “event.data”는 위 예제에서 보내진 메시지인 “Hello
Page!” 문자를 가지게 됩니다.
worker.onmessage=function(event){alert(event.data);// Send a message to the worker
worker.postMessage("Hello Worker");}
worker에 메세지를 전달하기 위해서 worker 오브젝트의 postMessage를 호출합니다. worker안에서 메세지를
받기 위해서 onmessage 함수를 정의하면 메세지가 worker로 전달될때마다 이 함수가 불리게됩니다.
에러 핸들링
worker에서 발생할 수 있는 실행 오류를 처리할 수 있는 방법으로 두가지가 있습니다. 첫째는 worker안에
onerror 함수를 설정하는 것과 둘째로 worker 외부에서 onerror 핸들러를 설정하여 오류를 처리하는 것입니다.
event.preventDefault() 함수는 기본 동작을 수행하지 않도록 막는 역할을 합니다. 예를 들어 오류가
발생했을때 유저들에게 오류 메시지를 보여주거나 최소한 오류 메세지 콘솔에 보여주는 기본 동작을 막는 것입니다. 여기 예제에서는
기본 동작 수행 대신 경고만 하는 것을 보여줍니다.
아무것도 공유하지 않음
workers는 그와 연계되어 있는 페이지나 다른 workers들과 상태값을 전혀 공유하지 않습니다. 그들이 서로 소통할 수
있는 유일한 방법은 postMessage를 이용하는 것입니다. 또한 workers는 DOM에 대한 접근 권한이 없어서 직접
웹페이지를 조작할 수가 없습니다. 따라서 여러 workers가 동시에 같은 데이터를 조작하려고 할때도 데이터 무결성에는 전혀
문제의 위험이 없다고 할 수 있습니다.
workers를 이용한 표준 설치는 유저 이벤트를 처리하는 여러개의 자바스크립트 응용 페이지들로 구성되어 있을 수 있습니다.
worker에게 집중적인 계산을 하라는 메세지가 발생하면 worker는 계산을 시작합니다. 그렇더라도 페이지의 스크립트는 바로
중지하고 다른 유저 이벤트들을 들을 수 있게 됩니다. worker가 계산을 마무리하는 즉시 결과값을 표시하는 페이지에 결과 값
반환 메세지를 보낼 수 있습니다.
스크립트가 수행을 하는데 오랜 시간이 걸릴때면 브라우저가 보여주곤 했던 무반응 스크립트에 대한 경고는 web workers를 사용할 경우 옛말이나 다름없게 되었습니다.
피보나치 예제
다음은 0부터 99까지 피보나치 수를 백그라운드에서 계산을 하는 worker의 예제입니다. 사실 굉장히 비효율적인 방법으로
비교적 큰 숫자(30보다 큰)의 피보나치 숫자를 계산을 할 경우 시간이 매우 오래걸리기 때문에 스크립트가 당신의 컴퓨터에서 절대
끝나지 않을 수도 있습니다.(아니면 스택 오버플로우로 멈춰버리거나) 그러나 worker안에서 이를 수행할 경우 메인 웹 페이지의
반응성에는 전혀 영향이 없습니다. 따라서 당신은 다음 숫자를 기다리는동안 약간의 재미요소로 복잡한 애니메이션도 그릴 수 있습니다.
이 HTML 페이지는 “fib-worker.js” 파일에 worker를 실행 시키는 스크립트를 포함하고 있습니다. worker에서 나오는 메시지는 console.log를 통해 브라우저의 콘솔창에 표시됩니다.
<!DOCTYPE html><html><head><title>Web Worker API Demo</title><scripttype="text/javascript">
var worker = new Worker("fib-worker.js");
worker.onmessage = function (event) {
console.log(event.data.index +" -> " + event.data.value)
}
</script></head><body></body></html>
worker가 구현되어 있는 자바스크립트는 피보나치 숫자를 계산하고 결과를 페이지에 전송하는 루틴을 포함하고 있습니다.
// File fib-worker.jsfunction fib(n){return n <2? n : fib(n-1)+ fib(n-2);}for(var i =0; i <100;++i){
postMessage({
index: i,
value: fib(i)})}
위에 예제에서 우리는 postMessage로 복잡한 오브젝트를 전달할 수 있는 것을 볼 수 있습니다. 이 오브젝트들은 JSON을 통해 전달될 수 있는 모든 것을 포함할 수 있습니다. 이는 함수는 worker의 경계를 가로질러 전달될 수 없으며 오브젝트는 reference가 아닌 value에 의해 전달된다는 뜻입니다.
Worker APIs
worker는 importScripts라는 함수를 지원합니다. 이것은 더 많은 소스 파일을 worker에 로드할때 사용할 수 있습니다.
여러 파라미터를 함수에 전달할때 스크립트는 동시에 다운로드 되어지나 실행은 명시된 순서에 의해 되어집니다. 이 함수는 모든 스크립트가 다운로드되고 실행되기 전까지 리턴하지 않습니다.
여기서 우리는 문자열로부터 SHA-1 해쉬 합을 계산하는 외부 자바스크립트를 로드하여 AJAX 요청으로 부터 해쉬 결과를 얻는데 사용합니다. 또한 onmessage 이벤트를 통해 전달되는 URL 정보를 받기 위해 표준 XMLHttpRequest
객체를 사용하는데 흥미로운 점은 worker 스스로가 페이지 렌더링을 함에 있어 비동기적으로 동작하므로 굳이 AJAX 요청을
비동기적으로 처리하는 것에 대한 걱정을 할 필요가 없다는 것입니다. 그러므로 HTTP 요청을 위한 약간의 기다림이 크게 문제
되지는 않을 것입니다.
위 예제에서 본것 처럼 workers는 AJAX 요청을 위해 XMLHttpRequest를 사용할 수 있으며 web storage API를 사용하여 클라이언트의 데이타베이스를 접근할 수도 있습니다. 여기서 사용된 API들은 일반 자바스크립트의 사용법과 거의 동일할 것입니다.
현재 브라우저에 대한 정보를 확인할 수 있는 객체로 잘 알려진 navigator object처럼 일정 시간 이후나 특정 시간 간격으로 코드를 실행 할 수 있도록 하는 setTimeout, setInterval (그리고 clearTimeout과 clearInterval) 함수도 worker 안에서 사용이 가능합니다.
더 많은 API들은 이후에 추가될 것입니다.
브라우저 호환성
이 글을 쓰는 시점에는 Firefox 3.5가 post Message를 통해 복잡한 객체를 전달할 수 있는 기능을 지원하고 위
예시에 나와 있는 확장된 API들이 구현되어 있는 유일한 브라우저입니다. Safari 4는 Worker API 중에 매우
기본적인 것들만 구현되어 있습니다. 그 밖의 다른 브라우저는 일찍이 브라우저의 컨셉을 소개한 Google Gears를 통해 Worker 기능을 사용할 수 있습니다.
실 사용 예제
브라우저 기반의 소스 코드 에디터의 Bespin project 에서는 실시간 오류 검사 및 자동 완성 기능 등 CPU를 많이 사용하는 기능등을 worker를 이용해 성공적으로 구현하였습니다. 또한 Google Gears에 Worker API를 구현한 a shim 을 만들고 거기에 Safari 4에 빠져 있는 Worker 기능을 추가하였으며 postMessage 인터페이스 위에 transparent custom evnets를 사용하도록 하였습니다. 이 콤포넌트들은 후에 다른 프로젝트에서 사용할 수 있도록 단독 라이브러리 형태로 제공될 것입니다.
Web Workers는 정교한 어플리케이션을 위해 Open Web이 조금 더 강력한 플랫폼으로 자리 매김하는데 있어 중요한
역할을 할 것입니다. 왜냐하면 결국에 모든 것들은 자바 스크립트를 통해 처리되곤한느데 이런 스크립트가 web workers의
화려한 기능을 통해 클라이언트에서 쉽게 동작할 수 있기 때문입니다. 따라서 당장 오늘 당신의 어플리케이션에 이를 추가하여
사용자에게 조금 더 좋은 반응성과 즐거움을 느끼게 해주길 바랍니다.
네트워크에 접속 된 단말을 사용하는 경우, 단말의 부팅시 한번, LAN 접속시 한번, 서버 접속에 한번, 서버 상의 어플리케이션을 작동 시에 한번...... 이런식으로 몇번이고 패스워드와 ID를 입력하는 경우도 발생할 수 있다. 이러한 절차를 생략하고, 한번 인정되면 모든 유저인증을 생략 하도록 하는 기능이 싱글 사인온이다.
Windows NT나 UNIX에도 이전부터 도입되어 있던 기능이지만, 패스워드를 요구하는 Web사이트의 증가, 네트워크의 대규모화에 따라 최근 그 수요가 늘어나고 있다.
이러한 기능을 가지고 있는 어플리케이션도 발매되고 있지만, 어플리케이션이 패스워트 요구화면을 판단하여 등록된 ID와 패스워드를 대리 등록하는 수법이 쓰여지고 있다.
jQuery를 사용하면 페이지에 특정코드 스타일을 사용하게 되는데, 엘리먼트를 확장 집합의 형태로 표현하고 jQuery 커맨드나 커맨드체인을 확장 집합에 사용하는 코드 스타일을 자주 쓰게 된다. 물론 자신만의 코드를 작성할 때는 마음대로 코드를 작성할 수 있다.
자신만의 코드를 패턴화하여 jQuery 확장으로 만들면 좋은 이유는 사이트 전체에 일관된 코드 스타일을 유지하는데 도움을 주고, 재사용이 가능하며, jQuery 가 제공하는 기반코드를 확용할 수 있다.
플러그인이 다른 jQuery 플러그인이나 자바스크립트 라이브러리와 충돌하지 않고 잘 동작하는지가 확실하게 보장되기 위해 알려진 일반적인 지침을 사용한다.
이름을 충돌하지 않도록 만드는 방법은 * 접두어로 jquery. 를 사용한다. * 이어서 플러그인 이름을 적는다. * .js 로 파일 이름을 끝맺는다. 예를 들어서 jquery.ngio.js
그리고, jQuery 대신 $ 를 사용하는 편이 훨씬 편한데, 충돌을 피하기 위해 $ 대신 jQuery를 사용하는 것이다. 하지만 $ 쪽이 훨신 편리하기에 포기하고 싶지 않다. 그래서, $ 라는 매개변수를 정의한 함수에 jQuery를 전달하면 $는 함수 안에서 jQuery의 참조임이 보장된다.
(function($) { // // // 여시에 플러그인을 정의한다. // })(jQuery);'
복잡한 매개변수 목록을 단순하게 만들기. 플러그인은 대부분 매개변수를 몇 개만 요구할 정도로 단순하다. 선택적인 매개변수가 생략되면 적절한 기본값이 제공되며,매개변수가 생략되면 매개변수의 순서에 내포된의미도 변경된다.
function complex(p1,p2,p3,p4,p5){ 이 함수는 매개변수가 5개인데, 이 중에 첫 매개변수를 제외한 모든 매개변수가 선택사항일 경우, 선택적인 매개변수가 너무 많다면 매개변수가 생략되었을 때 호출자의 의도를 합리적으로 추측하기가 어려워진다. 이 함수의 호출자가 마지막 매개변수만 생력했다면 마지막 선택적 인수를 null 값으로 확인할수 있기 때문에 문제되지 않지만, but 호출자가 p5를 명시하고 p2~p4 까지는 기본값으로 지정하고 싶은 경우엔 호출자는 생략된 매개변수 부분에 생략표시를 하고 다음과 같이 작성해야 한다. complex(valueA, null, null, null, valueB);
위와 같은 경우 null 과 매개변수의 순서를 주의깊게 봐야하는 단점이 있다. 일반적으로 이러한 문제를 해결하는 데 선택사항의 해기(option hash)를 많이 사용한다. 선택사항의 해시를 사용하면 선택적인 매개변수 정보를 이름/값 쌍 형식의 프로퍼티로 가지는 자바스크립트의 Object 인스턴스로 전달한다. complex( valueA, { p5:valueB } ); 또는 comlplex( valueA, { p3 : valueC, p5 : valueD } );
위와 같은 방법을 사용하면 null을 사용하여 생략된 매개변수를 표시할 필요가 없고 매개변수의 개수를 세지 않아도 된다. 필수 매개변수 하나와 선택항목을 여섯 개 가진 복잡한 함수 예제를 다시 살펴보자 complex(p1, options) 함수 내에서 $.extend() 유틸리티 함수를 사용해 기본값에 전달된 옵션을 합칠 수 있다. function comlex( p1, options ){ var settings = $.extend({ option1: defaultValue1 ,
option2: defaultValue2 ,
option3: defaultValue3 ,
option4: defaultValue4 ,
option5: defaultValue5 ,
option6: defaultValue6 , options || { } ); // 함수의 나머지 부분 } settings 변수는 페이지 개발자가 options 매개변수로 전달한 값과 기본값을 합친 값을 가진다. 주목할 점은 ||{}를 사용하여 options 객체가 null이거나 undefined 인지를 확인하고 있다는 것이다. 만약 options 변수가 false라면 (null과 undefined는 조건식에서 false이다) 빈 객체가 사용된다.
ex)
$.say = function(what) { alert( 'I say ' + what ); }
jQuery.say = function(what) { alert( 'I say ' + what ); }
(function($) { $.say = function(what) { alert( 'I say ' + what ); } }) (jQuery);
## 데이터를 조작하는 유틸 함수 만들기 고정폭으로 숫자 값을 표시하려면 숫자 값과 고정폭 필드(폭은 문자의 수로 정의)에 맞는 형식이 필요하다. 대개 이러함 형식은 값을 고정폭 필드에 우측 정렬시키고 값의 길이와 필드의 길이 차이를 조정하기 위해 채움 문자( fill character )로 앞 여백을 채운다.
함수 문법 : $.toFixedWidth $.toFixedWidth( value, length, fill ) : 매개변수 - value (Number) 형식화될 값 - length (Number) 결과 필드의 길이 - fill (String) 앞 단의 값을 채울 채움 문자, 생략하면 0을 사용한다.
(function($){ $.toFixedWidth = function( value, length, fill ){ var result = value.toString(); if( !fill ) fill = 0; var padding = length - result.length; if( padding < 0 ){ result = result.substr(-padding); } else{ for(var n = 0; n < padding; n++) result = fill + result; } return result; }; })(jQuery);
This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. What’s the benefit of using custom methods? Well, a few good reasons, really.
Implementation
Include the following in the <head> section of your HTML document(s):
Make sure you update the path to the respective files.
If you are already using the jQuery UI Draggable plugin (including the
UI core), simply omit the link to jquery.ui.draggable.js.
For IE to display the dialogs properly, you’ll also need
to make sure that you’re using Standards Mode. Just add the appropriate
DTD at the very top of your page:
This plugin utilizes the $.alerts namespace, but there are three built-in shortcut functions that make implementation easier:
jAlert(message, [title, callback])
jConfirm(message, [title, callback])
jPrompt(message, [value, title, callback])
Unlike their native JavaScript counterparts, you can use HTML in the message parameter. To specify a newline, you can use either \n or <br />.
These methods do not return the same values as confirm() and prompt(). You must access the resulting values using a callback function. (See the demo for more details.)
Compatibility
This plugin requires jQuery 1.2.6 or above and has been tested to work in the following browsers:
Internet Explorer 6 & 7
Firefox 2 & 3
Safari 3
Chrome
Opera 9
Known Issues
ENTER and ESC keys (to accept/cancel) don’t work in WebKit browsers
The draggable plugin doesn’t currently work in Opera
IE6 acts a bit differently as position: fixed isn’t supported.
jQuery는 HTML 문서, 보다 정확하게는 문서 개체 모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈 소스 자바스크립트 라이브러리이다.
jQuery는 오픈소스이고, 작으며(최소화버전 18KB), 웹브라우저 간의 차이를 표준화하고, 깔끔한 플러그인 아키텍처를 사용하여 경량으로 제작되었고, 플러그인의 자료실(http://plugin.jquery.com)은 광범위하며, 출시 이후 꾸준히 성장하고 있다. API는 인라인 코드 예제를 포함하여 완전하게 문서화되어 있고, 몇년동안이나 훌륭하게 유지되고 있으며, 상당히 친화적(다른 자바스크립트 라이브러리와의 충돌을 피하는 여러방법을 제공한다. ) 이다. 커뮤니티 지원은 여러 메일링 목록, IRC 채널 그리고 jQuery 커뮤니티의 수 많은 튜토리얼, 아티클, 그리고 플로그의 포스트들을 포함하기에 실제로 꽤 유용하다. 공개적으로 개발되고 있으며, jQuery 개발팀이 업데이트에 대한 출시를 두려워하지 않기 때문에 꾸준하고 일관적이다. 큰 조직(예를 들어 Microsoft, Dell, CBS...)에서 jQuery를 사용하는 것은 꾸준히 늘어날 것이며, 오래도록 지속될 것이다. 브라우저보다도 앞서 W3C의 명세를 수용하고 있다. 일례로 CSS3 셀렉터의 대부분을 지원한다. 최신 브라우저에서 개발을 위한 테스트 및 최적화를 수행하였다. 개발자뿐만 아니라 디자이너에게도 상당히 강력하다. 차별적이지 않다. 자바스크립트의 작성 방식을 바꾸고 있는 jQuery의 간결함, 방법론 그리고 철학은 그 자체가 표준이 되어가고 있다.
jQuery 철학 - "Write less, do more(적게 작성하고, 보다 많이 한다. )" * 몇몇 요소를 찾아서 (CSS Selector 를 이용해서) 그들로 어떤 작업을 수행한다.(jQuery 메서드를 사용하여). * 요소의 집합에 대해 여러 jQuery 메서드를 체인으로 연결한다. * jQuery 래퍼와 암시적인 반복을 사용한다.
Sencha Touch Charts breathes new life into your data and utilizes
hardware acceleration for optimized performance. With natural gestures
in Sencha Touch Charts, visualizing and understanding complex datasets
is effortless. Pinch-to-zoom, swipe-to-pan across data, and tap for deep
dives. Data flows come to life with every tap, pinch, and swipe.
Sencha Touch Charts uses HTML5 capabilities like Canvas elements for
drawing and CSS3 for styling, delivering the highest performance and
richest experience in today’s mobile web browsers. All touch events use
Sencha Touch’s sophisticated events and gesture system which is
optimized for modern mobile web browers.
Built on top of our industry-leading mobile web app framework, Sencha Touch Charts is now available to buy
as a commercially licensed, $99 add-on to Sencha Touch. Open Source
Sencha Touch developers will be able to use Sencha Touch Charts free of
charge under the terms of the GPLv3 license. Sencha Touch Charts is
compatible with Sencha Touch 1.1 and above.
(0) 
(0)
