Obsah
Web vytvořený pomocí HTML 5, JavaScript, CSS 3, lze spouštět na různých zařízeních pomocí Apache Cordova. Pokud máme mobilní aplikaci a chceme efektivně a spolehlivě ukládat, spravovat a načítat data, Apache Cordova nám poskytuje plugin pro zpracování databází SQLite.Android již ve své architektuře přináší všechny potřebné nástroje pro vytváření a správu databází SQLite, takže můžeme vkládat, upravovat, prohlížet a mazat data. Tato databáze bude lokální, to znamená, že bude uložena v zařízení, kde je aplikace spuštěna.
V dalším tutoriálu jsme již vysvětlili instalaci Apache Cordova, v tomto vytvoříme aplikaci, která porozumí tomu, jak databáze Sqlite funguje z Androidu.
V tomto případě použijeme terminál Linux, ale Apache Cordova je multiplatformní. Začneme vytvořením projektu z terminálu a v režimu root pomocí následujícího kódu:
cordova vytvořit aplikaci com.demo.app App01
platforma cordova přidat androidPředpokládáme, že ve správci Android Adv máme zařízení již nakonfigurované, ale konfigurujeme takové, které podporuje Api 19 a dále, tedy Android 4.4.2
Cordova plugin přidat https://github.com/brodysoft/Cordova-SQLitePlugin.gitBudeme testovat, zda výchozí aplikace funguje, proto přejdeme na terminál a napíšeme následující kód
cordova emulovat androidZačne kompilovat aplikaci a pokud vše funguje, měli bychom vidět emulované zařízení, jak je uvedeno níže.
ZVĚTŠIT
Poté blok upravíme Vložil jsem formulář pro zadávání údajů
Liniebude sloužit k zobrazení zadaných dat nalezených v databázi. Uvnitř adresáře css najdeme soubor index.css, tento soubor otevřeme, odstraníme jeho obsah a přidáme následující kód stylu, který formuláři dodá design.Kontaktní informace
Vyrýt
- název
- E-mailem
html, body, h1, form, fieldset, ol, li {margin: 0; polstrování: 0; } body {background: #ffffff; barva: # 111111; rodina písem: Georgia, "Times New Roman", Times, serif; čalounění: 20px; } formulář # kontakty {pozadí: # 9cbc2c; -moz-border-radius: 5px; -webkit-border-radius: 5px; čalounění: 20px; šířka: 400px; výška: 150px; } form # kontakty pole {border: none; margin-bottom: 10px; } form # sada kontaktů pole: poslední typ {margin-bottom: 0; } form # legenda kontaktů {color: # 384313; velikost písma: 16px; font-weight: bold; vycpávky-dole: 10px; } form # kontakty> sada polí> legenda: před {content: "Krok" čítač (sady polí) ":"; proti-přírůstek: sady polí; } formulář # kontakty sada polí pole legenda {barva: # 111111; velikost písma: 13px; font-weight: normal; polstrování-dole: 0; } formulář # kontakty ol li {pozadí: # b9cf6a; pozadí: rgba (255,255,255, .3); barva ohraničení: # e3ebc3; barva ohraničení: rgba (255,255,255, .6); styl ohraničení: pevný; šířka okraje: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; výška řádku: 30px; styl seznamu: žádný; polstrování: 5px 10px; okrajové dno: 2px; } formulář # kontakty ol ol li {pozadí: žádný; hranice: žádná; plavat vlevo; } formulář # štítek kontaktů {float: left; velikost písma: 13px; šířka: 110px; } formulář # kontakty sada polí pole popisek {pozadí: žádné neopakování vlevo 50%; výška řádku: 20px; čalounění: 0 0 0 30px; šířka: auto; } formulář # kontakty sada polí pole popisek: hover {kurzor: ukazatel; } formulář # kontakty textarea {pozadí: #ffffff; hranice: žádná; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; písmo: kurzíva 13px Georgia, "Times New Roman", Times, patkové; obrys: žádný; polstrování: 5px; šířka: 200px; } formulář # kontakty vstup: ne ([typ = odeslat]): zaměření, formulář # kontakty textarea: zaměření {pozadí: #eaeaea; } formulář # tlačítko kontaktů {pozadí: # 384313; hranice: žádná; plavat vlevo; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; poloměr ohraničení: 20px; barva: #ffffff; displej: blok; písmo: 14px Georgia, "Times New Roman", Times, patkové; řádkování: 1px; okraj: 7px 0 0 5px; polstrování: 7px 20px; text-stín: 0 1px 1px # 000000; transformace textu: velká písmena; } tlačítko formuláře # kontakty: vznášet se {pozadí: # 1e2506; kurzor: ukazatel; }Po zaznamenání dvou souborů spustíme aplikaci znovu:
cordova emulovat androidMěli bychom vidět následující obrazovku:
ZVĚTŠIT
Do souboru sqlitedb.js napíšeme následující kód:
// Jako událost vložíme okamžik spuštění aplikace a zahájení komunikace se zařízením document.addEventListener ("deviceready", onDeviceReady, false); // variabilní pole formuláře var name, email; // Spustím aplikaci Vytvořím databázovou funkci onDeviceReady () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (CreateDB, errorDB); } Každá transakce v databázi je provedena s definovaným objektem db a je provedena pomocí transakční metody. Tato metoda vrací parametr s výsledkem tohoto provedení, který je uložen konvencí v parametru tx, každá transakce má funkci jako parametr což je samotná transakce, například zápis dat a chybová funkce v případě, že transakce selže. Pokračujeme funkcí CreateDB a funkcí errorDB Funkce CreateDB (tx) {tx.executeSql ('CREATE TABLE IF NOT EXISTS contacts (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL)'); } funkce errorDB (tx, err) {alert ("chyba SQL:" + err); } // funkce Vložení dat do funkce databáze InsertSQL (tx) {name = document.getElementById ('name'). value; email = document.getElementById ('email'). hodnota; tx.executeSql ('VLOŽIT DO KONTAKTŮ (jméno, e -mail) HODNOTY ("' + jméno + '', '' + email + '') '); alert ('Záznam přidán'); } // funkce, která generuje transakci pro přidání datové funkce record () {var db = window.openDatabase ("Agenda", "1.0", "Agenda", 100000); db.transaction (InsertSQL, errorDB); // Zobrazit data z tabulky db.transaction (ConsultDB, errorDB); } // Zkontrolujeme všechny záznamy v tabulce kontaktů a výsledek je použit ve funkci ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Funkce ListDB přijímá parametr transakce a sadu záznamů s obsahem dotazu, procházíme sadu záznamů a extrahujeme každé pole, vygenerujeme seznam html a poté jej zobrazíme v div s identifikátorem seznamu prostřednictvím innerHtml, takže dynamický. funkce ListDB (tx, results) {var len = results.rows.length; var listing = ''; listing = listing.concat ("Výpis:" + len + "kontakty"); pro (var i = 0; i
'+ results.rows.item (i) .name+' '+ results.rows.item (i) .email); } document.getElementById ('list'). innerHTML = seznam; }Když máme veškerý kód, překomplikujeme aplikaci z terminálu následujícím kódem
cordova emulovat androidKdyž je emulátor nasazen s aplikací, začneme přidávat záznamy do naší agendy a ty se zobrazí níže, zařízení uchovává data, která trvale zadáváme, ve virtuální paměti, to znamená, že databáze nebude odstraněna každý po spuštění aplikace v emulátoru nebo v reálném zařízení budeme moci vidět data, která jsme registrovali.
ZVĚTŠIT
