Share
Acest tutorial vă va prezenta SQLite și dezvoltarea bazată pe baze de date cu Titanium Mobile. În mod specific, veți învăța să construiți o aplicație pentru gestionarea produselor cu o bază de date în loc de sistemul de fișiere.
Nu are sens logic să trebuiască să gestionați un fișier individual pentru un produs. Mai ales atunci când există un mare catalog de produse pentru menținere. Iată un exemplu.
Dosarele și fișierele din stânga reprezintă modul în care proiectul nostru va arăta la sfârșit. Doar câteva fișiere într-un dosar și într-un fișier de bază de date. În partea dreaptă este un director aflat în afara controlului, descurajator. Cred că această imagine ar trebui să fie suficientă motivație. Unul dintre celelalte avantaje va fi amprenta redusă a aplicației.
Vom avea nevoie de Titanium Mobile, un editor de text bun (oricine vă va face plăcere) și un manager de baze de date SQLite. Iată cei doi administratori SQLite pe care le folosesc:
Ambele sunt opțiuni grozave. Îmi place foarte mult SQLite Manager, dar personal nu-mi place că rulează ca un plugin Firefox, și nu ca o aplicație independentă. Browserul de baze de date SQLite nu arată la fel de lustruit, dar poate fi rulat ca aplicație independentă. Din acest motiv, am tendința de a utiliza SQLite Database Browser.
Deschideți Titanium Developer și creați un nou proiect. Alege Mobil și completați toate informațiile solicitate. Titanium Developer detectează automat dacă SDK-ul iPhone și SDK-ul Android sunt instalate corect. Apoi apasa Creați un proiect.
Deschideți oricare dintre programele pe care le alegeți și faceți clic pe Noua bază de date. Denumiți baza de date "products.sqlite". Numele aplicațiilor, ale bazei de date și ale fișierelor nu contează. Doar amintiți-vă ce folosiți. Salvați fișierul în dosarul Resurse creat de Titanium Developer. Completați baza de date cu informațiile despre produs. Asigurați-vă că ați lovit salvați.
Deschideți fișierul Resurse / app.js al aplicației (Dacă nu ați mai lucrat cu Titanium Developer înainte, "app.js" este fișierul principal al aplicației dvs.).
Eliminați tot codul existent.
Cu o simplitate în minte, vreau să păstrez toate fișierele pentru produse într-un singur director. Hai să mergem la folderul Resurse și să creăm un folder numit "produse". Vom salva celelalte fișiere aici.
Înapoi în app.js, dorim să creăm un grup de file, deoarece acest lucru va face mai ușor adăugarea mai multor file și conținut mai târziu. Setați eticheta ferestrei, deschideți fereastra cu produsele noastre și adăugați fereastra la vizualizarea curentă. Veți avea nevoie de o imagine pentru imaginea de pe filă. Am copiat o imagine din filele din aplicația KitchenSink, care este proiectul demo de prezentare oferit de Appcelerator pentru a prezenta toate caracteristicile.
// crează grupul de taburi var tabGroup = Ti.UI.createTabGroup (); // creați fereastra principală var princip = Ti.UI.createWindow (title: 'Categorii de produse', url: 'products / product_category.js'); // creează fila principală var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titlu: 'Produse', fereastră: main); // adăugați fila în tab-grup tabGroup.addTab (tab); // deschide grupul tab tabGroup.open ();
Nu vom mai trebui să atingem din nou codul din app.js, astfel încât să puteți continua și să îl închideți dacă doriți.
Creați un nou fișier JavaScript în folderul nostru de produse numit product_category.js. Lucrul important de ținut minte în această pagină este acela că va fi primul care se va încărca atunci când aplicația noastră va fi lansată inițial. Asta înseamnă că vom avea majoritatea codului nostru în acest fișier. Cel mai bun lucru este că acest cod va fi refolosit pentru următorul fișier, cu doar câteva modificări.
Înainte de a codifica această pagină, ar trebui să ne gândim la ceea ce trebuie să se întâmple. Pagina trebuie să deschidă o bază de date, să citească coloana categoriei și să afișeze rezultatele într-o vizualizare de tabel. Pentru a atașa rezultatele bazei de date la tableView, trebuie să creăm un tablou și să împingem datele către el. Cel mai bun mod de a face acest lucru este crearea unei funcții. În acest fel, nu trebuie să știm din timp câte rânduri din baza de date trebuie citite. Vom lăsa pur și simplu funcția să reproducă prin baza de date până când va citi toate rândurile active.
De asemenea, trebuie să creați un EventListener pentru care se face clic pe unul dintre rânduri. Să începem prin a obține totul împreună, cu excepția funcției și EventListener.
Accentsconagua
// create var pentru curentWindow var currentWin = Ti.UI.currentWindow; // setați datele din baza de date la funcția de matrice setData () ** FUNCTION HERE **; // a crea vizualizarea tabelului var tableview = Ti.UI.createTableView (); tableview.addEventListener ("faceți clic", funcția (e) ** EVENTLISTENER HERE **); // adăugați tableView în fereastra curentă currentWin.add (tableview); // apela funcția setData pentru a atașa rezultatele bazei de date la matrice setData (); Acest lucru este destul de simplu. Acum funcția setData (). Începeți prin conectarea la baza de date și interogând-o pentru categorie. Pentru a elimina duplicatele și pentru a returna doar un rând pentru fiecare categorie, vom folosi comanda DISTINCT SQL.
var db = Ti.Database.install ('... /products.sqlite'''products'); var rows = db.execute ('SELECT DISTINCT category FROM PRODUCTS'); Creați matricea și utilizați a in timp ce declarație pentru a itera prin baza de date. Solicitați baza de date pentru numele câmpului "categorie" și setați-o la titlul rândului. (Titanium Developer utilizează "fieldByName" pentru a citi din coloana definită într-o bază de date și este utilizată împreună cu interogarea noastră pentru a selecta conținutul nostru.) Specificați că există un element copil și setați calea către fișierul următor.
var dataArray = []; în timp ce (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('categoria') +", hasChild: true, path: '... /products/products.js'); rows.next (); ; În final, atașați matrice la tableview.
tableview.setData (dataArray);
Acum, trebuie să creați EventListener pentru a deschide următoarea pagină. Un lucru pe care trebuie să-l facem și aici este să transmitem variabilele la fișierul următor. Acest lucru va fi folosit pentru a construi următoarea interogare SQL și pentru a seta titlul ferestrei. De asemenea, vom seta apelul de la ascultător la calea către următorul fișier, chiar dacă este static.
tableview.addEventListener ("clic", funcția (e) if (e.rowData.path) var win = Ti.UI.createWindow (url: e.rowData.path, title: e.rowData.title); var prodCat = e.rowData.title; win.prodCat = prodCat; Ti.UI.currentTab.open (win);); Ascultătorul captează clicul, apoi creează o nouă fereastră. Această fereastră nouă deschide următorul fișier și stabilește titlul ferestrei noi în conținutul rândului. În cazul nostru este categoria produsului. Apoi, creăm o variabilă din conținutul rândului și o transmitem în fereastra nouă, numind var. În cele din urmă, ascultătorul deschide noul grup de file, care este următoarea pagină.
Iată ce arată fișierul "product_category.js":
Selectați tot codul din fișierul "product_category.js" și faceți clic pe copie. Creați un nou fișier JavaScript numit "products.js" și inserați codul. Trebuie doar să facem câteva modificări și să adăugăm variabila pe care am trecut-o pentru a funcționa această pagină.
În interiorul funcției noastre, sub apelul nostru pentru a deschide baza de date, adăugați următorul cod, prinzând var.
var prodCat = Ti.UI.currentWindow.prodCat;
Acum trebuie să schimbăm interogarea noastră în baza de date și să folosim noua noastră variabilă. Vrem să citim acum numele produselor din categoria selectată anterior și să afișăm aceste produse.
var rows = db.execute ('SELECT * FROM produse WHERE categorie =' '+ prodCat +' "'); Schimbați domeniul fieldByName în rândul de la "category" la "name" și calea către următorul fișier.
dataArray.push (title: "+ rows.fieldByName ('nume') +", hasChild: true, cale: '... /products/product_specs.js'); Ultimul lucru necesar pentru a finaliza această pagină este de a schimba var introdus în EventListener. Schimbați-l pentru a trece numele produsului și utilizați un nume var care are sens.
var prodName = e.rowData.title; win.prodName = ProdName;
Terminat. Iată ce arată "products.js":
Acesta este ultimul fișier pe care trebuie să-l creăm pentru acest tutorial. Scopul acestei pagini va fi afișarea conținutului rândului pentru fiecare produs. Să ne uităm la tot codul și apoi să-l rupem.
// create var pentru curentWindow var currentWin = Ti.UI.currentWindow; var db = Ti.Database.install ('... /products.sqlite','productSpecs'); var prodName = Ti.UI.currentWindow.prodName; var rows = db.execute ('SELECT * FROM produse WHERE nume =' '+ prodName +' "'); var data = [title: "+ rows.fieldByName ('lățime') +", antetul: 'Width', title: "+ rows.fieldByName (" culoare ") +", antetul: "Culoare", title: "+ rows.fieldByName ('qty') +; var tableview = Ti.UI.createTableView (date: data); currentWin.add (tableview); Ceea ce se întâmplă de mai sus este același lucru pe care l-am făcut și în paginile anterioare, nu ascultăm pentru o acțiune și ne ocupăm de matrice, în loc să folosim o funcție. În acest fel, putem să etichetăm informațiile cu un antet de rând și să ordonăm conținutul cum ne dorim ca acesta să fie afișat.
Tot ce trebuia să faceți este să creați un rând individual în matrice folosind numele coloanelor bazei de date.
Acest lucru pare a fi o mulțime de lucru la început, dar rezultatul este bine meritat. Cea mai bună parte este că, odată ce codul este completat în primele două fișiere de produse, nu va trebui niciodată atins. Funcția setData () se măsoară fără ajutor. Același cod va funcționa indiferent dacă baza de date are un rând sau cincizeci și trei!
