jQuery로 작업하기, Part 2: 매개체로서의 JQuery: UI 프로젝트

소개

jQuery UI 프로젝트는 새롭고 흥미로운 jQuery 라이브러리로 내년에 빠르게 성장할 것으로 예상된다. 이 UI 라이브러리는 릴리스가 나올 때마다 개발자가 여러 가지 기능과 수정 사항을 추가하고 있기 때문에 jQuery 코어보다 훨씬 빠른 속도로 확장되고 있다. UI 패키지와 관련하여 흥미로운 점은 이 패키지가 실제로 사용자 인터페이스 관련 항목의 모음이고 이러한 항목을 3가지 주요 모듈로 분류할 수 있다는 것이다. 첫 번째는 웹 사이트에 바로 전개할 수 있도록 미리 만들어진 "스킨 교체형" 사용자 인터페이스를 가지고 있는 Widgets 모듈이고, 두 번째는 페이지 요소에 매우 쉽게 직관적으로 적용할 수 있는 Effects 모듈(예: 흔들기, 확대하기 등)이며, 세 번째는 페이지 요소에 대한 개선된 마우스 Interactions(예: 끌어서 놓기) 모듈이다. 마지막으로 UI 패키지는 미리 만들어진 위젯에 대한 테마를 사용자가 직접 작성할 수 있기 때문에 다운로드한 위젯을 사용자의 웹 사이트만을 위한 특별한 위젯으로 만들 수 있다.

jQuery UI 프로젝트의 매우 흥미로운 역사를 알면 프로젝트가 왜 이러한 방식으로 개발되었는지와 라이브러리의 세 부분이 매우 상이한 이유를 어느 정도 이해할 수 있을 것이다. 이 UI 라이브러리는 "처음"(jQuery의 관점에서 보면 수십년 전이라고도 할 수 있는 2007년말)에는 여러 다양한 플러그인의 모습으로 시작되었다. jQuery 커뮤니티의 우수한 개발자들의 노력으로 개발된 이들 플러그인은 모두 매우 유명했으며 다운로드해서 사용하던 사용자도 많았다. jQuery 커뮤니티에서는 이 유명한 플러그인들을 하나의 큰 플러그인으로 통합하여 jQuery 코어 코드의 공식 확장으로 발전시키기로 결정했다. 이러한 과정을 거쳐 2008년초에 UI 버전 1.5가 릴리스되었다. 하지만 이 통합 UI 플러그인이 릴리스된 이후 플러그인을 직접 사용해 본 개발자들로부터 좋기는 하지만 코드가 너무 어렵다는 의견(또는 불만)이 많이 나왔다. 이는 모든 플러그인의 개발자가 각기 달랐을 뿐 아니라 각 개발자의 스타일도 제각각이기 때문에 발생한 당연한 결과였다. 결국 모든 플러그인에 공통된 스타일을 적용하자는 결정이 내려졌으며 이후에 개발된 모든 1.5.x 릴리스는 이러한 노력의 산물이었다. UI 라이브러리의 역사에서 그 발자취를 확인할 수 있다.

하지만 UI 라이브러리의 1.6 버전이 릴리스될 때에는 모든 코드에 대한 리팩토링 작업이 완료되고 공통 스타일과 공통 코드가 적용된 UI 라이브러리를 보게 될 것이다. 하지만 이 릴리스에도 한 가지 단점이 있다. 그것은 바로 UI 팀에서 완벽한 1.6 버전을 릴리스하기 위해 몇 가지 위젯을 코드베이스에서 제외하기로 결정했다는 것이다. v1.5에 포함된 위젯의 수가 3개 더 많기는 하지만 v1.6을 사용하면 더 빠르고 쉽게 작업할 수 있을 것이다. 이러한 절충안이 좋은 결정이었는지에 대한 판단은 사용자에 의해 내려질 것이며 제외된 위젯의 경우 UI 라이브러리의 후속 릴리스에 다시 포함될 것으로 예상된다. (기록을 남기는 의미로 제외된 위젯을 언급하자면 autocomplete combobox, magnifier 및 spinner가 있었다.)

