This tutorial shows you step by step how to create your first Titanium application.
DOWNLOAD THE SOURCE CODE
Appcelerator Titanium provides a framework to run applications created with HTML, JavaScript, Python, Ruby and CSS across multiple operating systems and mobile devices. It supports building applications for Windows, MacOS, Linux, Andrioid and iPhone all from the one application.
Download and install Titanium Developer from here.
Run Titanium Developer. You will be prompted to create a new account. Simply fill in the fields and Titanium will create your account and log you in.
Click the New Project button, and fill out the project details as per the screenshot below.
Titanium Developer has now created a blank project for you. You can not use Titanium Developer itself to modify the application files (at least not with version 0.6.1), so you'll have to go to your project directory and open up the files in your favourite editor. The two files we are interested in are tiapp.xml and Resources\index.html.
We are going to edit some of the elements in the tiapp.xml file to modify the dimensions of the application. You can find a breakdown of each of these options here, but for now we want to set the windows size to 600x400. To do that we need to set the width, max-width, height and max-height elements.
<width>600</width>
<max-width>600</max-width>
<height>400</height>
<max-height>400</max-height>
Modify the index.html file to include the following code.
<html>
<head>
<script type="text/javascript">
function updateTime()
{
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
window.document.getElementById('time').innerHTML =
hours + ":" +
(minutes<10?"0" +minutes:minutes) + ":" +
(seconds<10?"0" + seconds:seconds);
}
setInterval(updateTime, 1000);
</script>
</head>
<body style="background-color:#1c1c1c;margin:0">
<div style="border-top:1px solid #404040">
<div id="time" style="color:#fff;;padding:10px">Welcome to Titanium</div>
</div>
</body>
</html>
This sets up a very simple web page that displays a welcome message, which then gets replaced with the current time. You will notice that there is nothing special about this HTML file. In fact you can open it up in a standard browser and the page will display. This is one of the benefits of Titanium: you get to use your existing web development skills to create desktop and mobile applications.
Although we won't cover it here, you could also replace the JavaScript with Ruby or Python code.