폰갭+디비연동 자료 참고
이번에는 폰갭 데이터베이스 API와 jQuery Mobile의 사용에 대해서 알아본다.
의외로 데이터 베이스 사용은 쉬운편이고, sqlite를 사용하기 때문에 안드로이드 개발자에게는 편할 것 같다.
문제는 Listview 처리에 있었는데 살펴보면서 해결하겠다.
축구 선수 리스트가 나옴
이와 같은 화면이 나오도록 한다.
함수는
init()
phoneReady()
setupTable()
dbErrorHandler()
getEntries()
queryDB()
renderList()
를 사용한다
모두 긴밀하게 연결되어 있는데 init()에서 폰갭 API 를 사용할 수 있도록 이벤트 리스너를 붙이고 그리고 성공할 경우 phoneReady(), 실패할경우 false반환한다.
성공시 db를 생성한다. 그리고 db 생성이 성공한 경우 테이블을 만드는데 테이블을 만드는 함수가
setupTable이다.
DB의 테이블을 접근하는 함수는 getEntries이고 성공시 queryDB, 실패시 dbErrorHanlder를 호출한다
queryDB함수는 SELECT문을 통하여 테이블의 내용을 읽어온다.
성공시 renderList를 호출한다.
renderList는 HTML파일의 ul을 초기화하고 각 아이템마다 출력문을 작성하여 출력한다.
마지막으로 리스트 뷰를 새로 불러온다.
참고한 자료가 Sample Notes 인데 html 파일의 ul 태그에 data-role=”listview”가 매우 중요하다.
문제가 생겼던 부분을 확인하며 분석한다.
입력 화면이다 입력후에 처음과 같이 스타일이 입혀져야 하는데 다음과 같이 나온다.
분명 $.mobile.changePage를 사용하여 불렀는데 pageInit 메시지는 물론 init() 메소드도 호출되지 않는다. reloadpage 를 해보아도 안된다. js 에는 listview(“refresh”)가 되어있었다.
결국 소스를 훑어보다가 ul 태그에 data-role=”listview”가 없는 것을 발견, 추가해 주었다.
정상적으로 작동한다.
external 페이지로 서로 아예 새로 불러오면 가능은하나 코드의 흐름이 이상해진다고 판단, 최대한 최적화 된 방법을 찾은것이 이것이다.
var db;
function init(){
document.addEventListener(“deviceready”, phoneReady, false);
db = window.openDatabase(“Dummy_DB”, “1.0″, “Just a Dummy DB”, 200000); //will create database Dummy_DB or open it
}
//function will be called when device ready
function phoneReady(){
db.transaction(setupTable, dbErrorHandler, getEntries);
}//create table and insert some record
function setupTable(tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS SoccerPlayer (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Club TEXT NOT NULL)’);
}//function will be called when an error occurred
function dbErrorHandler(err) {
alert(“Error processing SQL: “+err.code);
}//function will be called when process succeed
function getEntries() {
db.transaction(queryDB,dbErrorHandler);
}//select all from SoccerPlayer
function queryDB(tx){
tx.executeSql(‘SELECT * FROM SoccerPlayer’,[],renderList,dbErrorHandler);
}function renderList(tx,result){
$(‘#SoccerPlayerList’).empty();
$.each(result.rows,function(index){
var row = result.rows.item(index);
$(‘#SoccerPlayerList’).append(‘<li><a href=”#”><h3 class=”ui-li-heading”>’+row['Name']+’</h3><p class=”ui-li-desc”>Club ‘+row['Club']+’</p></a></li>’);
});$(‘#SoccerPlayerList’).listview(“refresh”);
}$(“#submitPlayer”).live(“click”,function(){
var name = $(‘#name’).val();
var club = $(‘#club’).val();
db.transaction(function(tx){
// ? , ?, [?1,?2] 로
tx.executeSql(‘INSERT INTO SoccerPlayer(Name,Club) VALUES(?,?)’,[name,club]);
queryDB(tx);
});
$.mobile.changePage(“SoccerPlayer.html”);
});
전체 자바스크립트 파일의 내용이다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css”; />
<script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>;
<script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script>;
<script src=”js/cordova-2.2.0.js”></script>
<script src=”soccer.js”></script>
<script type=”text/javascript”></script>
</head>
<body onload=”init();”>
<div data-role=”page” data-dom-cache=”true” id=”home” >
<div data-role=”header” data-position=”fixed” data-theme=”b”>
<h1>Soccer Player</h1>
</div>
<div data-role=”content” id=”listContent” onload=”initList();”>
<ul data-role=”listview” id=”SoccerPlayerList” data-split-theme=”e”>
</ul>
</div>
<div data-role=”footer”>
<a href=”SoccerPlayerEdit.html”>New Player</a>
</div>
</div>
</body>
</html>
SoccerPlayer.html 의 내용
<div data-role=”page” id=”newPlayer”>
<div data-role=”header” data-position=”fixed” data-theme=”b”>
<h1>New Player</h1>
</div>
<div data-role=”content”>
<label for=”name”>New Player Name :</label>
<input type=”text” name=”name” id=”name” value=”" />
<label for=”club”>Player’s Club:</label>
<input type=”text” name=”club” id=”club” value=”" />
<a href=”#” id=”submitPlayer”>Create Player</a>
<a href=”SoccerPlayer.html” id=”back” rel=”external”>Back</a>
</div>
</div>
SoccerPlayerEdit.html 의 내용
JS파일의 함수들의 연관을 보고 따라가면 쉽게 확인 할 수 있다.
가장 중요한건 jQuery Mobile 을 사용하면서 확실하게 data-role을 지정해 주고 jQuery Mobile의 API를 사용하는것이다.
처음에는 $.mobile.changePage의 문제로 판단, 여러가지 옵션을 주었으나 똑같았다.
전체 폰갭 소스는 이클립스 프로젝트 로 올려놓았으니 이클립스에서 불러서 빌드하면된다.
한글 폰갭 DB 자료가 적어 고생했는데 많은 사람들이 도움을 받았으면 좋겠다.