이제 UI 라이브러리의 역사를 모두 살펴보았으므로 이 라이브러리의 장점을 자세히 알아보자. 그러고 나면 jQuery 팀원들이 이 라이브러리에 왜 그렇게 열광하는지 그 이유를 알 수 있을 것이다. jQuery 팀의 일원인 필자 또한 이 라이브러리의 가능성에 열광하지 않을 수 없었다. AWT로 Java™ UI를 작업하던 시절을 기억할 수 있는 사람(또는 그 시절을 잊어버리기로 결정한 사람)이라면 Swing이 처음 모습을 드러내면서 완전히 새로운 위젯이 등장하고 사용자 인터페이스 작업이 실질적으로 한결 쉬워졌던 순간의 흥분을 기억할 수 있을 것이다. UI 라이브러리의 가능성은 Swing과 견주어도 결코 뒤떨어지지 않는다. 이 라이브러리는 웹 디자이너의 도구 창고에 보다 복잡한 위젯을 추가하는 동시에 위젯의 작동 방식을 표준화함으로써 웹 디자인 분야에 완전히 새로운 수준의 사용자 인터페이스를 추가할 수 있을 것이기 때문이다. 현재 UI 라이브러리에 포함된 위젯의 수는 많지 않지만 v1.6의 릴리스를 기준으로 1년 뒤면 웹 애플리케이션에 사용할 수 있는 10 - 20개의 새 위젯이 UI 라이브러리에 추가될 것이다.

UI 설치하기

UI 라이브러리는 jQuery 코어 또는 플러그인과는 다른 방식으로 다운로드 및 설치하게 된다. 네트워크 트래픽 및 연결을 최소화하기 위해 UI 팀에서는 UI 라이브러리 중에서 사용할 파트와 원하는 압축 스키마를 미리 선택하도록 사용자에게 요청하는 고유한 웹 애플리케이션을 개발했다. 그런 다음 파일을 직접 다운로드할 수 있다. 이 방법의 장점은 UI 라이브러리 중에서 사용할 파트만을 제공하면 되기 때문에 애플리케이션의 성능에 미치는 영향을 최소화할 수 있다는 점이다. 하지만 사용자 정의 파일에 처음부터 포함되지 않은 파트를 나중에 사용하기로 결정한 경우에는 전체 파일을 다시 다운로드해야 하는 단점이 있다. 세상만사 다 그렇듯이 모든 결정에는 일장일단이 있기 마련이다.

Effects

UI 라이브러리의 Effects 모듈은 페이지 요소에 적용할 수 있는 "흥미로운" 기능을 제공한다. 필자가 "흥미롭다"고 표현한 이유는 이 모듈을 전체적으로 보았을 때 여러 가지 효과를 별다른 기준 없이 무작위로 모아놓은 것처럼 보이기 때문이다. 마치 누군가가 Microsoft® PowerPoint의 모든 효과를 살펴본 후 그 중 일부를 선택해서 JavaScript 효과로 만들었다는 생각이 든다. 이들 효과가 어떻게 선정되었는지는 아마도 절대 알 수 없을 것이다. 이러한 효과는 괜찮은 것처럼 보이기는 하지만 일부 효과는 언제 어디에서 사용할 수 있을지 의문이 들기도 하기 때문에 전문 웹 애플리케이션에서 얼마나 유용할 것인지도 여전히 미지수로 남아 있다.

그렇지만 정말 사용하기 쉽다는 장점도 있다. 첫 번째 효과 세트는 페이지의 요소를 숨기거나 표시하는 데 사용할 수 있다. 이들 효과는 jQuery 라이브러리의 내장 함수인 hide()와 show()를 확장한 것으로 페이지의 요소를 숨기거나 표시할 때 사용할 효과의 유형을 지정할 수 있다. 그렇다면 이제 예제를 살펴보자. 그림 1에서는 플로우차트 형식으로 Puff 효과의 적용 전, 적용 중 및 적용 후의 모습을 보여 준다.

효과가 실제로 표현되는 모습을 설명하기가 어려우므로 이 기사에서 제공하는 데모를 다운로드한 후 직접 실행해 보아야 한다. 하지만 필자는 그림 1의 정적 이미지를 제공하는 소스 코드를 보여 줄 수 있다. 이 코드를 보면 어느 정도 상상이 될 것이다.

		   
$("#puffSample").click(function(){
   $(this).hide("puff");
});

$("#puffReappear").click(function(){
   $("#puffSample").show("puff");
   });

이 코드에는 일반적인 코드와 크게 다른 점이 없으며 매우 직관적이기 때문에 show/hide 효과의 작동 방법을 쉽게 알 수 있다. 진짜 문제는 사용자가 "이게 뭐지? 필요 없는거잖아"라는 말을 하지 않도록 이러한 효과를 적절한 방법으로 유용하게 사용할 수 있는 시기를 찾는 것이다.

Effects 모듈에 포함된 다른 효과를 살펴보자. 이러한 효과는, 적어도 이러한 효과 중 일부는 어느 정도 실용적이기 때문에 웹 애플리케이션에서 사용자 경험을 향상시키는 데 사용할 수 있는 방법을 상상할 수 있다. 다시 한번 말하지만 실제로 실행하지 않고서는 예제를 설명하기가 어려우므로 이 기사에서 제공하는 예제를 다운로드하여 직접 확인해 보기를 권장한다.

