In einem früheren Tutorial haben wir gesehen, wie man eine einfache Anwendung mit Apache Cordova, Jquery Mobile, HTML5 und CSS entwickelt, mit der wir einer SQLite-Datenbank Datensätze hinzufügen können. In diesem Fall sehen wir, was die einzelnen Funktionen im Code bewirken.
Opendatabase () - Funktion
Die Funktion opendatabase wird verwendet, um eine Datenbank zu erstellen oder zu öffnen, wenn sie bereits erstellt wurde. Wir benötigen vier Parameter, den Namen der Datenbank, die Version, den Namen der anzuzeigenden Datenbank und die Größe in Byte. Wenn wir eine Datenbank erstellen, wird diese in der Variablen gespeichert, die wir in diesem Fall db zuweisen.
Funktion CreartDB () { db = window.openDatabase ("Clients", "1.0", "Client List", 1000000);}
Wir können die Funktion auch ausführen, wenn Sie die Anwendung auf dem Android-Gerät starten
Beim Starten der Anwendung rufen wir die Funktion auf, die die Datenbank erstellt
// Wir fügen ein Ereignis hinzu, wenn die Anwendung gestartet wurde document.addEventListener ("deviceready", StartDevice, false); Funktion StartDevice () { db = window.openDatabase ("Kunden", "1.0", "Kundenliste", 1000000); }
Möglicherweise müssen wir auch einige Aufgaben ausführen, während die Anwendung gestartet wird. In dem vorherigen Fall haben wir gesehen, wie eine Funktion aufgerufen wird, wenn die Anwendung bereits gestartet wurde.
Funktion Starting () { document.addEventListener ("deviceready", ConfigureApp (), false); } Funktion ConfigureAPP () { document.addEventListener ("resume", OtherFunction (), false); } <body onload = "Starting ()">
Aus dem HTML mit dem Onload-Ereignis, das heißt, wenn die Seite geladen wird, rufen wir die Starting-Funktion auf, während beim Start (deviceready) die ConfigureAPP-Funktion aufgerufen wird, die im Hintergrund ausgeführt wird (resume).
Einige Ereignisse, die wir auf Android nutzen können, sind:
deviceready: Dieses Ereignis tritt auf, wenn die Anwendung gestartet wurde.
Pause: Dieses Ereignis wird aktiviert, wenn eine Anwendung im Hintergrund ausgeführt wird.
resume: Dieses Ereignis tritt ein, wenn die Anwendung von der zweiten zur vordersten Zeile ausgeführt wird.
Online und Offline: Dieses Ereignis tritt ein, wenn die Anwendung eine Verbindung zu einem Netzwerk herstellt oder diese trennt.
Es gibt andere Ereignisse im Zusammenhang mit der Interaktion mit dem Telefon, aber wir werden diejenigen sehen, die eher mit der Codekontrolle zusammenhängen.
Transaction () Funktion
Wenn wir eine Transaktion vom Typ SQL ausführen möchten, verwenden wir die Transaktionsmethode. Die Funktion besteht aus drei Parametern, einer Funktion mit der SQL-Abfrage, einer Funktion zum Anzeigen eines Fehlers, wenn die Abfrage fehlschlägt, und einer Funktion zum Anzeigen, ob die Abfrage erfolgreich war.
Die Abfragefunktion wird mit der ExecuteSQL-Methode ausgeführt. Wir werden drei Funktionen erstellen, die beim Starten der Anwendung in einer Kette ausgeführt werden sollen:
DB konsultieren: mit SQL-Abfrage
errorCDB (): Zeigt an , ob die SQL-Abfrage einen Fehler enthält
successCDB (): Zeigt eine Nachricht an, wenn die Abfrage erfolgreich war.
script type = "text / javascript" charset = "utf-8"> // Beim Starten der Anwendung haben wir einige SQL-Abfragen gemacht document.addEventListener ("deviceready", IniciaSQL, false); Funktion IniciaSQL () { var db = window.openDatabase ("Kontakte", "1.0", "Kontaktliste", 400000); db.transaction (consultDB, errorCB, successCB); } Funktion queryDB (tx) { // Erstellen Sie die Kontakttabelle, wenn sie nicht erstellt wurde tx.executeSql ('CREATE TABLE IF NOT EXISTS Contacts (ID, Name, E-Mail)'); // Daten in die Tabelle einfügen tx.executeSql ('INSERT INTO Contacts (ID, Name, E-Mail) VALUES (1, "José Cordova", "[email protected]")'); tx.executeSql ('INSERT INTO Contacts (ID, Name, E-Mail) VALUES (2, "Maria Alpei", "[email protected]")'); } // Funktion zum Erfassen des Fehlers in der Transaktion Funktion errorCDB (Fehler) { alert ("Fehler in der SQL-Abfrage:" + error.code); } // Funktion zum Anzeigen einer Erfolgsmeldung Funktion exitCDB () { alert ("Erfolgreiche Anfrage!"); }
Abfragen und Anzeigen von Daten über eine SQL-Abfrage, die ein Array oder einen Array-Typ SQLResultSetList zurückgibt
Funktion queryDB (tx) { tx.executeSql ('SELECT * FROM Contacts', [], successCDB, errorCDB); } Funktion exitoDB (tx, Ergebnisse) { // Wir erhalten die Anzahl der Zeilen var totalcontacts = results.rows.length; // Anzahl der Kontakte anzeigen console.log ("Kontakte insgesamt:" + Kontakte insgesamt); // Wir zeigen die Protokolle in einer Schleife, in der wir jedes Feld des Arrays anzeigen für (var i = 0; i <len; i ++) { console.log ("Name =" + results.rows.item (i) .name + "Email =" + results.rows.item (i) .email); } } // Funktion, die den Fehler erfasst Funktion errorCDB (Fehler) { alert ("Fehler in der SQL-Abfrage:" + error.code); } // Beim Start führen wir das Öffnen der Datenbank und der Transaktion aus var db = window.openDatabase ("Kontakte", "1.0", "Kontaktliste", 400000); db.transaction (queryDB, errorCDB);
Die SQLResultSetList-Funktion verfügt über die Eigenschaft rows, die die Datensätze für jede Zeile der konsultierten Tabelle enthält. Dieses Array wird mit der Funktion rows.item (i) und der Zeilennummer durchlaufen. Wir müssen auch angeben, welches Feld dieser Zeile wir anzeigen möchten. Beispiel results.rows.item (i) .name.Wir können dieses Feld auch in einem HTML-Element anzeigen, z. B. in einem Textfeld, das auf seinen Bezeichner verweist.
Funktion querySuccess (tx, results) { var len = results.rows.length; document.getElementById ("divide"). innerHTML + = "<tr> <td> ID </ td> <td> Name </ td> </ tr>"; für (var i = 0; i <len; i ++) { document.getElementById ("divide"). innerHTML + = "<tr> <td>" + results.rows.item (i) .id + "</ td> <td>" + results.rows.item (i) .n ombre + "</ td> </ tr>"; } }
Dann müssen wir im HTML-Code in diesem Fall das div mit dem Bezeichner divmotrar haben, damit die Tabelle mit den Daten der Abfrage angezeigt wird.
<div id = "# divmostrar"> </ div>
Die Klammern in der Funktion executeSQL dienen zum Senden von Parametern. Diese Eigenschaft ist optional, da wir nicht immer Parameter an die SQL-Abfrage senden müssen. Wenn wir Parameter an eine Abfrage senden möchten, um beispielsweise Daten in der Datenbank zu aktualisieren:
Funktion Update (ID, Name) { db.transaction (function (tx) { tx.executeSql ("UPDATE Contacts SET name" =? WHERE id =? ", [name, id], errorCDB); });
Wir können auch auf HTML-Funktionen mit Ereignissen zugreifen, indem Sie auf eine Schaltfläche klicken. Sehen wir uns ein Beispiel an, als hätten wir die Standard-Indexdatei eines Apache Cordova-Projekts. Wir können den Code für die Datenbank und den HTML-Code mit der Schaltfläche Aufzeichnen hinzufügen. Wenn Sie auf die Schaltfläche Aufzeichnen klicken, wird eine Funktion ausgeführt, mit der Daten in die eingefügt werden Datenbank.
<head> <script type = "text / javascript" src = "cordova.js"> </ script> <script type = "text / javascript" src = "js / index.js"> </ script> <script type = "text / javascript"> app.initialize (); </ script> <script> Funktion onDeviceReady () { var db = window.openDatabase ("Kontakte", "1.0", Freunde ", 200000); db.transaction (queryDB, errorCB, successCB); // Wenn die neue Schaltfläche angeklickt wird, wird die Funktion zum Aufzeichnen von Daten ausgeführt $ ("#recording"). click (function () { db.transaction (recordDB, errorCDB, exitCDB); }); } Funktion queryDB (tx) { tx.executeSql ('CREATE TABLE IF NOT EXISTS Contacts (ID, Name, E-Mail)'); } Funktion grabaDB (tx) { // Wir nehmen die Werte der HTML-Elemente entsprechend ihrer Bezeichner, weisen sie Variablen zu und führen dann die Transaktion aus. In diesem Fall fügen wir einen Datensatz in die Tabelle ein. var id = document.getElementById ("id"). value; var name = document.getElementById ("name"). value; var email = document.getElementById ("email"). value; var sql = "INSERT INTO Contacts (ID, Name, E-Mail) VALUES (?,?,?)"; db.transaction (function (tx) {tx.executeSql (sql, [id, name, email])}, errorCDB, successCDB); } </ script> </ head> <body> <div class = "app"> <h1> Apache Cordova </ h1> <br/> <button id = "record"> Aufnehmen </ button> <br/> </ div> </ body> </ html>
Es ist ein anderes Projekt als Android und enthält viele Funktionen der nativen Version.
