1. 설치
http://jquerymobile.com/download/
관련 파일을 다운로드한다.
이전 PhoneGap(2011/10/27 - [프로그래밍/안드로이드] - 안드로이드에서 PhoneGap 사용하기...)이 위치하고 있는 디렉토리에 관련 파일을 푼다.
이때 jQuery(http://docs.jquery.com/Downloading_jQuery) 도 다운로드 받아 상위 이미지처럼 복사하여 넣는다. 여기서 파일명에 min 이라는 글자가 들어있는 스크립트들은 압축되어있으므로 용량을 최소화시켜준다. 소스를 보며 작업할 경우라면 min 없는 스크립트를 사용하여도 상관없다.
2. 샘플 코드 작성하기
/assets/www/index.html 을 아래와 같이 작성한다.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<link href="jquery.mobile-1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>jQueryMobile</h1>
</div>
<div data-role="">
<p>Hello World!!</p>
</div>
<div data-role="footer">
<p>Hello World for jQueryMobile</p>
</div>
</div>
</body>
</html>
스크립트 경로를 아래와 같은 URL 경로로 지정할 수 있으나 이 경우 WiFi 혹은 3G/4G 가 불가능한 환경에서는 사용할 수 없게 된다.
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
3. 실행
기존 빌드된 클래스를 재빌드하기 위하여, Project > Clean... 을 실행한다.
그런 후 Run > Run As > Android Application 을 실행한다.
'프로그래밍 > 안드로이드' 카테고리의 다른 글
| AndEngine - 1 - andengine.jar 생성하기 (0) | 2011.12.01 |
|---|---|
| 이클립스 + Derby 환경 구축 (0) | 2011.10.31 |
| 안드로이드에서 PhoneGap 사용하기... (6) | 2011.10.27 |
| 이클립스 안드로이드 개발 환경 구축하기 - 2 - (12) | 2011.10.27 |
| 이클립스 안드로이드 개발 환경 구축하기 - 1 - (19) | 2011.10.26 |
댓글