이 모듈의 효과는 페이지의 특정 요소에 대한 관심을 끌기 위한 것이며 이 관점에서 일부 효과는 효과적으로 사용할 수 있다. 이러한 효과에는 가상의 HTML 트램펄린에 떨어뜨린 것처럼 요소가 글자 그대로 통통 튀는 효과를 제공하는 "bounce", 노란색 배경이 요소에 반짝 표시되는 "highlight"(Mac과 유사함), 요소가 반복적으로 사라졌다가 표시되는 "pulsate", 요소를 50% 축소하는 "scale", 요소를 좌우로 흔드는 "shake" 및 요소를 길고 평평하게 만들어 주는 "size"가 있다. 이러한 효과는 hide/show 효과와 마찬가지로 사용 방법이 매우 간단하다.

		   
$("#bounce").click(function(){
   $("#loginSample").effect("bounce");
   }); 

지금까지 UI 라이브러리의 Effects 모듈을 살펴보았다. 페이지에서 매우 특별하게 보이지는 않겠지만 이러한 효과 중 일부는 페이지의 요소를 강조할 필요가 있을 때 실제로 사용하면 좋은 효과를 얻을 수 있을 것이다.

Interactions

마지막으로 필자는 화면에서 DIV를 확대하는 것보다 더 흥미로운 몇 가지 기능을 알게 되었다. Interactions은 한 요소를 다른 요소 위로 끌어왔을 때 발생할 수 있는 상황, 한 요소를 다른 요소 위에 놓았을 때 발생할 수 있는 상황 및 두 HTML 요소를 사용하여 수행할 수 있는 기타 작업에 대한 코드를 작성하는 매우 강력한 방법을 제공한다.

끌기/놓기 요소를 이용한 상호 작용은 웹 애플리케이션 설계와 관련하여 완전히 새로운 분야이다. 대부분의 사용자는 정적 페이지와 정적 페이지 요소에 익숙해 있기 때문에 끌어서 놓기 상호 작용이 지원되는 웹 애플리케이션은 거의 없는 편이다. 잘 생각해 보면 이 고유한 유형의 상호 작용을 지원하는 데스크탑 애플리케이션도 별로 없다는 것을 알 수 있다. 물론 이러한 애플리케이션이 전혀 없지는 않다. 구체적으로 한 예를 들자면 Yahoo Fantasy Sports 페이지가 있다. 끌기/놓기 모델을 거의 완벽하게 활용하고 있는 이 페이지에서는 사용자가 팀 명부를 섞고, 선발 전 플레이어의 순위를 지정하고, 플레이어를 제외 목록으로 이동하는 등의 작업을 수행할 수 있다. 아직까지 Fantasy Sports를 이용해 보지 않았다고 하더라도 이 페이지에 구현된 고유한 사용자 인터페이스 디자인을 확인하는 차원에서 이 애플리케이션을 이용해 보기를 권장한다. 필자는 이 애플리케이션이 웹에서 끌기/놓기 모델을 가장 잘 활용하고 있는 애플리케이션 중 하나라는 견해를 가지고 있다.

Interactions 모듈에는 5가지 유형의 상호 작용이 있다. 처음 3가지 상호 작용은 다음과 같다.

• Resizable은 페이지에 있는 요소의 크기를 조정하는 데 필요한 기능을 지원한다. 이 상호 작용을 사용하면 사용자가 요소의 모양을 변경하고 그에 따라 페이지의 다른 모든 요소를 적절하게 조정할 수 있다. 이 상호 작용은 여러 개의 포틀릿을 가지고 있으면서 사용자가 자신의 웹 페이지 디자인을 사용자 정의할 수 있는 웹 애플리케이션을 만들려는 경우에 매우 유용하다. MyYahoo와 iGoogle 모두 사용자가 자신의 페이지를 사용자 정의할 수 있기는 하지만 사용자 정의할 수 있는 항목이 제한되어 있다. 즉, 미리 정해진 수의 열 내에서만 모든 컨텐츠를 사용자 정의할 수 있는 것이다. 사용자가 자신의 페이지 전체를 정의할 수는 없을까?
• Selectable은 페이지의 요소를 그룹화한 후 사용자가 그룹 내에서 요소의 서브세트를 선택할 수 있도록 지원한다. 이 유형의 상호 작용은 사용자 정의 목록 또는 선택 위젯을 작성할 때 유용하다.
• Sortable 인터페이스는 페이지 요소를 정렬된 순서로 "빠르게" 정렬하는 기능을 지원한다. 5개의 행으로 구성된 테이블이 있을 경우 Sortable 상호 작용을 사용하면 네 번째 행을 두 번째 행으로 끌어놓았을 때 테이블의 나머지 부분이 자동으로 정렬된다. 이러한 세 상호 작용을 사용하면 새로운 방식으로 위젯 및 웹 애플리케이션 상호 작용을 구현할 수 있으므로 좀 더 자세히 살펴보기를 권한다.

