Today we are going to create a basic page in Titanium.  Rather than using tabs layout similar to the default project when you load up Titanium Studio / Titanium Developer, I wanted 1 page with a label, a textfield & a button.

Right, we are going to start with the basic vertical window layout:

var win = Ti.UI.createWindow({
title: 'Title goes here',
layout: 'vertical',
backgroundColor: '#123456'
})

Next, to add a label to the window:

var label = Ti.UI.createLabel({
	text: 'My label text',
	color: '#fff',
	top: 10,
	textAlign:'center',
	font: {
		fontWeight: 'bold',
		fontSize: 18
	},
	height:'auto'
})

win.add(label);

Ok, so far?  Easy huh!  Next to add the textfield, this is a little harder as this involves the keyboard input & what to do when finished when you’re done typing:

var textfield = Ti.UI.createTextField({
	height: 40,
	top: 10,
	width: 200,
	keyboardType: Ti.UI.KEYBOARD_DEFAULT,
	returnKeyType: Ti.UI.RETURNKEY_DONE,
	borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	hintText: 'Type in here..'
});

win.add(textfield);

Notice the keyboardType, there are other types available:

Titanium.UI.KEYBOARD_DEFAULT
Titanium.UI.KEYBOARD_EMAIL
Titanium.UI.KEYBOARD_ASCII
Titanium.UI.KEYBOARD_URL
Titanium.UI.KEYBOARD_NUMBER_PAD
Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION
Titanium.UI.KEYBOARD_PHONE_PAD

Next the button, I’m going to create an AddEventListener event to it also, so when a user clicks on it, it will show in the console log & popup in a alertDialog box:

var button = Ti.UI.createButton({
	title: 'My button',
	top: 10,
	height: 40,
	width: 200
});

button.addEventListener('click', function() {
	// Check console
	Ti.API.info('User clicked the button ');

	// Alert
	var msgTitle = "Alert title";
	var msgText = "You clicked the button!";
	var alertBox = Ti.UI.createAlertDialog({
						title: msgTitle,
						message: msgText
					});
    alertBox.show();

});
win.add(button);

Finally, open the window on load:

win.open();

Hope this helps :) Download the app.js here.