[jQTouch] Extensions (확장기능)

지금까지 총 여섯번에 걸쳐 jQTouch의 기본적인 내용을 살펴 보았다.
jQTouch 에서 제공하는 데모를 기준으로 빠르게 훓어보았지만 기본적인 사용법은 거의 다룬셈이다

지금까지 살펴본 내용은 UserInterface, Animations, AJAX, Callback Events 정도인데 이 이상의 내용은 jQTouch 기본 사용법과 더불어 일반 웹 개발 스킬과 아이디어가 접목되어야 그럴싸한 웹앱이 탄생할 것이다

jQTouch 데모를 기준으로 남은 것은 Extensions 와 Demo 부분인데, 먼저 Extensions 를 살펴보자
Extensions 은 말그대로 일종의 jQTouch 확장 기능인데 이 글에서는 데모 코드를 따라 작성하기 보다는 jQTouch 기본 데모를 소개하는 수준에서 글을 마칠까 한다.

jQTouch 는 기본적인 라이브러리 기능에 추가해서 덧 붙일 수 있는 확장 기능을 정의할 수 있도록 구조화되어 있는데, 마치 플러그인과 유사한 느낌이다. jQTouch 객체에 addExtension 함수를 통해 확장 함수를 등록할 수 있으며  이 함수가 정의된 js 파일은 떼었다 붙일 수 있도록 별도의 파일로 정의하기를 권장한다.

ver1 beta2 에서는 총 4개의 확장 기능을 제공하며 extensions 폴더에 각각 독립된 js파일로 구성되어 있다
jQTouch 가 제공하는 4개의 확장 기능을 간략히 살펴보자

Auto Titles
먼저 자동 타이틀이다. 말 그대로 타이틀을 자동으로 구성해 주는 확장기능인데 링크로 페이지 이동시 링크 제목을 타이틀 내용으로 사용한다. 아래 화면처럼 Oranges링크를 클릭하면 타이틀의 내용이 자동으로 Oranges가 된다.

 

Auto Titles 확장 기능을 정의한 파일은 jqt.autotitles.js 파일인데 div 요소가 교체될 때 발생하는 pageAnimationStart 이벤트를 통해 해당 기능을 구현하고 있다


Floaty Bar
페이지에 둥둥 떠서 스크롤에 따라 자동으로 이동하는 보조 바(bar)인 플로티 바를 제공한다.
아래 화면처럼 플로티바가 페이지 위에 나타나며 스크롤 이동에 자동으로 반응한다. 그리고 Bar를 숨기거나 토글시킬 수 있다. jqt.floaty.js 파일에 로직이 정의되어 있으며 플로티 바로 사용할 div 요소에 makeFloaty, scrollFloaty, toggleFloaty, hideFloaty 등의 함수를 구성해 준다

GeoLocation
현재 위치를 위도와 경로로 반환하는 확장 기능인데 내부적으로 HTML5의 Geolocation 스펙을 이용하고 있다
참고: [HTML5] Geolocation

단말기가 Geolocation 기능을 지원해야 하며 사용자가 위치정보 제공에 동의해야 사용이 가능하다.
아래 화면은 크롬 브라우저에서 실행한 결과이다. jqt.location.js 파일에 로직이 정의되어 있다

Offline
인터넷 연결이 끊긴 오프라인 상태에서도 웹앱을 이용할 수 있도록 지원하는 확장기능인데 내부적으로 HTML5 의 Application Cache 스펙을 이용하고 있다
참고: [HTML5] 오프라인 웹 어플리케이션

서버에 캐시될 파일을 정의한 메니페스트파일(.manifest) 파일이 존재해야 하며 MIME타입이 설정되어 있어야 한다.
jQTouch 에서는 이 모든 파일을 제공해 주므로 서버설정만 맞춰주면 된다. 그리고 자동으로 캐시 업데이트 및 캐시 관리를 수행해 주기 때문에 오프라인 환경을 쉽게 개발할 수 있다.

아래는 데모 화면인데 페이지의 모든 리소스를 로컬에 저장했으며 오프라인 상태에서도 실행할 수 있다는 안내이다

이것으로 jQTouch 가 제공하는 4가지 확장 기능에 대해 간략히 살펴 보았다.
참고로 이 확장기능도 좋지만 더 유용한 기능이 있다면 얼마든지 커스텀하게 확장할 수 있을 것이다.
jQTouch 는 기능을 쉽게 확장할 수 있도록 구조화되어 있으며 아이디어만 있으면(그리고 자바스크립트, jQuery 에 대한 지식) 개발자 개개인이 참신한 확장기능을 구현하여 널리 사용자를 이롭게(?) 할 수 있을 것이다