Un simple Cordova Android exemple avec lecture / écriture et recherche Sqlite
Je travaillais sur un projet d'application Android Android utilisant Cordova qui, en moi, avait une simple base de données Sqlite.
--------------------
ID | Name | Number |
--------------------
Depuis que je suis nouveau dans les applications Android, je viens de préparer l'interface utilisateur. J'ai deux text inputs, une <div> tag pour afficher les données de la table et 3 buttons. Et lorsque l'utilisateur appuie sur chaque colonne, une fenêtre contextuelle s'affiche pour supprimer ou modifier le contenu de la ligne.
Voici le code HTML pour l'interface utilisateur:
<body>
<h1>My first App</h1>
<p>Open Database</p>
<div id="qrpopup" > //The hidden div tag for implementing the popup
<hr/>
<input type="text" id="editNameBox"><br>
<input type="text" id="editNumberBox"><br>
<button onclick="goDelete()">Delete</button>
<button onclick="goEdit()">Edit</button>
<button onclick="document.getElementById('qrpopup').style.display='none';">Discard</button>
</div>
<div>
Name<input type="text" value="Name" id="txtName">
Number<input type="text" value="123" id="txtNumber"><hr/>
</div>
<div id="tblDiv"></div>
<div style="text-align: center">
<button onclick="goInsert()">Insert</button>
<button onclick="goSearch()">Search</button>
<button onclick="successCB()">Show All</button>
</div>
</body>
J'ai également utilisé certains styles Css pour améliorer l'apparence de mon application. Voici mon style.css fichier:
input[type='text'] {
border: 1px solid black;
width: 200px;
margin-left: 10px;
}
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
button {
margin: 10px;
font: bold 13px "Helvetica Neue", Helvetica, Arial, clean, sans-serif !important;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
display: inline-block;
color: white;
padding: 5px 10px 5px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
background-color: #BE3E76;
border-style: none;
text-align: center;
overflow: visible;
}
button:active {
background-position: 0 -100px;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
-webkit-box-shadow: none;
}
#qrpopup {
position:fixed;z-index:9999;background-color:rgba(0, 0, 0,0.9);width:100%; height:100%;display:none;
}
Mais je veux savoir comment créer des fonctions d'insertion, d'édition, de suppression et de recherche à l'aide de javascript dans Cordova?
Donc, après 3 jours d'essais, j'ai finalement réussi et j'ai dit qu'il valait mieux le partager avec les personnes intéressées par l'utilisation de la base de données Sqlite dans Cordova et PhoneGap. Voici donc la réponse:
Ces scripts continuent <head> tag:
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
var currentRow;
// Populate the database
//
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id INTEGER PRIMARY KEY AUTOINCREMENT, name,number)');
}
// Query the database
//
function queryDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}
function searchQueryDB(tx) {
tx.executeSql("SELECT * FROM DEMO where name like ('%"+ document.getElementById("txtName").value + "%')",
[], querySuccess, errorCB);
}
// Query the success callback
//
function querySuccess(tx, results) {
var tblText='<table id="t01"><tr><th>ID</th> <th>Name</th> <th>Number</th></tr>';
var len = results.rows.length;
for (var i = 0; i < len; i++) {
var tmpArgs=results.rows.item(i).id + ",'" + results.rows.item(i).name
+ "','" + results.rows.item(i).number+"'";
tblText +='<tr onclick="goPopup('+ tmpArgs + ');"><td>' + results.rows.item(i).id +'</td><td>'
+ results.rows.item(i).name +'</td><td>' + results.rows.item(i).number +'</td></tr>';
}
tblText +="</table>";
document.getElementById("tblDiv").innerHTML =tblText;
}
//Delete query
function deleteRow(tx) {
tx.executeSql('DELETE FROM DEMO WHERE id = ' + currentRow, [], queryDB, errorCB);
}
// Transaction error callback
//
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
// Transaction success callback
//
function successCB() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(queryDB, errorCB);
}
// Cordova is ready
//
function onDeviceReady() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
}
//Insert query
//
function insertDB(tx) {
tx.executeSql('INSERT INTO DEMO (name,number) VALUES ("' +document.getElementById("txtName").value
+'","'+document.getElementById("txtNumber").value+'")');
}
function goInsert() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(insertDB, errorCB, successCB);
}
function goSearch() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(searchQueryDB, errorCB);
}
function goDelete() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(deleteRow, errorCB);
document.getElementById('qrpopup').style.display='none';
}
//Show the popup after tapping a row in table
//
function goPopup(row,rowname,rownum) {
currentRow=row;
document.getElementById("qrpopup").style.display="block";
document.getElementById("editNameBox").value = rowname;
document.getElementById("editNumberBox").value = rownum;
}
function editRow(tx) {
tx.executeSql('UPDATE DEMO SET name ="'+document.getElementById("editNameBox").value+
'", number= "'+document.getElementById("editNumberBox").value+ '" WHERE id = '
+ currentRow, [], queryDB, errorCB);
}
function goEdit() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(editRow, errorCB);
document.getElementById('qrpopup').style.display='none';
}
</script>
C'est ça! Vous pouvez maintenant ajouter, modifier, supprimer et rechercher vos données dans la base de données Sqlite à l'aide de Cordova.
J'espère que cela sera utile pour ceux qui sont intéressés.
Dans Cordova 5.2.0 J'ai dû faire ce qui suit pour le projet.
Ajouter le plugin plugin cordova ajouter cordova-plugin-sqlite
De plus, il utilise maintenant le sqlitePlugin.openDatabase au lieu de l'ancien window.openDatabase