이 섹션에서는 앞으로 웹 애플리케이션의 변화를 가져올 것으로 기대되는 다음 두 가지 상호 작용에 대해 자세히 살펴볼 것이다.

• Draggable
• Droppable

앞으로 설명할 예제에서는 반드시 그래야 하는 것은 아니지만 이 두 상호 작용을 함께 사용한다.

이 예제 웹 애플리케이션에서는 새로운 방식의 온라인 쇼핑 방법을 보여 준다. 단추를 눌러서 상품을 장바구니에 넣는 대신 Draggable/Droppable 상호 작용을 활용하여 많은 사람들이 실제로 상품을 장바구니에 넣을 때의 "느낌을 살릴" 것이다. 즉, 사용자가 선택한 상품을 장바구니에 끌어서 놓게 된다. 상품이 장바구니에 놓여지면 장바구니에 있는 상품 수와 총금액이 자동으로 업데이트된다.

이제 이 상호 작용을 수행하는 매우 짧은 코드를 살펴보자. (전체 작업 예제는 이 기사의 끝에 있는 샘플 코드에 포함되어 있다.)

		   
// First, set up the shopping cart
// Give the cart an ID that we can reference in the jQuery code
// Give each span an ID so we can easily update the text in it
<img src="cart.jpg" id=cart>
<p><span id=numItems>0</span> items in your cart.
<p>Your total is $<span id=totalPrice>0</span>.

// Each product has code that looks like this.  The entire product
// is wrapped in a DIV with a class of "product" and given a
// unique ID.  It also has a span that defines the price of the object.
<p><div class=product id=ban><img src="banana.jpg" align=left> Bananas
  <p>$<span class=price>1.99</span></div><br><br>

// define each DIV that has a "product" as "draggable"
// The draggable function has many options that define how the object
// will look and feel when dragged.  There are many options, most not
// covered here, but I put a sampling in to whet your appetite.
$(".product").draggable({
    'opacity': 0.3,  // make the object semi-transparent when dragged
    'revert': "valid", // snap the object back after it's been dropped
    'delay': 200, // delay 200 ms before starting to drag it
    'distance':4, // wait till it's been dragged 4 pixels before starting
    'helper':"clone" // keep the object where it is and use a helper to show dragging
});
   
// just like the draggable has many options, the droppable has many
// options as well.  These options provide a variety of ways
// to offer reinforcement to the user about how the draggable/droppable
// relationship is to work
$("#cart").droppable({
    'accept':".product",  // define which elements will trigger a 'drop'
    'activeClass':"border",  // what class to add to the droppable while dragging
    'drop': function(e,ui){  // this function gets called when something is dropped
        // update the number of items in the cart
        $("#numItems").text(new Number($("#numItems").text())+1);
        var ID = $(ui.draggable).attr("id");
        // get the price from the object just placed in the cart
        var price = new Number($("#"+ID + " .price").text());
        // update the total price in the cart
        $("#totalPrice").text(new Number($("#totalPrice").text())+price);
    }
    });

그렇다. 이 짧은 코드만으로도 이 상호 작용을 수행할 수 있는 것이다. 이 데모를 작성하면서 필자 자신도 정말 쉽다는 생각에 놀라고 말았다. 말할 필요도 없이 이 상호 작용은 매우 쉽고 직관적으로 사용할 수 있기 때문에 이 유형의 상호 작용을 활용하는 사용자 인터페이스를 작성하는 사람들이 많아질 것이다. 이 섹션에서 언급한 다른 상호 작용들도 쉽게 사용할 수 있으며 웹 애플리케이션에서 새로운 상호 작용을 구현할 때 유용하게 활용할 수 있는 고유한 특성을 제공한다.

Widgets

마지막으로 설명할 내용은 실제 이미지를 보여 줄 수 있는 UI 코드 섹션이다. 필자가 보기에 UI 라이브러리에서 가장 흥미로운 부분은 미리 만들어진 검증된 위젯을 가지고 있는 Widgets 모듈이다. 이 모듈에 포함된 위젯은 개발자가 학수고대하던 웹 애플리케이션의 여러 기능을 제공한다. 개발자는 이러한 위젯을 통해 개발 시간을 단축할 수 있기 때문에 결과적으로 남는 시간을 활용하여 웹에서 필요한 정보를 얻고 이 기사처럼 유용한 기사도 읽을 수 있다. 이러한 위젯을 통해 얻게 된 결과를 보고 나면 경영진에서도 개발자의 노력이 매우 지대했음을 인정하고 임금을 올려 줄 마음이 들 것이다.

아래에서 보여 주는 스크린샷은 UI 홈 페이지에서 가져온 것이다.

Accordian

