Share
Välkommen till del tre av användarautentisering med Titanium. Titanium är en öppen källkors-kompilator som låter dig skriva iPhone och Android (snart för att vara blackberry också!) Applikationer med Javascript. Vi använder PHP som serverns språkkodsspråk, och min databas blir MySQL. För detta exempel använder jag MAMP för att utvecklas lokalt. I del tre kommer vi att täcka till att lägga till ett nytt fönster och överföra våra databasresultat till det när en användare loggar in med egna händelser. Det här nya fönstret kommer att representera ditt "Inloggade" -gränssnitt. Om du inte redan har läst det, rekommenderar jag starkt att du börjar med del ett.
I del ett skapade vi databasen och lade till en användare. Vi gjorde då vårt inloggningsgränssnitt genom att skapa en flikgrupp, en flik och ett fönster. Vi gav sedan vår inloggningsknapp några åtgärder. Vår PHP-fil frågade vår databas och efter en framgångsrik inloggning returnerade vi vårt namn och e-postmeddelande. Om inloggningen misslyckades returnerade vi en sträng som bara angav ogiltigt användarnamn och / eller lösenord. I del 2 skapade vi en ny flik på huvudskärmen. Den här fliken bytte vår vy till en "skapa konto" -visning som gjorde det möjligt för en användare att registrera sig. I del tre kommer vi att skapa ett nytt fönster när användaren loggar in och skickar några av användarens data till den. Detta fönster är i slutändan ditt "Inloggade" -gränssnitt.
Låter öppna login.js och bläddra ner till vår loginReq.onload () metod. Låt oss avstå från den varning vi för närvarande har på plats efter framgångsrik inloggning och ersätt den med den här:
Accentsconagua
loginReq.onload = function () var json = this.responseText; var respons = JSON.parse (json); om (response.logged == true) username.blur (); password.blur (); Ti.App.fireEvent ("grantEntrance", namn: response.name, email: response.email); win.close (); annars alert (response.message); ; Så vad vi gjorde här var att ersätta vår alert med en händelse att vi "eldar". Vi avfyra en händelse som heter "grantEntrance" sedan inloggningen lyckades. Vi passerar också två objekt: namn och email. Vi ställde namnet objektet lika med vad användarens inmatning var när de skapade sitt konto (den här informationen returneras av vår post_auth.php-fil). Samma sak gäller deras email. Vi har också kallat funktionen blur () för att ta bort markören från något av textfälten. Slutligen stänger vi inloggningsfönstret.
Kompilera inte just då du inte märker något om du gör det. För att kunna fortsätta måste vi lägga till en händelse lyssnare. Vi kommer att göra det i de närmaste två stegen.
Öppna upp app.js. Vi vill skapa ett nytt fönster och en ny flik. I de tidigare handledningarna lade vi till flikarna direkt med metoden addTab (). I det här fallet kommer vi inte att lägga till det direkt. Jag har kallat mitt "Inloggade" -fönster "huvud". Lägg helt enkelt till det nya fönstret och fliken nedanför vår fliklinje i app.js:
Titanium.UI.setBackgroundColor ( '# fff'); var tabGroup = Titanium.UI.createTabGroup (); var main = Titanium.UI.createWindow (); var mainTab = Titanium.UI.createTab (); var login = Titanium.UI.createWindow (title: 'User Authentication Demo', url: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", fönster: login); var account = Titanium.UI.createWindow (title: 'Nytt konto', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'New Account', fönster: konto); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
Din app.js borde nu återspegla ovanstående. Fortfarande, kompilera inte som du inte ser någonting. Vi kommer att kompilera nästa löfte!
I login.js sparkade vi "vår" grantEntrance "-händelse. Vi vill göra en tilläggshändelselyttare för att lyssna på den händelsen. Lägg till det här längst ner i vår app.js-fil:
Ti.App.addEventListener ('grantEntrance', funktion (händelse) main.tabBarHidden = true; main.title = 'Välkommen' + event.name; main.url = 'main_windows / main.js'; main.name = händelse .name; main.email = event.email; mainTab.window = main; tabGroup.addTab (mainTab); tabGroup.removeTab (loginTab); tabGroup.removeTab (accountTab);); Så, vid denna tidpunkt kommer vi att ställa in några egenskaper i vårt huvudfönster. Dölja först flikfältet längst ner eftersom vi inte längre behöver användarnamn och konto. Vi ställer topptiteln för att säga "Välkommen Ronnie Swietek" (eller vilket namn du anger när du skapade kontot). Vi ställer in URL-egenskapen för att använda main.js-filen. Vi skapar två egenskaper som heter namn och e-post så att vi kan ringa dem när som helst i vårt "Inloggade" -gränssnitt. Vi ställde fast vår mainTab fönsterfönster till vårt fönster, huvud. Slutligen lägger vi till slut vår flik och tar bort loginTab och kontotabellen eftersom de inte längre behövs.
Innan du sammanställer, se till att du har skapat en main.js-fil och sparar den i mappen main_windows. Nu kan du gå vidare och kompilera. När du sammanställer och loggar in, borde du se en blank skärm förutom titeln överst som ska innehålla ditt namn.
När du loggar in ska du se objektet som vi skapade i displayen i titan-konsolen. Min titankonsol säger detta när jag loggar in:
email = "[email protected]"; namn = "Ronnie Swietek";
Öppna upp main.js. Just nu borde det vara tomt, men gå vidare och sätt in det här, spara och kompilera:
var vinna = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "Du har lyckats inloggad. När du loggade in skickade vi tillbaka din e-postadress och ditt namn. Du kan skicka alla typer av data genom att skapa objekt i ditt fönster. \ n \ Din e-postadress är: \ n "+ win.email +" \ n \ nyour namn är: \ n "+ win.name, topp: 10, vänster: 10, bredd: 300, höjd: 'auto'); win.add (msg);
När du loggar in ska du se den text som vi ställer in på vår etikett. Vi har också åtkomst till objekten vi skapade via "win.objectName". I vårt fall, win.name och win.email
I del 3 i denna serie lärde vi oss om anpassade händelser och överföring av data till Windows. Möjligheterna är oändliga vid denna tidpunkt. Det är upp till dig att skapa något bra med din användarautentiseringskunskap. Jag hoppas verkligen att du njöt av att ta dessa handledning så mycket som jag tyckte om att göra dem. Vi ses alla igen i framtiden!
