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.

Enjoy!

// 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
Titanium.UI.iPhone.hideStatusBar()
 
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor("#f00");
 
// 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
screen1.add(button)
 
// open screen1
screen1.open()

*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 to Rodrigo Costa Cancel reply

(required)

(required)

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>