Accordian 플러그인은 목록을 그래픽 형태의 목록으로 변환하며 이 경우 사용자는 목록의 각 섹션을 이동하면서 한 번에 한 섹션만을 볼 수 있다. 일부 UI 동아리에서는 수 년 전에 Outlook이라는 프로그램에서 이 위젯이 처음 사용되었기 때문에 이 위젯을 "Outlook 막대"라고도 부른다. 이 위젯을 사용할 때 자주 범하는 실수 중 하나는 2개 이상의 섹션을 동시에 표시하려고 하는 것이다. 이러한 기능이 지원되는 위젯은 Accordian 위젯이 아니다. 이 위젯은 한 번에 한 섹션만을 표시하며 한 섹션에 다른 섹션과는 관련이 없는 수많은 정보를 담고 있을 때 효과적으로 사용할 수 있다.

이 위젯은 HTML이 올바르게 설정되어 있어야만 정상적으로 작동한다. 즉, 사용자가 Accordian 위젯의 사용을 예상하고 HTML을 설정해야 한다. 또한 이 위젯은 "단계적 기능 축소(degrade gracefully)" 이론을 고려하여 설계된 것이므로 JavaScript를 사용하지 않는 사용자나 Internet Explorer 5를 사용하는 사용자도 페이지를 올바르게 볼 수 있다. Listing 4의 예제에서는 이 위젯을 사용하려는 경우 반드시 따라야 하는 HTML의 구조를 보여 준다.

		   
// The accordian relies on the UL, LI, and A tags to properly configure itself
<ul id="accordianExample" class="ui-accordian-container" style="width:400px;">
   <li>
       <a href="#">Title 1</a>
       <div>Your text would go here</div>
   </li>

   <li>
       <a href="#">Title 2</a>
       <div>More text</div>
   </li>

</ul>

// yes, it's this simple
$("#accordianExample").accordian();

Slider

		   
<div id="sliderExample" class="ui-slider-1">
<div class="ui-slider-handle"></div>
</div>

// this will set up the slider
$("#sliderExample").slider();

// this will set the maximum and minimum values of the slider
$("#sliderExample").slider({
   min: 10,
   max: 20
});

// this will get the value of the slider
$("#sliderExample").slider("value");

DatePicker

		   
<input type=text id=dateField>

// this will create a date picker, which pops up when the textfield gets focus
$("#dateField").datepicker();

// show the drop-down fields to let the user jump around months and years
$("#dateField").datepicker({
   changeMonth: true,
   changeYear: true
});

// show two months instead of one
$("#dateField").datepicker({
   numberOfMonths: 2
});

// because this widget has to support internationalization, it has a TON of
// functions that let you set every aspect of the calendar, to support any
// possible calendar settings.  (Although it doesn't look like the jQuery team
// felt it was necessary to support the Mayan calendar.  Guess 2012 is right
// around the corner.)
//
// This function lets you set the date format that will appear in the textfield.
$("#dateField").datepicker({
   dateFormat: 'dd/mm/yyyy'
});

// Gets the date back from the datepicker
var date = $("#dateField").datepicker("getDate");

ProgressBar

		   
<div id="progressbarExample"></div>

// make this div a progress bar
$("#progressbarExample").progressbar();

// start the progress bar
$("#progressbarExample").start();

// stop the progress bar
$("#progressbarExample").stop();

Dialog

이 시리즈를 처음부터 읽었다면 "jQuery로 작업하기, Part 1: 매개체로서의 JQuery: 플러그인을 사용하여 jQuery 함수를 작성하고 확장하기"에서 설명한 BlockUI 플러그인과 Dialog 위젯의 차이점이 궁금할 것이다. 둘 다 원하는 대화 상자 기능을 수행하므로 편한 대로 선택해서 사용하면 된다. BlockUI를 사용할 경우에는 대화 상자의 모습을 구체적으로 지정할 수 있는 유연성이 제공되는 반면 이 Dialog 위젯을 사용할 경우에는 대부분의 작업이 자동으로 수행된다.

		   
<div id="dialogExample" title="Example Dialog">Text here.  Warning!!</div>

// turn the DIV into a dialog
$("#dialogExample").dialog();

// open the dialog, then close the dialog
$("#dialogExample").dialog("open").dialog("close");

// make a dialog that the user can't drag around, is modal, and in the center of the page
$("#dialogExample").dialog({
    draggable: false,
    modal: true,
    position: "center"
    });

Tabs

