Share
Welkom bij deel drie van gebruikersauthenticatie met behulp van Titanium. Titanium is een opensource cross-compiler waarmee je iPhone- en Android-apps (die binnenkort ook BlackBerry-achtig zijn) kunt schrijven met Javascript. We zullen PHP gebruiken als de taalcode voor de serverzijde en mijn database zal MySQL zijn. Voor dit voorbeeld gebruik ik MAMP om lokaal te ontwikkelen. In deel drie gaan we in op het toevoegen van een nieuw venster en het doorgeven van onze databaseresultaten wanneer een gebruiker inlogt met behulp van aangepaste gebeurtenissen. Dit nieuwe venster zal uw "Ingelogd" -interface vertegenwoordigen. Als je het nog niet hebt gelezen, raad ik je ten zeerste aan om te beginnen met deel een.
In deel één hebben we de database gemaakt en een gebruiker toegevoegd. Vervolgens hebben we onze inloginterface gemaakt door een tabbladgroep, een tabblad en een venster te maken. We hebben toen onze login-knop een aantal acties gegeven. Ons PHP-bestand heeft onze database opgevraagd en bij een succesvolle aanmelding heeft het onze naam en e-mail geretourneerd. Als inloggen niet lukte, hebben we een string geretourneerd met alleen een ongeldige gebruikersnaam en / of wachtwoord. In deel 2 hebben we een nieuw tabblad op het hoofdscherm gemaakt. Op dit tabblad is onze weergave gewijzigd in een weergave 'account maken' waarmee een gebruiker zich kon registreren. In deel drie maken we een nieuw venster wanneer de gebruiker inlogt en een aantal gegevens van de gebruiker doorgeeft. Dit venster is uiteindelijk uw "Ingelogd" -interface.
Laten we login.js openen en scrollen naar onze methode loginReq.onload (). Laten we de waarschuwing verwijderen die we momenteel hebben bij succesvolle aanmelding en deze vervangen door deze:
Accentsconagua
loginReq.onload = function () var json = this.responseText; var response = JSON.parse (json); if (response.logged == true) gebruikersnaam.blur (); password.blur (); Ti.App.fireEvent ('grantEntrance', name: response.name, email: response.email); win.close (); else alert (response.message); ; Dus wat we hier deden was onze waarschuwing vervangen door een gebeurtenis die we 'vuren'. We ontslaan een evenement met de naam 'grantEntrance' sinds het inloggen succesvol was. We passeren ook twee objecten: naam en e-mail. We hebben het naamobject gelijk gemaakt aan wat de gebruikersinvoer was toen ze hun account maakten (deze informatie wordt geretourneerd door ons bestand post_auth.php). Hetzelfde geldt voor hun e-mail. We hebben ook de methode blur () genoemd om de cursor uit een van de tekstvelden te verwijderen. Ten slotte sluiten we het inlogvenster.
Compileer nog niet want je merkt er niets van. Om door te gaan, moeten we een gebeurtenislistener toevoegen. We doen dit in de volgende paar stappen.
Open app.js. We willen een nieuw venster en een nieuw tabblad maken. In de vorige zelfstudies hebben we de tabbladen meteen toegevoegd met de methode addTab (). In dit geval zullen we het niet meteen toevoegen. Ik heb mijn "Ingelogd" venster 'hoofd' genoemd. Voeg eenvoudig het nieuwe venster en tabblad onder onze tabgroepsregel toe in 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", window: login); var account = Titanium.UI.createWindow (title: 'Nieuw account', url: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'Nieuw account', venster: account); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open ();
Uw app.js zou nu het bovenstaande moeten weerspiegelen. Nog steeds, compileer niet zoals je niets zult zien. We zullen de volgende compileren, beloven!
In login.js 'ontslagen' we onze 'grantEntrance'-gebeurtenis. We willen een toe te voegen gebeurtenislistener maken om naar die gebeurtenis te luisteren. Voeg dit toe aan de onderkant van ons app.js-bestand:
Ti.App.addEventListener ('grantEntrance', function (event) main.tabBarHidden = true; main.title = 'Welkom' + event.name; main.url = 'main_windows / main.js'; main.name = event .name; main.email = event.email; mainTab.window = main; tabGroup.addTab (mainTab); tabGroup.removeTab (loginTab); tabGroup.removeTab (accountTab);); Dus, op dit punt gaan we een aantal eigenschappen instellen in ons 'hoofd' venster. Verberg eerst de tabbalk onderaan omdat we het inlog- en accounttabblad niet meer nodig hebben. We hebben de bovenste titel ingesteld om 'Welcome Ronnie Swietek' (of welke naam die je ook invoerde toen je het account maakte) te zeggen. We hebben de eigenschap URL ingesteld om het bestand main.js te gebruiken. We maken twee eigenschappen met de naam naam en e-mail, zodat we deze op elk gewenst moment kunnen bellen via onze "Ingelogd" -interface. We hebben onze mainTab-venstereigenschap ingesteld op ons venster, main. Ten slotte voegen we eindelijk ons tabblad toe en verwijderen we zowel het loginTab als het accountTab omdat ze niet langer nodig zijn.
Zorg voordat u compileert dat u een main.js-bestand hebt gemaakt en sla het op in de map main_windows. Nu kunt u doorgaan en compileren. Wanneer u compileert en inlogt, zou u een leeg scherm moeten zien, behalve de titel bovenaan die uw naam zou moeten bevatten.
Wanneer u zich aanmeldt, ziet u het door ons gemaakte object in de titanium console. Mijn titanium console zegt dit wanneer ik inlog:
email = "[email protected]"; name = "Ronnie Swietek";
Open main.js. Op dit moment zou het leeg moeten zijn, maar ga je gang en voeg je dit in, bewaar en compileer:
var win = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "U bent ingelogd. Bij het inloggen hebben wij uw e-mailadres en uw naam teruggestuurd. U kunt alle soorten gegevens eenvoudig doorgeven door objecten in uw venster te maken. \ n \ nUw e-mailadres is: \ n "+ win.email +" \ n \ nje naam is: \ n "+ win.name, top: 10, links: 10, width: 300, height: 'auto'); win.add (msg);
Wanneer u zich aanmeldt, ziet u de tekst die we op ons label hebben gezet. We hebben ook toegang gekregen tot de objecten die we hebben gemaakt via 'win.objectName'. In ons geval win.name en win.email
In deel 3 van deze serie hebben we geleerd over aangepaste gebeurtenissen en het doorgeven van gegevens aan vensters. De mogelijkheden zijn op dit moment eindeloos. Het is aan u om iets geweldigs te maken met uw kennis van gebruikersauthenticatie. Ik hoop echt dat je het leuk vond om deze tutorials net zo goed te volgen als ik ervan vond ze te maken. Zie jullie allemaal weer in de toekomst!
