The HTML5 SQLite spec results in a database with a limit of 5MB. Chris Brody’s SQLitePlugin, however, breaks this barrier. Here is how to implement it. These steps assume you’ve already created the Cordova project and are adding this database project to it. I recommend you build for v19.
My development environment:
Mac OS X 10.9.1 on latest Mac Mini
Cordova CLI 3.4.0
for Android 4.3, 4.4 v19
ADT v22.0.1 with Eclipse platform (not using Eclipse at this time)
Testing in device: Android-19, Nexus 7 with 4.3 (cordova prepare/cordova compile)
Not for PG Build; no Jquery or other JS or CSS packages used
Cordova-SQLitePlugin:
https://github.com/brodysoft/Cordova-SQLitePlugin
Benefits:
http://brodyspark.blogspot.in/2012/12/cordovaphonegap-sqlite-plugins-offer.html
Google Groups forum:
https://groups.google.com/forum/#!forum/Cordova-SQLitePlugin
Create PhoneGap project:
http://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/
Complete install from scratch:
http://iphonedevlog.wordpress.com/2013/08/16/using-phonegap-3-0-cli-on-mac-osx-10-to-build-ios-and-android-projects/
Installation
1. Create subfolder structure under platforms/android/src/ as:
platforms/android/src/android/org/pgsqlite/
2. Visit the plugin site on Git at https://github.com/brodysoft/Cordova-SQLitePlugin.
3. On Git site, navigate step 1’s folder structure and download the SQLitePlugin.java file contents to the pgsqlite/ folder among the project files. (To do this, right-click on the file, select Save Link As, and select the folder to save in.)
4. On Git site, enter the www/ folder and download the SQLitePlugin.js file to the project’s www/ folder the same way.
5. On Git site, download the plugin.xml and SQLitePlugin.coffee.md to the www/folder the same way.
6. In your project’s site, open www/config.xml and add these lines among the other plugins:
<feature name="SQLitePlugin"> <param name="android-package" value="org.pgsqlite.SQLitePlugin" /> </feature> <plugin name="SQLitePlugin" value="org.pgsqlite.SQLitePlugin"/>
7. Copy and paste the lines in step 6 into platforms/android/res/xml/config.xml
8. You don’t need to run “cordova plugin add xxx”
9. Create an html page (open a document in a text editor and save as sqlite.html) and paste the following example into it. Make sure you can reach the page when you build the app. Make sure you have the following plugins referenced in the <head></head> section:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
Here are the complete contents of the HTML page. I broke it up into several sections; just put them one after the other on the page in the order shown:
<!-- ********************* BEGIN *********************** -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING from Cordova: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title></title>
<style type="text/css">
.buttonClass, .buttonClass2, h2, p {
font-family: "Helvetica"; color: #000; font-size:1em;
}
.buttonClass, .buttonClass2 {
border-radius:8px; background-color:#fff;
border:#878787 solid 1px; padding:0 1em;margin:.5em;
height: 3em; width: 46%;
text-align:center;
-webkit-appearance:none;
}
.buttonClass2 {
background-color: silver;
}
.segment, .segment2 {
display:block; border-radius:8px; background-color:#eee;
border:#878787 solid 1px; padding:1em; margin:.5em;
text-align:left;
-webkit-appearance:none;
}
.segment2 {
}
h2 {
font-size:1.3em; font-weight: bold;
}
table {
width:100%;
}
td {
font-size:.8em;
padding: .5em;
width:25%;
border:1px gray solid;
overflow:auto;
border-radius: 4px;
background-color: #fff;
height:2em;
}
@media screen and (max-width:800px) {
.buttonClass { width: 100%;}
}
</style>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase("Database", "1.0", "Demo", -1);
db.transaction(populateDB, errorCB, successCB);
}
// create table
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS test_table');
tx.executeSql('CREATE TABLE IF NOT EXISTS test_table (id integer primary key, data1 text, data2 integer, svgImage text)');
tx.executeSql('INSERT INTO test_table (data1, data2, svgImage) VALUES (?,?,?)', ['test1', 100, '<svg version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="4.815" y="4.815" fill="#039BF9" stroke="" width="100" height="100"></svg>']);
tx.executeSql("INSERT INTO test_table (data1, data2, svgImage) VALUES (?,?,?)", ['test2', 200, '<svg version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><rect x="4.815" y="4.815" fill="#039BF9" stroke="" width="100" height="100"></svg>']);
queryDB(tx);
}
// form the query
function queryDB(tx) {
tx.executeSql("SELECT id, data1, data2, svgImage from test_table;", [], querySuccess, errorCB);
}
// Display the results
function querySuccess(tx, results) {
var len = results.rows.length;
alert("results.rows.length: " + results.rows.length + " [should be 2]");
for (var i = 0; i < len; i++) { // loop as many times as there are row results
document.getElementById("output").innerHTML +=
"<table><tr><td>ID = " + results.rows.item(i).id +
"</td><td>data1 = " + results.rows.item(i).data1 +
"</td><td>data2 = " + results.rows.item(i).data2 +
"</td><td>svgImage = " + results.rows.item(i).svgImage + "</td></tr></table>";
}
}
// Transaction error callback
function errorCB(err) {
console.log("Error processing SQL: " + err.code);
}
// Success error callback
function successCB() {
}
</script>
</head>
<body>
<input type="button" class="buttonClass" onclick='window.location="index.html"' value="return">
<div class="segment">
<h2>SQLitePlugin Test</h2>
<div id="output"> </div>
<input type="button" class="buttonClass" onclick='window.location="http://iphonedevlog.wordpress.com/2014/04/07/installing-chris-brodys-sqlite-database-with-cordova-cli-android/"' value="View Code On iPhoneDevLog">
</div>
</body>
</html>
<!-- ********************* END *********************** -->
Test the Page
1. In Terminal, build the app, making sure the path starts with your project folder:
cordova build
2. Install in device and test. You should get an alert saying how many rows of records are found in the Select query, and the output will be in table form. You should see a blue square (an SVG image) in each column.
Alert firing:
Image may be NSFW.
Clik here to view.
Final loading:
Image may be NSFW.
Clik here to view.
General Notes
- Android & iOS versions are working with Cordova 3.0 tooling.
- Drop-in replacement for HTML5 SQL API. The only major change is to use window.sqlitePlugin.openDatabase() or sqlitePlugin.openDatabase() instead of window.openDatabase().
- Keeps sqlite database in a user data location that is known, can be reconfigured, and iOS will be backed up by iCloud.
- No 5MB maximum! More information at: http://www.sqlite.org/limits.html
- Problem with Android 4.4 [unspecified].
- Issue buiding with Android SDK < 16.
- The db version, display name, and size parameter values are not supported and will be ignored.
- The sqlite plugin will not work before the callback for the “deviceready” event has been fired.
- The plugin class name starts with “SQL” in capital letters, but in JavaScript the sqlitePlugin object name starts with “sql” in small letters.
Filed under: Android, PhoneGap Tagged: Android, Chris Brody, Cordova, database, Javascript, SQL, SQLite Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