Tabs 위젯은 아마도 필자가 가장 좋아하지 않는 위젯일 것이다. 필자가 사용했을 때 이 위젯은 한번도 올바르게 작동하지 않았으며 필자는 이 특별한 위젯이 CSS에 대한 의존성이 매우 높다는 것을 알게 되었다. 그리고 이 CSS는 위젯의 올바른 작동을 위해 사용자가 제공해야 한다. 예제가 길고 복잡할 뿐만 아니라 필자가 이 위젯에 대한 편견을 가지고 있기 때문에 이 기사에서는 이 위젯에 대한 예제를 다루지 않는다. 개인적으로 필자는 별도의 DIV를 직접 만들어서 사용해도 이 위젯을 사용하는 것과 마찬가지로 쉽게 작업할 수 있다는 생각을 가지고 있다.

ThemeRoller

UI 라이브러리의 마지막 기능은 "ThemeRoller"이다. 이름이 이상하기는 해도 라이브러리의 위젯을 코드에서 사용하기로 선택한 경우에는 이 기능을 매우 유용하게 사용할 수 있다. 지금까지 설명한 위젯에는 기본 디자인이 지정되어 있다. 하지만 이 디자인은 사용자의 페이지 디자인과 일치하지 않을 확률이 높다. 따라서 이러한 위젯을 사용하기로 결정했다면 위젯의 디자인을 사이트의 디자인에 맞추고 싶을 것이다. 이러한 요구 사항을 파악한 UI 라이브러리의 제작자들은 사용자가 자신의 사이트에 맞게 CSS 파일을 수정한 후 저장할 수 있는 CSS 생성기를 지난 수 개월 동안 심혈을 기울여서 만들었다. 이렇게 생성된 CSS 파일이 모든 위젯의 디자인을 사용자 사이트의 디자인과 일치시켜 주므로 누구라도 이러한 위젯을 부담 없이 사용할 수 있을 것이다.

일반적으로 CSS 전문가가 아닌 작업자(필자처럼)가 수행하기에는 어려운 작업임에도 불구하고 ThemeRoller를 사용하면 그러한 작업에 필요한 CSS를 어렵지 않게 작성할 수 있다. 예를 들어, 위젯의 임의의 부분에 둥근 모서리를 지정할 수 있으며 그림자를 만들 수도 있다. 실제로 이 기능을 사용하면 UI 라이브러리를 사용할 때 CSS 파일의 복잡한 코딩 부분이 없어도 되기 때문에 그래픽을 잘 다루지 못하는 개발자라도 위젯을 쉽게 사용하고 수정할 수 있다. 어려운 CSS 파일 작업을 수행하고서 평범한 디자인의 위젯을 만드는 대신 ThemeRoller를 통해 비프로그래밍 방식으로 작업을 수행할 수 있다.

마지막으로 ThemeRoller에는 위젯을 꾸미는 데 사용할 수 있는 미리 작성된 여러 가지 테마가 있다. 필자와 비슷한 수준의 개발자라면 미리 작성된 테마를 보고서 자신이 직접 디자인한 테마보다도 훨씬 더 근사하다고 느낄 것이다. 사이트의 CSS를 ThemeRoller에 배치하는 대신 ThemeRoller CSS를 사이트에 배치할 수 있다. 이 방법은 전문가가 디자인한 듯한 멋진 웹 애플리케이션을 무료로 얻을 수 있는 "경제적인" 방법이다.

HTML5 Sencha App vs. native iPhone App side by side (HD)

Sencha Touch 에서 이미지 버튼 구현하기.

Image buttons in Sencha Touch?

Ext.setup({
    onReady: function() {		
	var rootPanel = new Ext.Panel({
		fullscreen: true,					
		dockedItems:[{					
			xtype: 'toolbar',
			dock: 'top',
			items: [{
				xtype: 'button',
				cls: 'btnAction'						
			}]								
		}]			
	});
    }
});

.btnAction {
	background: url(../action.png);
	width: 40px;
	height: 40px;
}

PowerCharts

PowerCharts is a set of advanced charting widgets for usage in specialized applications like network diagrams, performance analysis, hierarchical structures, stock prices and financial planning.

Chart Types

PowerCharts offers 16 different chart types each with their own specialized applications:

1. Drag Node Chart

   Powerful diagramming tool for network diagrams & process flow diagrams

2. Heat Map Chart

   Tabular representation of complex data with user-defined color ranges

3. Multi-Axis Line Chart

   Advanced line chart with multiple axes for comparing multiple parameters

4. Interactive Candlestick Chart

   Highly interactive chart for plotting stock data and commodity prices

5. Waterfall Chart

   Shows the cumulative effect of positive and negative values on an initial value

6. Drag-able Charts

   Offers visual modification of the plotted data simply by dragging the data plots

7. Multi-Level Pie Chart

   Modern method for displaying hierarchical relationships

8. Box and Whisker Chart

   Display the spread of a batch of data using median, quartiles, limits, mean and deviations

9. Logarithmic Charts

   For plotting very large and very small values on the same chart on a logarithmic scale

10. Radar (Spider) Chart

    Effective tool for comparing multiple entities based on different features

