Share
Bine ați venit în partea a treia a autentificării utilizatorului folosind Titanium. Titanium este un cross-compilator open source care vă permite să scrieți aplicații iPhone și Android (în curând să fie și!) Folosind Javascript. Vom folosi PHP ca limbaj de cod de server, iar baza mea de date va fi MySQL. Pentru acest exemplu, folosesc MAMP pentru a se dezvolta local. În partea a treia, vom acoperi adăugarea unei noi ferestre și transmiterea rezultatelor bazei noastre de date la acesta, atunci când un utilizator se conectează utilizând evenimente personalizate. Această nouă fereastră va reprezenta interfața dvs. "Logged In". Dacă nu l-ați citit deja, vă recomand să începeți cu prima parte.
În prima parte am creat baza de date și am adăugat un utilizator. Apoi am realizat interfața de conectare creând un grup tab, o filă și o fereastră. Apoi am dat butonul de conectare câteva acțiuni. Fișierul nostru PHP ne-a întrebat baza de date și, după ce ne-am înregistrat cu succes, ne-a revenit numele și adresa de e-mail. Dacă nu sa reușit conectarea, am returnat un șir pur și simplu afirmând numele de utilizator și / sau parola nevalide. În partea a doua am creat o filă nouă pe ecranul principal. Această filă a schimbat viziunea noastră într-o vizualizare "creare cont", care a permis unui utilizator să se înregistreze. În partea a treia vom face o fereastră nouă când utilizatorul se conectează și transmite unele dintre datele utilizatorului către el. Această fereastră este, în cele din urmă, interfața dvs. "Logged In".
Permiteți deschiderea login.js și derulați în jos până la metoda noastră de conectareReq.onload (). Permiteți scăderea avertizării pe care o avem în prezent la înregistrarea reușită și o înlocuiți cu aceasta:
Accentsconagua
loginReq.onload = funcția () var json = aceasta.responseText; var răspuns = JSON.parse (json); dacă (răspuns.logged == adevărat) username.blur (); password.blur (); Ti.App.fireEvent ("grantEntrance", nume: răspuns.name, email: răspuns.email); win.close (); altceva alert (reply.message); ; Deci, ceea ce am făcut aici a fost înlocuirea alertei noastre cu un eveniment pe care îl "tragem". Am declanșat un eveniment numit "grantEntrance", deoarece logarea a avut succes. De asemenea, trecem două obiecte: numele și adresa de e-mail. Am setat obiectul numelui egal cu orice intrare a utilizatorului când a creat contul (această informație este returnată de fișierul nostru post_auth.php). Același lucru este valabil și pentru e-mailul lor. De asemenea, am denumit metoda blur () pentru a elimina cursorul din oricare dintre câmpurile de text. În cele din urmă, închidem fereastra de conectare.
Nu compilați încă, deoarece nu veți observa nimic dacă faceți. Pentru a continua, trebuie să adăugăm un ascultător al evenimentului. Vom face acest lucru în următorii pași.
Deschideți app.js. Vrem să creăm o fereastră nouă și o filă nouă. În tutoriile anterioare am adăugat imediat filele utilizând metoda addTab (). În acest caz, nu vom adăuga imediat. Am apelat la fereastra "principală" din "Logged In". Pur și simplu adăugați noua fereastră și fila de sub linia de grupuri de tab-uri în app.js:
Titanium.UI.setBackgroundColor ( '# fff'); var tabGroup = Titanium.UI.createTabGroup (); var principal = Titanium.UI.createWindow (); var mainTab = Titanium.UI.createTab (); var login = Titanium.UI.createWindow (title: 'Demo de autentificare utilizator', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fereastră: login); var account = Titanium.UI.createWindow (title: 'Cont nou', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'Cont nou', fereastră: cont); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
App.js dvs. ar trebui să reflecte acum cele de mai sus. Totuși, nu compilați așa cum nu vedeți nimic. Vom compila în continuare, promite!
În login.js am "tras" evenimentul nostru "grantEntrance". Vrem să facem un ascultător de evenimente pentru a asculta acel eveniment. Adăugați aceasta în partea de jos a fișierului nostru app.js:
Ti.App.addEventListener ('grantEntrance', funcție (eveniment) main.tabBarHidden = true; main.title = 'Bine ati venit' + eveniment.name; main.url = 'main_windows / main.js'; .name; main.email = event.email; mainTab.window = main; tabGroup.addTab (mainTab); tabGroup.removeTab (loginTab); tabGroup.removeTab (contTab);); Deci, în acest moment, vom stabili câteva proprietăți pe fereastra noastră principală. Mai întâi, ascundeți bara de filete din partea inferioară, deoarece nu mai avem nevoie de fila de conectare și cont. Am setat titlul de top pentru a spune "Bun venit Ronnie Swietek" (sau orice nume ai introdus când ai creat contul). Am setat proprietatea URL pentru a utiliza fișierul main.js. Creați două proprietăți numite nume și e-mail, astfel încât să le putem apela oricând în interfața noastră "Logged In". Am setat proprietatea ferestrei mainTab la fereastra noastră principală. În sfârșit, adăugăm în sfârșit fila noastră și eliminăm loginTab, precum și contul de cont, deoarece nu mai sunt necesare.
Înainte de a compila, asigurați-vă că ați creat un fișier principal.js și salvați-l în directorul main_windows. Acum puteți merge și compilați. Când compilați și vă conectați, ar trebui să vedeți un ecran gol, cu excepția titlului din partea de sus care ar trebui să conțină numele dvs..
Când vă conectați, ar trebui să vedeți obiectul pe care l-am creat afișat în consola de titan. Consola mea de titan spune asta când mă loghez:
email = "[email protected]"; nume = "Ronnie Swietek";
Deschideți main.js. Acum ar trebui să fie necompletat, dar mergeți mai departe și introduceți-l, salvați și compilați:
var win = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "V-ați conectat cu succes. După ce v-ați înregistrat, v-am trimis adresa de e-mail și numele dvs. Puteți transmite toate tipurile de date pur și simplu prin crearea de obiecte în fereastra dvs. \ n Adresa dvs. de email este: \ n "+ win.email +" \ n \ nNumele dvs. sunt: \ n "+ win.name, top: 10, stânga: 10, lățimea: 300, înălțimea:" auto ")); win.add (msg);
Când vă conectați, ar trebui să vedeți textul pe care l-am setat pe eticheta noastră. De asemenea, am accesat obiectele create prin intermediul "win.objectName". În cazul nostru, win.name și win.email
În partea a treia a acestei serii am învățat despre evenimente personalizate și trecerea datelor în ferestre. Posibilitățile sunt nesfârșite în acest moment. Depinde de tine să creezi ceva minunat cu cunoștințele de autentificare a utilizatorilor. Sper că vă place să luați aceste tutoriale la fel de mult cum mi-a plăcut să le faceți. Ne vedem din nou în viitor!
