Share
Willkommen zu Teil drei der Benutzerauthentifizierung mit Titanium. Titan ist ein Open-Source-Cross-Compiler, mit dem Sie mit Javascript iPhone- und Android-Anwendungen (bald auch Blackberry!) Schreiben können. Wir werden PHP als serverseitige Codesprache verwenden und meine Datenbank wird MySQL sein. Für dieses Beispiel verwende ich MAMP, um lokal zu entwickeln. In Teil drei behandeln wir das Hinzufügen eines neuen Fensters und die Weitergabe unserer Datenbankergebnisse, wenn sich ein Benutzer mit benutzerdefinierten Ereignissen anmeldet. Dieses neue Fenster wird Ihre "Eingeloggte" Schnittstelle darstellen. Wenn Sie es noch nicht gelesen haben, empfehle ich Ihnen dringend, mit Teil eins zu beginnen.
Im ersten Teil haben wir die Datenbank erstellt und einen Benutzer hinzugefügt. Wir haben dann unsere Anmeldeschnittstelle erstellt, indem wir eine Registerkartengruppe, eine Registerkarte und ein Fenster erstellt haben. Wir haben dann unserem Login-Button einige Aktionen gegeben. Unsere PHP-Datei hat unsere Datenbank abgefragt und bei erfolgreichem Login unseren Namen und E-Mail-Adresse zurückgegeben. Wenn die Anmeldung fehlgeschlagen ist, haben wir eine Zeichenfolge mit der Angabe eines ungültigen Benutzernamens und / oder Kennworts zurückgegeben. In Teil 2 haben wir eine neue Registerkarte im Hauptbildschirm erstellt. Diese Registerkarte hat unsere Ansicht in eine Ansicht "Konto erstellen" geändert, in der sich ein Benutzer registrieren konnte. In Teil drei werden wir ein neues Fenster erstellen, wenn sich der Benutzer anmeldet und einige Daten des Benutzers an ihn weitergibt. Dieses Fenster ist letztendlich Ihre "Eingeloggt" -Schnittstelle.
Öffnen Sie login.js und scrollen Sie zu unserer loginReq.onload () -Methode. Lassen Sie uns die Warnung, die wir derzeit bei erfolgreichem Login haben, loswerden und durch diese ersetzen:
Accentsconagua
loginReq.onload = function () var json = this.responseText; var Antwort = JSON.parse (json); if (response.logged == true) Benutzername.blur (); password.blur (); Ti.App.fireEvent ('grantEntrance', Name: Antwortname, E-Mail: Antwort.email); win.close (); else alert (Antwortnachricht); ; Also haben wir hier unsere Warnung durch ein Ereignis ersetzt, das wir "schießen". Wir starten ein Ereignis mit dem Namen 'grantEntrance', da der Login erfolgreich war. Wir übergeben auch zwei Objekte: Name und E-Mail. Wir setzen das Namensobjekt auf das, was die Benutzereingabe beim Erstellen ihres Kontos war (diese Informationen werden von unserer Datei post_auth.php zurückgegeben). Gleiches gilt für ihre E-Mail. Wir haben auch die blur () -Methode aufgerufen, um den Cursor aus einem der Textfelder zu entfernen. Zum Schluss schließen wir das Login-Fenster.
Kompilieren Sie noch nicht, da Sie sonst nichts merken werden. Um fortzufahren, müssen wir einen Ereignis-Listener hinzufügen. Wir werden dies in den nächsten Schritten tun.
Öffnen Sie app.js. Wir möchten ein neues Fenster und eine neue Registerkarte erstellen. In den vorherigen Tutorials haben wir die Registerkarten sofort mit der addTab () -Methode hinzugefügt. In diesem Fall fügen wir es nicht sofort hinzu. Ich habe mein "Eingeloggt" -Fenster 'main' genannt. Fügen Sie einfach das neue Fenster und die neue Registerkarte in unserer app.js-Zeile hinzu:
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: 'Demo zur Benutzerauthentifizierung', URL: 'main_windows / login.js'); var loginTab = Titanium.UI.createTab (title: "Login", Fenster: login); var account = Titanium.UI.createWindow (title: 'New Account', URL: 'main_windows / account.js'); var accountTab = Titanium.UI.createTab (title: 'New Account', Fenster: Konto); tabGroup.addTab (loginTab); tabGroup.addTab (accountTab); tabGroup.open (); Ihre app.js sollte nun das obige widerspiegeln. Kompilieren Sie trotzdem nicht, da Sie nichts sehen werden. Wir werden als nächstes zusammenstellen, versprochen!
In login.js haben wir unser Ereignis 'grantEntrance' gefeuert. Wir möchten einen Ereignis-Listener hinzufügen, der auf dieses Ereignis wartet. Fügen Sie dies am Ende unserer app.js-Datei hinzu:
Ti.App.addEventListener ('grantEntrance', Funktion (Ereignis) main.tabBarHidden = true; main.title = 'Welcome' + 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);); Zu diesem Zeitpunkt werden wir also einige Eigenschaften in unserem Hauptfenster festlegen. Blenden Sie zunächst die Tab-Leiste unten aus, da Sie die Registerkarte Anmelden und Konto nicht mehr benötigen. Wir legen fest, dass der oberste Titel "Willkommen Ronnie Swietek" (oder welchen Namen Sie beim Erstellen des Kontos eingeben) lautet. Wir setzen die URL-Eigenschaft so, dass sie die Datei main.js verwendet. Wir erstellen zwei Eigenschaften, genannt Name und E-Mail, damit wir diese jederzeit in unserer "Logged In" -Schnittstelle aufrufen können. Wir setzen unsere Eigenschaft mainTab window auf unser Fenster main. Zuletzt fügen wir unseren Tab hinzu und entfernen das loginTab sowie das accountTab, da diese nicht mehr benötigt werden.
Vergewissern Sie sich vor dem Kompilieren, dass Sie eine main.js-Datei erstellt haben, und speichern Sie sie im Ordner main_windows. Jetzt können Sie fortfahren und kompilieren. Wenn Sie kompilieren und sich anmelden, sollte ein leerer Bildschirm angezeigt werden, mit Ausnahme des Titels oben, der Ihren Namen enthalten sollte.
Wenn Sie sich anmelden, sollte das von uns erstellte Objekt in der Titankonsole angezeigt werden. Meine Titankonsole sagt dies beim Einloggen:
email = "[email protected]"; name = "Ronnie Swietek";
Öffne main.js. Im Moment sollte es leer sein, aber fügen Sie Folgendes ein, speichern und kompilieren Sie:
var win = Titanium.UI.currentWindow; var msg = Titanium.UI.createLabel (text: "Sie haben sich erfolgreich angemeldet. Beim Anmelden haben wir Ihre E-Mail-Adresse und Ihren Namen zurückgesendet. Sie können alle Arten von Daten übergeben, indem Sie einfach Objekte in Ihrem Fenster erstellen. \ n \ nIhre E-Mail-Adresse lautet: \ n "+ win.email +" \ n \ nIhr Name ist: \ n "+ win.name, top: 10, links: 10, Breite: 300, Höhe: 'auto'); win.add (msg);
Wenn Sie sich einloggen, sollten Sie den Text sehen, den wir auf unserem Etikett angegeben haben. Auf die von uns erstellten Objekte haben wir auch über 'win.objectName' zugegriffen. In unserem Fall win.name und win.email
In Teil 3 dieser Serie haben wir gelernt, wie benutzerdefinierte Ereignisse aussehen und wie Daten an Fenster übergeben werden. Die Möglichkeiten sind an dieser Stelle endlos. Es liegt an Ihnen, mit Ihren Kenntnissen zur Benutzerauthentifizierung etwas Großartiges zu schaffen. Ich hoffe wirklich, dass Ihnen diese Tutorials genauso gut gefallen haben wie ich sie gemacht habe. Wir sehen uns in der Zukunft wieder!