11. Spline Charts

    Similar to a line chart except that it draws a fitted curve through the data points

12. Step Line Chart

    Specialized line chart with vertical and horizontal lines to connect data points

13. Select Scatter Chart

    Scatter Chart where data points can be visually selected & processed

14. Inverse Axis Charts

    Plot data on an inverted scale, like ranks and race timings

15. Error Charts

    Shows the extent of possible error (or deviation) in data using I-shaped bars

16. Kagi Chart

    For noise free analysis of equity/commodity prices

Build mobile web applications with Sencha Touch

Overview

In the software development world, two important trends are increasingly important: mobile application development and standards-based HTML5 web development. The learning curve for either type of development can be steep. Developing a native mobile application often requires knowledge of specific platforms and skills, such as Objective-C for iPhone and Java™ for Android (and these are only two platforms). HTML5 development has gained traction lately because it is standards-based. While vendors are working rapidly to incorporate and comply with these early specifications, HTML5 is still rather immature.

The recent release of Sencha Touch 1.0 fuses the cutting-edge worlds of mobile application development with HTML5 web development to form a simple, accessible framework for building mobile web applications. In this article, learn everything you'll need to know to start working with the Sencha Touch framework.

Sencha Touch

Learning to build mobile applications—especially from the perspective of a web developer—can be troublesome. A variety of platforms to choose from and technologies to learn are available. HTML5 support, though gaining momentum quickly, is still not quite ready to be used for complex web applications, particularly line-of-business applications.

Sencha Touch combines the rich platforms of HTML5 and mobile web application development into a happy medium. The framework is developer-friendly and similar to using the Ext JS JavaScript framework. If you have moderate to advanced JavaScript experience, then Sencha Touch is approachable. If you already have skills as a JavaScript and CSS developer, Sencha Touch can immediately turn you into a mobile application developer, too.

Sencha is a company with a core commercial product offering, but it also supports open source software. Sencha Touch 1.0 is free for both personal and commercial use.

Frequently used abbreviations

Layouy Guide : http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

Ext Core Manual : http://docs.sencha.com/core/manual/

1. 꾸준히 한다.

.프로그래밍언어도 언어(?)라서, 하루에 몰아서 하는 것보다 매일 꾸준히 하는 것이 중요하다. 경력이 많은 프로그래머들도 몇달만 코딩을 안해도 감이 많이 떨어지는 것을 느낀다.

.특히 프로그래밍을 처음 배우는 사람이라면, 꼭 컴퓨터 앞에 앉지 않더라도 책을 항상 가까이해서문법 및 표현에 익숙해지도록 하는 것이 중요하다. 자주보는 것이 중요하다.

2. 반복해서 한다.

.단지 태권도교본을 잘이해했다고 해서 멋진 발차기를 기대할수 없는 것처럼, 책의 내용을
잘 이해했다고 해서 하루아침에 프로그래밍을 잘할수 있는 것은 아니다.

.이해한 내용을 바탕으로 수많은 반복연습을 통해서만 지식을 진정한 자신의 것으로 만들 수 있다. (같은 예제를 공부하더라도 이리저리 조금씩 변경해서 공부하는 것이 좋다.)

.처음 2~3번은 자세히 보고, 그 다음 부터는 하루에 10분간 10페이지를 훑어보는 식으로 반복하자.
몇달안에 책에 있는 모든 목차와 예제의 위치와 주요내용을 모두 파악할수 있을 것이다.
(적어도 언어책 한권, 데이터베이스책한권 정도는 이렇게 할 필요가 있다.)

3. 좋은코드를 많이 보고 따라한다.
.이미 수많은 선배들이 여러문제들에 대한 코딩을 다 작성해 놓았다. 새로운 방법으로 문제를 풀겠다고 도전하는 것은 별 의미가 없다. "이럴때는 이렇게 하는 구나..."라는 것을 배우고 유사한 상황에서 활용하면 되는 것이다. 여러분들이 해야할일은 이러한 경험들을 많이 쌓아 나가는 일이지, 기존과는 다른 새로운 코딩방식을 만들어 내는 것이 아니다.

.좋은 코드는 보기에도 좋다. 잘정리되어 있고, 별로 특별한 것이 없다. 프로그래밍의 각요소들을 잘이해하고, 각 요소들을 적재적소에 바르게 사용하면 되는 것이다.
단지 소스의 라인수를 줄인다고해서 좋은 코딩이 아닌것이다. 로직이 소스코드에 잘드러날수있게 쉽고 평범하게 작성하는 것이 좋은 코드인 것이다. 이창호의 바둑이 평범하듯이...

