Appcelerator Titanium Introduction

-->

Creating Titanium Mobile Project

1. Open Appcelerator Titanium Studio
2. select or create workspace click ok
3. File -->New-->Titanium Mobile Project
4. Give Appname and AppID and click Finish

Basic things should be known…. Before we start

The Titanium Mobile Project folder contains following necessary files. You should be known those files and its purpose.

1. Resource Folder
   1. Folders for each target platform (eg. Android, iPhone)
   2. App.js
2. Build.log
3. CHANGELOG.txt
4. License
5. License.txt
6. Readme
7. Manifest
8. Tiapp.xml

Resource Folder

Resource folder contains all of your project resources in specific folders. For example each targeted platform of your mobile apps have separate folders and you can place your source and images on that folders.

App.js

This is “Start Point” of your app. This means it act as Main function of your app (eg. Main() in c, cpp and java). you’re going to put your code here. Start by editing your application's app.js to make your first mobile project using Titanium

Build.log

This file save the log information whenever your build your project in a particular system. And you must delete it before you are deploy into mobile device or try to run in another system.

CHANGELOG.txt

Place your change log text here. This file will be incorporated with your app at package time.

License

copyright 2008-2012 Appcelerator, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

License.txt

Place your license text here. This file will be incorporated with your app at package time.

Manifest

It contains basic information about your project such as appname, appid, publisher… etc..

Readme

You can put the user instruction about running your project such as pre-requisites and user manual.

Tiapp.xml

This is a configuration file. It have basic configuration information in xml format. You add/remove your own configuration here. Be careful while you’re editing this file it causes error if you do wrong with this file. For example if you think your app only run in landscape not in portrait then you can set it in tiapp.xml. (Don’t worries we will see later how do that).

Now let start the coding…

Wait…. Where you are starting to write code…….? That’s right open app.js file.

app.js file not an empty… it have some predefined coding… In app.js by default they created one tapgroub, two tabs, two windows and two labels. First, you just try to understand those coding. 

Trace the coding:

-->

Tab group is container object that holds an many no of tabs.

Now look at the hierachy of the colntrols...

label added into window

window object added in tab object

tab added into tabgroup...

-->

// this sets the background color of UIView

 

Titanium.UI.setBackgroundColor('#000');

// create tab group

var tabGroup = Titanium.UI.createTabGroup();

//create window object

var win1 = Titanium.UI.createWindow({

title:'Tab 1',

backgroundColor:'#fff'

});

//create tab object

var tab1 = Titanium.UI.createTab({

icon:'KS_nav_views.png',

title:'Tab 1',

window:win1 //add window object to tab here

}); 

 

//create a label object

var label1 = Titanium.UI.createLabel({

color:'#999',

text:'I am Window 1',

font:{fontSize:20,fontFamily:'Helvetica Neue'},

textAlign:'center',

width:'auto'

});

win1.add(label1); // add label into window

tabGroup.addTab(tab1); // add tabs

tabGroup.open(); // open tab group

similarly we can create and add many tabs in tabgroup. Now the testing time. Run your code.

Run the project in Android Emulator

Go to Run --> run as--> Android Emulator