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.


  1. // Hide the status bar - if on Android comment out below line
  2. // This can be managed by checking OS, for simplicity's sake I didn't do that this time
  3. Titanium.UI.iPhone.hideStatusBar()
  5. // this sets the background color of the master UIView (when there are no windows/tab groups on it)
  6. Titanium.UI.setBackgroundColor("#f00");
  8. // create a new window called "screen1" and make the background color light blue
  9. var screen1 = Titanium.UI.createWindow({
  10. backgroundColor: "#0df"
  11. })
  13. // create a new button called "button" and set width, height and top. It will be centered on x by default
  14. var button = Titanium.UI.createButton({
  15. title: "Press Me",
  16. top: "80%",
  17. width: 100,
  18. height: 50
  19. })
  21. // function for when the button is pressed
  22. pressButton = function (event)
  23. {
  24. // this is a print statement
  25. Titanium.API.info("User clicked the button")
  26. }
  27. // add the event listener to the button
  28. button.addEventListener("click", pressButton)
  30. // add the button to screen1
  31. screen1.add(button)
  33. // open screen1
  34. 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. Great my friend! Nice to see you running hot again! :)

  2. 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?

Leave a Reply to GreenCastle Cancel 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>

Notify me of followup comments via e-mail. You can also subscribe without commenting.