【Android】PhoneGapを使用してDBアクセスするアプリを作成する

PhoneGapと、HTML、CSS、jquery mobile を使用してAndroidアプリを作成しました。

1.ノート一覧

2.ノート追加ダイアログ

3.ノート更新画面
しかし、この画面はダイアログとは異なり履歴が残り再表示されてしまうため、UpdateとDeleteをそれぞれ独立した機能にしたダイアログにするように変更したい。

お作法として、ページロード時に、"deviceready"でPhoneGapが使用できる状態にあるか確認する必要があります。 使用できるなら"onDeviceReady"関数を実行し、初期処理を書いておきます。

function init() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    // DBが使用可能か確認する
    if (!window.openDatabase) {
        alert("Database is not supported.");
    } else {
        // テーブルの存在を確認する 
        var db = window.openDatabase(dbName, dbVersion, dbDispName, dbSize);
        db.transaction(existNoteTbl, cbEerror);
    }
〜
}

ちなみに、初期処理内で、テーブルの存在を確認している"existNoteTbl"関数は次の通りです。
SELECT文を関数に渡されたトランザクションでクエリを実行してます。

function existNoteTbl(tx) {
    console.log("calling existNoteTbl.");
    tx.executeSql('SELECT * FROM sqlite_master WHERE type=? AND name=?', ["table", "user_note"], cbExistNoteTbl, cbEerror);
}

tx.executeSqlの引数に、"cbExistNoteTbl"、"cbEerror"とありますが、クエリ実行時に成功した際のコールバック関数名と、クエリ実行時に失敗した際のコールバック関数です。

CREATE TABLE文

tx.executeSql("CREATE TABLE user_note (id INTEGER PRIMARY KEY, content TEXT, add_date TEXT)");

INSERT文

tx.executeSql('INSERT INTO user_note (content, add_date) VALUES (?,datetime("now", "localtime"))', [note], cbAddNote, cbEerror);

データを抽出する関数です。検索ボックスに文字列を入力された際の処理も記述してます。

function getNote(tx) {
    console.log("calling getNote.");
    var search = jQuery.trim($('#search')[0].value);
    if (search == "") {
        tx.executeSql('SELECT * FROM user_note ORDER BY add_date DESC', [], cbGetNote, cbEerror);
    } else {
        search = '%' + search + '%';
        tx.executeSql('SELECT * FROM user_note WHERE content LIKE ? ESCAPE "$" ORDER BY add_date DESC', [search], cbGetNote, cbEerror);
    }

}

前記のコールバック関数（省略箇所あり）

function cbGetNote(tx, results) {
    console.log("calling cbGetNote.");
    var li = [];
    for(var i = 0; i < results.rows.length; i++) {
        // 抽出データを取得する
        var row = results.rows.item(i);
        var id = row.id;
        var content = row.content;
        var date = row.add_date;

        // 改行コードを改行タグに変換する

        // リストを作成する
        li.push('
');
        li.push('
');
        $('#dataList')[0].innerHTML = li.join("");
    }
    // 再描画
    $('#dataList').listview('refresh')
}

まだ書きかけ。