Welcome to part three of user authentication using Titanium. Titanium is an open source cross-compiler that allows you to write iPhone and Android (soon to be blackberry too!) applications using Javascript. We will be using PHP as the server side code language, and my database will be MySQL. For this example, I am using MAMP to develop locally. In part three, we will cover adding a new window and passing our database results to it when a user logs in using custom events. This new window will represent your "Logged In" interface. If you haven't already read it, I highly recommend you start with part one.

Synopsis

In part one we created the database and added a user. We then made our login interface by creating a tab group, a tab, and a window. We then gave our login button some actions. Our PHP file queried our database and upon a successful login it returned our name and email. If login failed, we returned a string simply stating invalid username and/or password. In part 2 we created a new tab on the main screen. This tab switched our view to a 'create account' view which allowed a user to register. In part three we will make a new window when the user logs in and pass some of the user's data to it. This window is ultimately your "Logged In" interface.

Step 1: Handling the login event

Lets open up login.js and scroll down to our loginReq.onload() method. Lets get rid of the alert we currently have in place upon successful login and replace it with this one:

loginReq.onload = function()
{
	var json = this.responseText;
	var response = JSON.parse(json);
	if (response.logged == true)
	{
		username.blur();
		password.blur(); 
		Ti.App.fireEvent('grantEntrance', {
			name:response.name,
			email:response.email
		});
		win.close();
	}
	else
	{
		alert(response.message);
	}
};

So what we did here was replace our alert with an event that we 'fire'. We fire an event called 'grantEntrance' since login was successful. We are also passing two objects: name and email. We set the name object equal to whatever the user input was when they created their account (this information is returned by our post_auth.php file). Same goes for their email. We've also called the blur() method to remove the cursor from either of the text fields. Finally, we close the login window.

Don't compile just yet as you won't really notice anything if you do. In order to proceed, we need to add an event listener. We will do so in the next couple steps.

Step 2: Creating our new window

Open up app.js. We want to create a new window and a new tab. In the previous tutorials we added the tabs right away using the addTab() method. In this case, we won't be adding it right away. I've called my "Logged In" window 'main'. Simply add the new window and tab below our tabgroup line 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:'New Account',
	url:'main_windows/account.js'
});

var accountTab = Titanium.UI.createTab({
	title:'New Account',
	window:account
});

tabGroup.addTab(loginTab);
tabGroup.addTab(accountTab);
tabGroup.open();

Your app.js should now reflect the above. Still, don't compile as you wont see anything. We will compile next, promise!

Step 3: Adding the 'grantEntrance' event

In login.js we 'fired' our 'grantEntrance' event. We want to make an add event listener to listen for that event. Add this to the bottom of our app.js file:

Ti.App.addEventListener('grantEntrance', function(event)
{
	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);
});

So, at this point, we are going to set some properties on our 'main' window. First, hide the tab bar on the bottom since we don't need the login and account tab anymore. We set the top title to say "Welcome Ronnie Swietek" (or whatever name you input when you made the account). We set the URL property to use the main.js file. We create two properties called name and e-mail so we can call those at any time in our "Logged In" interface. We set our mainTab window property to our window, main. Lastly, we finally add our tab and remove the loginTab as well as the accountTab since they are no longer needed.

Before you compile, make sure you've created a main.js file and save it in the main_windows folder. Now you can go ahead and compile. When you compile and login, you should see a blank screen except for the title at the top which should contain your name.

When you login you should see the object we created display in the titanium console. My titanium console says this when I login:

email = "[email protected]";
name = "Ronnie Swietek";

Step 4: Start extending main.js

Open up main.js. Right now it should be blank, but go ahead and insert this, save, and compile:

var win = Titanium.UI.currentWindow;

var msg	= Titanium.UI.createLabel({
	text:"You have successfully logged in. Upon logging in we sent back your email address and your name. You can pass all kinds of data simply by creating objects on your window.\n\nYour email is:\n" + win.email + "\n\nyour name is:\n" + win.name,
	top:10,
	left:10,
	width:300,
	height:'auto'
});
win.add(msg);

When you login you should see the text we set on our label. We've also accessed the objects we created via 'win.objectName'. In our case, win.name and win.email

Conclusion

In part 3 of this series we learned about custom events and passing data to windows. The possibilities are endless at this point. It is up to you to create something great with your user authentication knowledge. I really hope you enjoyed taking these tutorials as much as I enjoyed making them. See you all again in the future!