일전에 jQTouch 를 간단히 언급했었다 => [JQTouch] 모바일 웹 UI 라이브러리
이번주에 jQTouch 를 조금 살펴 볼 예정인데, 그 첫글로 기본적인 사용 환경 설정을 다루고자 한다.
웹 개발 환경은 다른 응용개발 환경보다 훨씬 심플하다는 것이 매력적이다
다른 응용 환경 구성과 같은 구구절절한 개발툴과 Add-In 형태의 프로그램, 까탈스러운 구성파일의 설정 과정이 없어 쉽게 시작할 수 있고 개발모델 역시 심플하여 접근하기 매우 용이하다. 맘에 든다 ㅎㅎ
jQTouch 역시 심플한 웹 개발모델을 제시하며, 결국에는 자바스크립트, CSS, HTML 과 같은 기본적인 웹 개발 요소들이 사용될 뿐이다. 물론 jQTouch 라이브러리를 참조해야 하지만 이것 역시 자바스크립트의 범주이다
1. jQTouch 라이브러리 다운로드
흔히 jQTouch 를 플러그인이라 표현 하지만 라이브러리라 표현해도 무방할 것이다
가장 먼저 시작할 것은 이 라이브러리를 개발 PC에 다운로드 하는 것이다. 아래의 링크에서 최신버전의 jQTouch 라이브러리를 다운받는다. 현재시점(2010.10.25) 기준 1.0 beta 2 버전을 다운받는다
: http://www.jqtouch.com/
다운받은 파일의 구성은 jQTouch 라이브러리 파일, 테마 스타일 파일, 확장팩 파일, 데모파일 등이다
여기서 데모를 확인해 보면 참으로, 아이폰 앱 스타일에 적합하다는 것을 느낄 것이다
2. 테마 선택(적용)하기
jQTocuh 는 jQuery 기반의 UI 라이브러리이다. 따라서 스크립트파일과 더불어 스타일을 정의한 CSS파일도 포함되어 있다. 스타일은 총 두개로 나누어져 있는데 jQTouch 테마와 Apple 테마가 그것이다
jQTouch 고유 테마는 검정색 바탕에 회색톤과 하얀 글자가 특징이다. 반면 Apple 테마는 아이폰 UI와 유사하게 청색 계열의 느낌과 흰 바탕 그리고 검정색 글자로 구성된다. 아래 두 화면에서 그 차이를 느낄 수 있다
두 테마 중 하나를 선택할 수 있는데 다운로드 받은 파일 중 theme 폴더에 각각 다음처럼 정의되어 있다
Apple 테마 : themes > apple > theme.css
jQTouch 테마: themes > jqt > theme.css
jQTouch 를 적용하는 우리의 웹 페이지에 (경로를 맞춰) 다음과 같이 스타일을 정의하면 된다
그리고 기본적인 jQTouch 스타일을 정의한 파일은 jQTouch 폴더에 있는 jqtouch.css 파일이다
이 파일 역시 웹 페이지에 스타일로 정의해 둔다
3. jQTouch 라이브러리 참조하기
일종의 핵심 엔진을 참조하는 것으로 jQTouch 스크립트 라이브러리에 대한 참조이다
jQTouch 폴더의 jqtouch.js 파일이 그것이다. 또한 jQTouch 가 jQuery 기반으로 작성되었기 때문에 jQuery 라이브러리의 참조도 필수이다. jQTouch 를 다운받은 폴더에는 친절하게도 jQuery 라이브러리가 포함되어 있다. 현재 jQTouch 버전은 jQuery 1.3.2 버전을 사용하고 있다. 아래와 같이 스크립트를 참조한다
<script src="./jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
4. jQTouch 객체 생성으로 시작하기
각종 기본 설정을 정의하는 일종의 초기화 과정을 객체 생성 코드로 정의할 수 있다
이 초기화 객체에 사용되는 매개변수를 보면 jQTouch 가 하이브리드 형태의 웹앱에 초점이 맞춰진 라이브러리라는 것을 간접적으로 알 수 있다. 예를 들어, 아이폰 바로가기 아이콘이라던지 로딩 화면등 웹앱의 구성요소 정의가 그것이다.
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'./jqtImg/back_button.png',
'./jqtImg/back_button_clicked.png',
'./jqtImg/button_clicked.png',
'./jqtImg/grayButton.png',
'./jqtImg/whiteButton.png',
'./jqtImg/loading.gif'
]
});
</script>
5. 설정 끝, 지금부터는 div 엘리멘트와 id, class 속성들과의 잔치?이다
jQTouch 의 적용을 위한 기본 설정은 이것으로 끝이다. 이제부터는 Div 엘리멘트의 정의와 각종 HTML 요소 그리고 id, class 속성을 통한 형식 지정, 스타일 정의로 화면을 jQTouch 답게 구성할 수 있다. 지금부터가 jQTouch 라이브러리의 구체적 사용법을 알고 진행해야 하는 과정이다.
위 설정들을 포함한 가장 기본적인 jQTouch 기반 웹 페이지의 구성은 아래와 같다
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">@import "./jqtLib/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "./jqtLib/theme.min.css";</style>
<script src="./jqtLib/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jqtLib/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'red',
preloadImages: [
'./jqtImg/back_button.png',
'./jqtImg/back_button_clicked.png',
'./jqtImgg/button_clicked.png',
'./jqtImg/grayButton.png',
'./jqtImg/whiteButton.png',
'./jqtImg/loading.gif'
]
});
</script>
</head>
<body>
<div id="home">
<div class="toolbar">
First jQTouch Demo
</div>
<div>
Hello World!!!
</div>
</div>
</body>
</html>
실행 화면
일부 웹 개발자들은 jQTouch 를 자신의 웹 프로젝트에 적용하고자 할 때 디렉터리와 파일 경로를 자신의 입맛대로 구성하고 싶어한다. 나 역시 마찬가지로...
그러나 jQTouch 는 테마를 정의한 스타일시트 파일에 이미지 경로가 포함되어 있어 주의를 요한다
ex) background: url(img/toolbar.png) #000000 repeat-x;
위 코드는 theme.css 파일에 정의된 이미지 경로를 보여준다. 하위 img 폴더를 기준으로 하고 있다
이 코드는 기본적으로 다운로드 한 jQTouch의 경로로써, 만일 개발자에 의해 이 경로가 해석되지 않는다면 의도하지 않는 결과를 보여줄 수 있다. 따라서 자신만의 경로를 정의할 때 이 부분을 감안해야 할 것이다. 제일 편한 것은 처음 다운로드 받은 jQTouch 의 폴더,파일 구조를 그대로 사용하는 것이다
'모바일 > Javascript' 카테고리의 다른 글
| [jQTouch] 페이지 전환 (12) | 2010.10.26 |
|---|---|
| [jQTouch] 목록 스타일 (15) | 2010.10.25 |
| 페이지 요소(Element) 탐색 (4) | 2010.10.12 |
| 자바스크립트 메뉴를 추가하며... (6) | 2010.10.07 |
| JSON (JavaScript Object Notation) (6) | 2010.10.06 |
