[jQTouch] Demos 훓어보기

이전 글([jQTouch] Extensions (확장기능))에 이어 이번에는 jQTouch가 제공하는 Demo를 살펴보자
역시 데모를 따라 제작하기 보다는 데모에서 사용된 코드와 흐름을 간략히 분석하는 것으로 훓어보자.

총 두개의 데모가 제공되는데, Clock app 과 To-Do app 이다. 이 두 데모는 각각 세계시간과 할일 목록을 관리하는 앱이다. 데모에서는 jQTouch 기반으로 작성되었으며 jQuey를 이용해 로직을 정의하였다

무엇보다 데모의 유용성은 jQTouch기반 웹앱의 아이디어를 보여준다는데 있다.
즉 코드의 구성보다는 웹앱에 걸맞는 jQTouch 앱의 사례를 보여준다는데 의미가 더 크다.

jQTouch가 모바일 웹앱에 초점을 맞춘 만큼 이 두 데모도 데스크탑보다는 스마트폰에서의 활용도가 높은 특징을 보여준다. 모쪼록 jQTouch를 이용하는 개발자들도 이 데모로 출발하여 가치있는 웹앱에 도전해 보기 바란다.

Clock app
GMT를 기준으로 세계시간을 표시하는 시계앱이다. 참고로 GMT는 영국의 그리니치 천문대를 중심으로 한 시간대로 그리니치 평균시라하며 대한민국의 경우 그리니치 평균시 보다 9시가 빠른 GMT+9 시간대에 속한다.

먼저 UI 구성을 살펴보면,
아래와 같이 시계 표현을 위한 각각의 이미지들이 존재하며 clock.css에서 div요소와 이미지를 매칭시키고 있다.

최초 시계구성은 addClock 함수에서 div 요소를 생성하는 것으로 처리하며 시간이 흘러가는 것은 updateClocks 함수가 1초마다 반복실행되면서 처리하도록 한다. 이때 시계의 분침,시침,초침등의 움직임은 CSS3의 transform 기능으로 정의하였다

...
$('.sec', $el).css('-webkit-transform', 'rotate(' + ( second * 6 ) + 'deg)');

앱이 처음 실행될 때 기본값으로 두 개의(필라델피아,로스앤젤레스) 시계가 표시되며 setInterval() 을 통해 매 1초마다 시계를 갱신시킨다

addClock('Philadelphia', -5.0);      //필라델피아 시계 초기화
addClock('Los Angeles', -8.0);     //로스앤젤레스 시계 초기화
updateClocks();                          //시계 업데이트
setInterval(updateClocks, 1000);  //매 1초마다 갱신

그리고 시계를 추가하기 위해 폼(form)을 이용하는데, 이전 글([jQTouch] GET, POST 전송) 의 POST로 submit 하는것이 아니라 자체 스크립트 호출로 처리하고 있다

<form id="time"> ..... </form>

$('#time').submit(function(){
                    addClock($('#label').val(), Number($('#timezone').val())); //시계추가
                    $('input').blur();                                                            //포커스 제거
                    $('#add .cancel').click();                                                 //cancel 클릭
                    this.reset();                                                                  //폼리셋
                    return false;
                });

아래 화면은 데모를 실행한 화면이며 각각 처음화면, 시계추가, 추가된 화면이다

 

 

소스가 비교적 어렵지 않으니 직접 살펴보고 음미(?)해 보기 바란다


To-Do app
두번째 데모는 '할일 목록'을 관리하는 앱이다.
우선 데모 실행화면부터 보자.아래 실행화면을 보면 지금까지 스타일로 사뭇 달라 보인다.

이 데모에서는 기본 jQTouch 화면과 다른 스타일을 위해 css에 많은 할애을 하고 있는 것이 특징이다. 
특히 타이틀바와 중간영역에 있는 짙은 밤색 처리는 백그라운드 이미지로 처리하였는데 이미지파일이 아닌 이미지 데이터 문자열로 처리하고 있다.

toolbar { background: url(https://t1.daumcdn.net/cfile/tistory/256CA34056E6D64F1D"FONT-FAMILY: Tahoma">  }

나머지는 일반적인 CSS 스타일 지정이며, 이와 같이 얼마든지 앱스타일을 변경할 수 있다는 것을 느끼면 되겠다

할일 목록을 추가하는 것은 submitForm 함수에서 처리하는데, incomplete 라는 ul 요소에 li를 새로 추가하는 로직이다. 앞의 체크박스도 같이!

function submitForm(){
        $el = $('#add form');
        if ($('#todo', $el).val().length > 1) {
            var itemid = $('#home ul li').length + 1;
            $('#home .incomplete').append($('<li><input type="checkbox" /> <span>' + $('#todo', $el).val() + '</span></li>'));
         }
          jQT.goBack();
          $el.get(0).reset();
          return false;
}

할일 앞의 체크박스를 클릭하면 to do 와 completed 사이를 오가는데 다음과 같은 코드로 처리한다

$('input[type="checkbox"]').live('change', function(){
          var $el = $(this);
          if ($el.attr('checked')) {
              $el.parent().prependTo('.complete');
          } else {
              $el.parent().appendTo('.incomplete');
          }
});

참고로 Completed 하위 목록은 가운데 줄이 그어져 있는데 다음의 css로 처리된 것이다

.complete span { text-decoration: line-through; }

다음은 할일 추가와 일부 제거한 모습이다.

 

마치며...
데모를 살펴 보면서 느낄 수 있겠지만, jQTouch를 이용한 웹앱 역시 자바스크립트, jQuery 와 같은 기본적인 웹 클라이언트 기술에 능숙한 것을 요구한다. jQTouch 가 아이폰 앱에 걸맞는 UI 구성은 도와주지만 앱의 로직 부분까지 담당하지는 않기 때문이다.