4. 기본에 충실한다.
.빨리 프로그래밍을 배워서 뭔가 해보고 싶은 여러분들의 마음을 이해하지 못하는 것은 아니다. 그러나, 프로그래밍 하루이틀 할 것도 아니고... 처음에 기본을 잘배워놓지 않으면, 그 이후에는 기회가 잘 없다. 실무에서는 매일 개발하기 바쁘고, 새로운 기술 배우기 바쁘고...
.배울것이 많다고 생각할지 모르나, 실제로 원리는 모두 같다고 해도 과언이 아니다.
하나를 깊이있게 파고들면 나머지는 다 여러분 손에 있을 것이다.

5. 코드를 작성하기전에 순서도를 그린다.
."프로그래밍 = 코딩"이 아니라 "프로그래밍 = 로직설계 + 코딩"이다. 필자가 생각하는 로직설계 와 코딩간의 비율은 8:2정도이다.
.포토샵만 잘한다고 디자이너가 아니라는것은 여러분들도 잘알고 있을 것이다. 새로운 기술이나 프로그램을 공부하는 것도 중요하지만, 어떤 과제가 주어졌을때 이를 잘 분석하고 설계하는 능력을 장기적으로 키워나가도록 노력해야할 것이다.(다양한 주제에 대해서 문제를 풀어보고 다양한 종류의 책을 읽자.)
.문제를 구성하고 있는 주인공들을 찾아서 나열해보라. 그리고 이들간의 관계는 무엇이고, 규칙은 무엇인지 적어보라.(머릿속으로만 생각하지말고!!!)

6. 주석을 가능한한 많이 적는다.
.주석은 매우 유용하고도 중요한 요소이다. 그럼에도 불구하고 많은 사람들이 이를 소홀히 한다. 자신이 작성한 코드도 몇일만 지나면 이해가 안되는 경우가 많다. 적어도 이해하는데 시간이 걸린다. 주석은 이러한 시간들을 절약해줄것이며, 보다 에러가 적은 코드를 작성하는데 도움을 줄 것이다. 특히 여러사람이 공동작업을 하는 경우에는 더욱 더 중요하다. 서로를 위해서...
.작업과 관련된 가능한한 많은 정보를 주석에 담도록 하자.

7. 작업일지를 작성한다.
.과학자들이 매일 연구한 내용을 일지로 적듯이 여러분들도 일지를 적어보자. 오늘은 이렇게 저렇게 해봤는데 잘안되었다... xxx.java의 코드를 이렇게 바꾸었다. 몇시몇분에 xx로 백업받아 놓았다... 라는 식으로 가능한한 자세히 적도록 한다. 이렇게 함으로써 여러분들의 경험을 기록 으로 쉽게 보관할수 있으며, 문제해결에 많은 도움이 된다.

8. 자신의 소스를 가꾼다.

.보통 코딩을 마치고 나면, 모든 것을 덮어두곤 한다. 원하는 결과를 얻었다고 거기서 그치지말고 이제 로직과 코드를 보다 효율적으로 개선할 방법이 없는지 고민해보자. 글을 써놓고 좋은 글로 만들기 위해 읽고 또 읽고 다듬듯이 코드를 다듬어보자. 여러분들의 코드를 구사하는 능력이 보다 향상되어가는 것을 느낄 수 있을 것이다.

.여러분들을 위한 제안은 작은 프로그램을 만들어서 오랜기간동안 점차 발전시켜 나가는 것이다. 새로운 기능들을 하나씩 추가해가고, 기능을 발전시켜나가보자. 이과정을 통해서 여러분들의 실력 은 몰라보게 향상될 것이다.

9. 생각하라.
.항상 머릿속에 한 가지 문제를 준비하라. 지하철을 기다리거나, 화장실에서 볼일 볼때 문제를 풀어 보자. 유레카를 외치고 뛰어나올지도...^^;

10. 좋은 책을 선택한다.
.공부를 시작할때 제일 먼저 하는 일은 아마도 책을 고르는 일일 것이다. 보통 책하나에 수십시간을 학습하게 되는데, 책을 잘못선택한 경우 수십시간과 노력을 허비하는 셈이다.
바른 책을 고르는 일은 쉬운일이 아니지만, 최소한 몇시간을 투자해서 최선의 선택을 하도록 노력 해야 수십시간을 허비하는 일이 없을 것이다.

.책을 고르는 법은 여러가지가 있겠으나, 가장 중요한 것은 본인이다. 서점에서 같은 종류의 몇가지 책을 놓고 서로 비교해보면, 시간을 들인 만큼 보다 나은 선택을 할 가능성이 높아진다.

.많은 컴퓨터 서적이 독자들의 선택을 어렵게 하고, 컴퓨터 업계 특성상 좋은책을 만들기 보다 빨리찍어서 파는 것이 더 중요해진 요즘. 독자들의 바른 선택이 보다 나은 책이 출판되는 것을 가능하게 한다는 것을 알았으면 한다.