Feb 252013

The second piece of code I ever wrote in Javascript for the Titanium SDK, in tutorial form.Below is a very simple copy/paste* sample showing you how to create and position a button in Titanium ask well as set a background color, hide the status bar and write a simple function which shows a print statement in the console.

Although I am working on a Platino for Newbies series I hope this will help some of you get your feet with Javascript and the Titanium SDK in the meantime.


// Hide the status bar - if on Android comment out below line
// This can be managed by checking OS, for simplicity's sake I didn't do that this time
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
// create a new window called "screen1" and make the background color light blue
var screen1 = Titanium.UI.createWindow({
	backgroundColor: "#0df"
// create a new button called "button" and set width, height and top. It will be centered on x by default
var button = Titanium.UI.createButton({
	title: "Press Me",
	top: "80%",
	width: 100,
	height: 50
// function for when the button is pressed
pressButton = function (event)
	// this is a print statement
	Titanium.API.info("User clicked the button")
// add the event listener to the button
button.addEventListener("click", pressButton)
// add the button to screen1
// open screen1

*Please consider writing out the code yourself and not simply copying and pasting it; it might be annoying but it will help you commit some of the basics to memory.

Peach Pellen


Like this post? Subscribe to the monthly newsletter!



  2 Responses to “Titanium SDK and Your First Lines of Code”

  1. Hey Peach:

    Is Titanium.UI.createWindow a canvas-type object that is the size of the screen of the mobile device in question? So that, when we say “top: 80%” this button will be in the bottom 20% of the device screen?

    Or can a screen be any size, and you can have different ones open at once, possibly on top of each other?

  2. Great my friend! Nice to see you running hot again! :)

 Leave a Reply



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>