Share
Bine ați venit în cea de-a treia parte a seriei noastre despre dezvoltarea bazată pe baze de date Titanium Mobile. Acest tutorial va continua să se bazeze pe principiile introduse în posturile anterioare, dar vom modifica designul aplicației într-un mod foarte semnificativ. În loc să utilizați un obiect TableView pentru a afișa o interfață personalizată, vom trece la utilizarea unui obiect WebView. Motivul pentru aceasta este faptul că obiectul WebView ne va permite să controlam interfața noastră folosind CSS și HTML, iar TableView nu va. Pentru cei care vin dintr-un mediu de dezvoltare web, ar trebui să vă simțiți ca acasă cu această abordare.
Prima parte a acestei serii a pus bazele unei aplicații bazate pe baze de date. A doua parte a extins funcționalitatea prin crearea capacității de a citi o bază de date la distanță și de a introduce valori în tabelele noastre. Acest tutorial va utiliza codul sursă din primele două părți din această serie.
Deschideți Titanium Developer și creați un nou proiect. Alege Mobil și completați toate informațiile solicitate. Apoi apasa Creați un proiect. Copiați produse din aplicația anterioară și din products.sqlite bază de date în noul director de resurse. Descărcați jQuery și plasați-o și în directorul de resurse. De asemenea, creați un folder nou și denumiți-l imagini. Acum ar trebui să fii gata să pleci.
Vom desprinde fișierul app.js pentru simplitate. Eliminați totul, cu excepția locului în care am creat tab-grupul. Deschideți tabGroup și creați prima noastră fila. Aici este:
var tabGroup = Ti.UI.createTabGrup (); var main = Ti.UI.createWindow (title: 'Categorii de produse', url: 'products / product_category.js'); var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titlu: 'Produse', fereastra: main); tabGroup.addTab (tab); tabGroup.open ();
Dacă lansați aplicația, ar trebui să pară familiar:
NOTĂ: Dacă ați copiat baza de date din Partea a 2-a din această serie, vă puteți întreba de ce nu există valori adiționale adăugate (cele adăugate din interiorul aplicației). Acest lucru se datorează faptului că baza de date locală activă este instalată pe dispozitiv. Dosarul nostru local rămâne neatins. Dacă eliminați aplicația anterioară de la simulator și o reinstalați, baza dvs. de date va reveni la starea inițială.
Primul fișier care este încărcat de aplicația noastră este "product_category.js". Vom lăsa acest dosar complet singur. Următorul lucru pe care îl putem face pentru a păstra lucrurile curate este ștergerea fișierului "product_specs.js". Vom folosi un WebView pentru a înlocui funcția acestui fișier. Deschideți "products.js" și hai să facem hacking. În afară de eventListener, există doar un singur lucru pe care trebuie să îl modificăm în acest fișier. Scoateți cale de unde ne construim matricea:
Accentsconagua
var dataArray = []; în timp ce (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('nume') +", hasChild: true); rows.next (); ; ... Dacă executăm aplicația noastră în acest moment, probabil că nu vom reuși să ne ștergem fișierele și să schimbăm informațiile de mai sus. Cu toate acestea, arata cum ar arata:
EventListener este acum responsabil de rezultatul evenimentului clic. Primul lucru pe care trebuie să-l schimbăm este declarația noastră dacă. Anterior, verificam dacă există o cale. De când am eliminat calea, trebuie să atașăm altceva pentru a verifica. De asemenea, trebuie să folosim acest lucru pentru a determina ce element a fost selectat. Utilizați "titlu". Aceasta este singura valoare pe care o avem, care este un identificator unic. Asigurați-vă că modificați această valoare când creăm și fereastra.
tableview.addEventListener ('click', funcția (e) if (e.rowData.title) var win = Ti.UI.createWindow (title: e.rowData.title, backgroundColor: "# 000"; Să ne gândim la următorii pași. Trebuie să creăm un WebView și să ne stabilim calea, să căutăm baza de date bazată pe rândul selectat (trebuie să facem acest lucru aici pentru că Ti.Database nu este accesibil de la un WebView), să creeze variabilele noastre din interogarea bazei noastre de date și, în final, la WebView. Un lucru de retinut este ca nu putem trece nimic in WebView pana cand nu este creat. Vom folosi o funcție setTimeout pentru a întârzia trecerea variabilelor. Iată cum se termină codul:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('... /products.sqlite'''products'); var specs = db2.execute ('SELECT * FROM Produse WHERE nume =' '+ e.rowData.title +' "'); var nume = specs.fieldByName ("nume"); var pwidth = specs.fieldByName ('pwidth'); var pheight = specs.fieldByName ("pheight"); var pcolor = specs.fieldByName ("pcolor"); var qty = specs.fieldByName ('cantitate'); var stripName = removeSpaces (specs.fieldByName ('nume')); funcția removeSpaces (strip) retur strip.split (") join ("); ; // Adăugați webView în fereastra win.add (web); // Crearea unui timeout - dorim ca timpul să fie pregătit înainte de a declanșa evenimentul setTimeout (funcția () Ti.App.fireEvent ("webPageReady", nume: nume, pwidth: pwidth, pheight: pheight, pcolor : pcolor, cantitate: qty, stripName: stripName);, 500); Ti.UI.currentTab.open (victorie, animate: true); ... Am creat oa doua instanță a bazei de date (ca o variabilă locală în interiorul funcției. Folosim aici domeniul de aplicare pentru a ne asigura că nu ne confruntăm cu nimic) și a creat interogarea noastră cu datele din valoarea titlului rândului selectat. A creat variabilele individuale pentru datele din coloana bazei de date și a creat oa doua variabilă folosind numele produsului, eliminând numai spațiile cu funcția "removeSpaces". Acest lucru este astfel încât să putem crea o cale către o imagine utilizând numele produsului în WebView.
Apoi adăugăm WebView la ferestrele curente. Variabilele noastre sunt transmise WebView și numite "webPageReady" de către TI.App.fireEvent. Aceasta se declanșează odată ce intervalul specificat de timp a trecut de la funcția setTimeout. În cazul nostru, este de 500 milisecunde sau jumătate de secundă.
Dacă am fi creat WebView chiar acum, totul ar funcționa bine. Cu toate acestea, ar exista ceva care pur și simplu nu a făcut-o simți direct către utilizator. WebView va fi creat și setul de date, dar ar exista o secundă de timp în care pagina a fost necompletată sau elemente lipsă. Se pare că ceva este rupt. Utilizatorii s-au obișnuit să știe mereu că se întâmplă ceva. Pentru utilizatorii de Windows, există acea sticlă de ceas mic, utilizatorii OS X au roata de culori rotative, etc.
Utilizatorii s-au obișnuit să știe mereu că se întâmplă ceva.
Pentru indicatorul nostru de activitate, trebuie să creați o fereastră nouă, să creați indicatorul de activitate, să setați durata de afișare a acestuia și să ascundeți fereastra. Trebuie să adăugăm, de asemenea, indicatorul de activitate la fereastra nouă și fereastra nouă la vizualizarea curentă.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', opacitate: 0,8); var actInd = Ti.UI.createActivitateIndicator (stil: Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN); actWin.add (actInd); dacă (Ti.Platform.name == 'iPhone OS') actInd.show (); actInd.color = '#FFF'; actInd.message = 'Încărcare ...'; setTimeout (funcție () actInd.hide ();, 1500); ; setTimeout (funcție () actWin.hide ();, 1500); // Adăugați webView în fereastra win.add (web, actWin); ...
Când creăm indicatorul, setăm stilul să arate ca indicatorul standard pentru iPhone. De asemenea, dorim ca acest lucru să arate așa nativ cat posibil si lasati utilizatorul sa stie ce se intampla. Utilizăm o instrucțiune if, setând-o pentru a verifica tipul platformei, a adăuga un mesaj și a stabili intervalul de timp înainte de a ascunde fereastra.
Acest timp este în interiorul instrucțiunii if, deci trebuie să creați o altă funcție de expirare pentru a ascunde fereastra. În ambele cazuri, setăm ora la 1500 de milisecunde. Gândindu-ne la ultimul pas, am permis 500 de milisecunde înainte de transmiterea datelor noastre. Aceasta va permite o altă secundă pentru ca datele să fie încărcate efectiv în WebView.
Creați un nou fișier html cu numele și locația pe care le-am stabilit mai sus atunci când am creat WebView. Nu este necesar să adăugați toate standard Informații antet HTML. Îmi place să-mi declar doctype și să adaug
Etichete. Vom avea nevoie de acest lucru pentru că trebuie să folosim câteva scripturi.Mai întâi, creați conținutul corpului. Cu ajutorul unui tabel, adăugați cantitatea necesară de rânduri și coloane. Pentru acest tutorial, avem nevoie de patru rânduri și două coloane. Eticheta va fi în coloana din stânga și spec. În dreapta. Utilizați un spațiu () care nu se rupe () în celula spec. Asa arata masa noastra:
Lăţime Înălţime Culoare Cantitate
De asemenea, este o idee minunată să adăugăm o foaie de stil astfel încât să putem particulariza modul în care se afișează pagina noastră. Direct de sub "conținut" div vrem să creați o formă de antet propriu. Cred că este o idee bună să afișați numele produsului și să arătați o imagine. Cel mai important lucru pe care trebuie să-l faci atunci când construim masa noastră este să adăugăm un "id" la celulă care va conține specificațiile noastre. De dragul stilului, ar trebui să adăugăm o clasă celulelor similare.
În tutoriile anterioare, am creat o variabilă pe o singură pagină și am atașat-o în noua fereastră. Această variabilă a fost accesată utilizând Ti.UI.currentWindow.varName și apoi accesată la nivel global pentru pagină. Pentru că acesta este un WebView, nu putem face acest lucru. Ceea ce trebuie să facem este să adăugăm un EventListener și să prindem variabilele trecute.
Consola din Titanium Developer înregistrează variabilele și valorile care sunt transmise. Acest lucru poate fi foarte util pentru depanare.
În EventListener specificăm evenimentul pe care îl ascultăm (webPageReady) și ne declarăm variabilele folosind callback-ul nostru.
Acum, când avem declarate variabilele noastre, trebuie să ne dăm seama cum să le folosim în pagina noastră. Nu le putem returna din funcție și apoi vom folosi variabilele din tabelul nostru, așa că trebuie să fim creativi. Încărcați jQuery pe pagina dvs. și împachetați actualul EventListener în interiorul unei funcții document.ready.
Apoi folosiți id-ul pentru fiecare celulă definit în pasul anterior și înlocuiți elementul folosind jQuery și variabila corectă.
Ultimul element pe care îl înlocuim în codul de mai sus este variabila imaginii produsului nostru. Utilizați variabila din numele produsului pentru care am eliminat spațiile pentru a construi linkul către imagine. De asemenea, asigurați-vă că creați directorul și imaginile pentru fiecare produs. Din motive de stil, este o idee minunată de a face ca toate imaginile produsului să aibă aceeași dimensiune. Ceva ca 150px la 150px este o mărime bună pentru majoritatea ecranelor.
În cele din urmă ar trebui să avem o aplicație de lucru cu tot codul finalizat. Iată cum arată WebView:
Odată ce imaginile noastre sunt create pentru toate produsele, este foarte ușor să folosiți câteva CSS standard în foaia de stil și să facem paginile produselor să arate exact cum dorim să apară. Dacă informațiile pe care le afișăm și le folosim în aplicația noastră sunt actualizate frecvent, poate fi o bază de date la distanță.
