Mobile App Development with Titanium Studio

The Real Slim Shady · 12-29-2013, 10:37 AM

Mobile App Development with Titanium Studio [iOS/Andriod/BB]
http://www.appcelerator.com/

Introduction:
Titanium Studio by Appcelerator Inc. is a Rapid Application Development IDE platform to develop mobile applications for a wide range of mobile platforms with portability in mind. You code an app and then you can build it for multiple mobile platforms such as iOS, Android, and Blackberry.

It is a cross platform suite that can be installed on Windows, Linux, and Mac and consists of the Appcelerator Platform, NodeJS Framework, and any emulator you should choose to use. There is a catch with iOS however. You can only build iOS apps on a Mac based computer. As such, being a PC user, I will focus this tutorial on the Android Platform.

This tutorial will simply cover the very basics of getting started.

Installation:
-Java
Java 6 is required. Java 7 will absolutely not work in my experience. It took me hours of fiddling to figure this out. Its just not supported. Perhaps in future versions this may be supported, but not at this time to my knowledge.
-Titanium
--NodeJS
--Android Emulator
Titanium Studio theoretically comes with the ability to install the required software to function including NodeJS and Android. However in my experience this often doesn't work as well as it should. If it works as it should, NodeJS should be installed as part of the package, and if you go to the "Getting Started" tab in Titanium on the Dashboard you can install and configure your SDK's. Under the Android Management console you need to install the Rev 17 platform (Android version 2.2 if I recall), and the latest version available. Once this is done there should be a green check mark next to the Android SDK under getting started in Titanium.

However you may be required to go to the following sites and download + configure manually one or both of these software packages.

NodeJS: http://nodejs.org
Android Emulator: http://developer.android.com/sdk/index.html

At that point you can go to the Titanium Preferences screen and enter the installation paths manually. Once this is done, in the case of Android, you will still need to go and configure the Android package to install the minimum and maximum versions as described above.

Creating a new project:
Go to File -> New -> "Mobile Project". On the popup screen, for the purposes of this tutorial, we'll select "Single Window Application". It will now ask you for a few details. The first is the project name. I will enter testApp1 for this tutorial. Next is the AppId. This should be a unique name in the format com.companyname.apptitle. So for example, I would use com.adepttechs.testApp1. Nothing else on this page is required however feel free to enter any details you would like and hit finish.

You have an app! If you were to build this now you would have an a.pp with a blank white screen.

Building an App:
All it takes to build an app is to hit Run. This will build an apk in the project direcory and run it in the android emulator.

Getting Started Programming:
In order to start programming you need to locate the app.js file. This is where all the magic happens. On the left side there is a folder pane with a "Resources" folder. Expand the folder and you will find your app.js. Click on that filename to open the project and you will see some existing code. This is the code that creates that mobile app with a white background and nothing else. But that isnt too exciting is it. You can check out this code and study it for yourself, but for the purposes of this tutorial I would suggest you delete everything there.

Creating a Window:

Code:
var homeWin = Ti.UI.createWindow({
	title: "testApp1",
	backgroundColor: "#000000",
	exitOnClose: true,
});

This creates the code for a simple window with a black background color. Now this merely creates the object. It does not display it. in order to display the window you need to use the code homeWin.open(). homeWin references the name of the variable/object "homeWin" we created. The open() tells the system to display the window.

Adding an image:

Code:
var bannerImg = Ti.UI.createImageView({
	top: 0%,
	left: 10%,
	width: 50%,
	height: 50%,
	image:'/images/banner.png',
});

This creates an image object that can be placed on a window. The name of this is object is "bannerImg" and its attributes are specified in the top, left, width, height fields. This can be expressed in percentages or fixed pixel values. The image field contains the location and name of the image in relation to the project install directory. so if my project was saved in /home/geoff/titanium/testApp1/, then the image should be placed in /home/geoff/titanium/testApp1/Resources/images/.

Now we're not done. Like the Window, the image object has been created, but not added. To add the image to the window we need to use the code homeWin.add(bannerImg);

Labels:
We can also add text fields, called labels, to our app.

Code:
var myLabel = Ti.UI.createLabel({
	text: "Hi new App Developers!",
	top: 50%,
	height: 100,
	width: "100%",
	textAlign: "center",
	color: "#FFFFFF",
	backgroundColor: "#000000",
});

The attributes should be self explanatory. This creates a text field half way down the window centred across the full width with a white background and black text.

Our code so far:
So to add it all together, at this point we should have an app.js file that looks something like

Code:
// Window
var homeWin = Ti.UI.createWindow({
	title: "testApp1",
	backgroundColor: "#000000",
	exitOnClose: true,
});

// Image
var bannerImg = Ti.UI.createImageView({
	top: 0%,
	left: 10%,
	width: 50%,
	height: 50%,
	image:'/images/banner.png',
});

// Text Label
var myLabel = Ti.UI.createLabel({
	text: "Hi new App Developers!",
	top: 50%,
	height: 100,
	width: "100%",
	textAlign: "center",
	color: "#FFFFFF",
	backgroundColor: "#000000",
});

// Put it all together
homeWin.add(bannerImg);
homeWin.add(myLabel);
homeWin.open();

Event Listeners:
We can also make these objects respond to touch input. How about we make the Banner image show an alert when pressed? We do this with this piece of code

Code:
bannerImg.addEventListener('click',function(e){
   alert('This is an event driven alert!');
});

Again we reference the object we want to apply the event listener to, and then specify what we want done.

Storing data:
We can easily store integer data within the app by using

Code:
Titanium.App.Properties.setInt("identifier", data);

- We can do the same thing for Strings using

Code:
Titanium.App.Properties.setString("identifier", data);

"identifier" is a string identifier used to recall the stored data. data is whatever you wish to place there.

To retrieve the data stored is simply a matter of referencing the identifier using the code Titanium.App.Properties.getInt("identifier"); or in the case of a string,

Code:
Titanium.App.Properties.getString("identifier");

if/while statements:
These are pretty straight forward as well.

Code:
	while (i < 10) {
		i++;
	}

	if(i == 10) {
		// Do something
	}

Databases:
Titanium has decent support for SQLite built in. I'm not going to get into how to create an sqlite db but I will cover basic data input/extraction.
To set up an existing database to use in Titanium you use the following code

Code:
var db = Ti.Database.install('/yourdatabase.db', 'TestApp1');

To run queries you use db.execute. For example an insert is as simple as:

Code:
db.execute('INSERT INTO dbTable VALUES ("","")');

However if you want to SELECT data, you need to put the output of the query in a variable like so:

Code:
var myVar = db.execute('SELECT something FROM myTable WHERE rowid = 1');

Conclusion:
And that's it for now. This is just an intro tutorial for getting started with Titanium. There is a lot more that can be done with Titanium although there are some limitations. There are a lot of available resources to handle more advanced capabilities on their developer site as well as other developer contributed modules and code... Check out some of these other resources:

http://docs.appcelerator.com/titanium/la...uick_Start
http://docs.appcelerator.com/titanium/latest/
http://www.appcelerator.com/developers/
http://developer.appcelerator.com/questions/newest

Questions comments or concerns let me know. I may yet update and add to this as well... So while ill consider it complete for now... if questions arise i may add to it.

The Real Slim Shady · 12-29-2013, 03:05 PM

I previously posted a game on HackCommunity called Bamboozle. You can check out that link for the download APK and obtain more info about the game, but i've attached the source here as well.

Code:
//
// GLOBAL
//

var db = Ti.Database.install('/Bamboozle.db', 'Bamboozle');
var fail = Ti.Media.createSound({url:"sound/scream.wav"});
var currentScore = 0;

//
// HOME WINDOW
//
var homeWin = Ti.UI.createWindow({
	title: "Bamboozle!!",
	backgroundColor: "#000000",
	exitOnClose: true
});

// Images
var homeBanner = Ti.UI.createImageView({
	top: 0,
	zIndex: 0,
	image:'/images/clown.jpg'
});

var appName = Ti.UI.createImageView({
	top: 20,
	left: 35,
	zIndex: 1,
	image:'/images/bamboozle.png'
});

var playImg = Ti.UI.createImageView({
	bottom: 150,
	right: 10,
	width: 75,
	height: 75,
	image:'/images/play-icon.png'
});

var scoresImg = Ti.UI.createImageView({
	bottom: 40,
	width: 90,
	height: 120,
	image:'/images/ribbon-icon.png'
});

var helpImg = Ti.UI.createImageView({
	bottom: 10,
	left: 10,
	width: 75,
	height: 75,
	image:'/images/help-icon.png'
});

// Event Listeners
playImg.addEventListener('click',function(e){
	pickerWin.open();
	homeWin.close();
});

scoresImg.addEventListener('click',function(e){
	scoresCatWin.open();
	homeWin.close();
});

helpImg.addEventListener('click',function(e){
	helpWin.open();
	homeWin.close();
});

// Display Components
homeWin.add(homeBanner);
homeWin.add(appName);
homeWin.add(playImg);
homeWin.add(scoresImg);
homeWin.add(helpImg);
homeWin.open();



//
// GAME WINDOW
//

var gameWin = Ti.UI.createWindow({
	title: "Bamboozle!!",
	backgroundColor: "#000000",
	exitOnClose: true
});

// Images
var gameBanner = Ti.UI.createImageView({
	top: 0,
	image:'/images/clown.jpg'
});

var trueImg = Ti.UI.createImageView({
	top: 300,
	left: 75,
	width: 75,
	height: 75,
	image:'/images/true.png'
});

var falseImg = Ti.UI.createImageView({
	top: 300,
	right: 75,
	width: 75,
	height: 75,
	image:'/images/false.png'
});

var gameMenuImg = Ti.UI.createImageView({
	bottom: 0,
	width: 50,
	height: 50,
	image:'/images/menu.png'
});

var replayImg = Ti.UI.createImageView({
	top: 250,
	width: 75,
	height: 75,
	image:'/images/replay-icon.png'
});

// Labels
var questions = Ti.UI.createLabel({
	text: "QUESTIONS",
	top: 180,
	height: 100,
	width: "100%",
	textAlign: "center",
	color: "#FFFFFF",
	backgroundColor: "#0000000",
});

// Event Listeners
gameMenuImg.addEventListener('click',function(e){
	homeWin.open();
	gameWin.close();
	
	if(Titanium.App.Properties.getInt("score") > 0) {
	   var addScore = db.execute('INSERT INTO scores VALUES ("' + Titanium.App.Properties.getString("cat") + '",' + Titanium.App.Properties.getInt("score") + ')');
	   Titanium.App.Properties.setString("score", 0);
	}
});

replayImg.addEventListener('click',function(e){
	gameWin.remove(replayImg);
	pickerWin.open();
	gameWin.close();
});

falseImg.addEventListener('click',function(e){
	gameWin.remove(questions);
	var Bamboozle = db.execute('SELECT tf FROM questions WHERE rowid = "' + Titanium.App.Properties.getString("qid") +'"');
	result = Bamboozle.fieldByName('tf'); 
	Bamboozle.close();
	if(result == "f") {
		currentScore = Titanium.App.Properties.getInt("score");
		currentScore = currentScore + 1;
		Titanium.App.Properties.setInt("score", currentScore);
		gameWin.remove(questions);
		var Bamboozle = db.execute('SELECT rowid, question FROM questions WHERE cat LIKE "%' + Titanium.App.Properties.getString("cat") + '%" ORDER BY RANDOM() LIMIT 1');
		Titanium.App.Properties.setString("qid", Bamboozle.fieldByName('rowid'));
		q = Bamboozle.fieldByName('question'); 
		Bamboozle.close();
		questions.text = q;
		gameWin.add(questions);
	} else {
		gameWin.remove(questions);
		questions.text = "Sorry, You Have Lost. Your Final Score was " + Titanium.App.Properties.getInt("score");
		gameWin.add(questions);
		gameWin.remove(falseImg);
		gameWin.remove(trueImg);
		gameWin.add(replayImg);
		fail.play();
		var addScore = db.execute('INSERT INTO scores VALUES ("' + Titanium.App.Properties.getString("cat") + '",' + Titanium.App.Properties.getInt("score") + ')');
		Titanium.App.Properties.setString("score", 0);
	}
});

trueImg.addEventListener('click',function(e){
	gameWin.remove(questions);
	var Bamboozle = db.execute('SELECT tf FROM questions WHERE rowid = "' + Titanium.App.Properties.getString("qid") +'"');
	result = Bamboozle.fieldByName('tf'); 
	Bamboozle.close();
	if(result == "t") {
		currentScore = Titanium.App.Properties.getInt("score");
		currentScore = currentScore + 1;
		Titanium.App.Properties.setInt("score", currentScore);
		gameWin.remove(questions);
		var Bamboozle = db.execute('SELECT rowid, question FROM questions WHERE cat LIKE "%' + Titanium.App.Properties.getString("cat") + '%" ORDER BY RANDOM() LIMIT 1');
		Titanium.App.Properties.setInt("qid", Bamboozle.fieldByName('rowid'));
		q = Bamboozle.fieldByName('question'); 
		Bamboozle.close();
		questions.text = q;
		gameWin.add(questions);
	} else {
		gameWin.remove(questions);
		questions.text = "Sorry, You Have Lost. Your Final Score was " + Titanium.App.Properties.getInt("score");
		gameWin.add(questions);
		gameWin.remove(falseImg);
		gameWin.remove(trueImg);
		gameWin.add(replayImg);
		fail.play();
		var addScore = db.execute('INSERT INTO scores VALUES ("' + Titanium.App.Properties.getString("cat") + '",' + Titanium.App.Properties.getInt("score") + ')');
		Titanium.App.Properties.setString("score", 0);
	}
});


// Display Components
gameWin.add(gameBanner);
gameWin.add(trueImg);
gameWin.add(falseImg);
gameWin.add(gameMenuImg);


//
// GAME CATEGORY SELECTION
//

var pickerWin = Ti.UI.createWindow({
	title: 'Bamboozle Categories',
	backgroundColor: "#000000",
	exitOnClose: true
});

// Images
var pickerBanner = Ti.UI.createImageView({
	top: 0,
	image:'/images/clown.jpg'
});

var pickerMenuImg = Ti.UI.createImageView({
	bottom: 0,
	width: 50,
	height: 50,
	image:'/images/menu.png'
});

// Pickers
var catPicker = Ti.UI.createPicker({
	bottom: 100,
	height: 50,
});
catPicker.selectionIndicator = false;

var Bamboozle = db.execute('SELECT cat FROM categories ORDER BY cat');
var catArray = [];
catArray[0] = Ti.UI.createPickerRow({title:'Select a category:'});
i = 1;
while (Bamboozle.isValidRow()) {
	catArray[i] = Ti.UI.createPickerRow({title:''+ Bamboozle.fieldByName('cat')});
	Bamboozle.next();
	i++;
}
Bamboozle.close();
catPicker.add(catArray);

// Event Listeners
var q1 = "";
catPicker.addEventListener('change', function(e) {	
	Titanium.App.Properties.setString("cat",catPicker.getSelectedRow(0).title);
	gameWin.remove(questions);
	var Bamboozle = db.execute('SELECT rowid, question FROM questions WHERE cat LIKE "%' + Titanium.App.Properties.getString("cat") + '%" ORDER BY RANDOM() LIMIT 1');
	Titanium.App.Properties.setString("qid", Bamboozle.fieldByName('rowid'));
	q1 = Bamboozle.fieldByName('question'); 
	Bamboozle.close();
	questions.text = q1;
	gameWin.add(questions);
	gameWin.add(trueImg);
	gameWin.add(falseImg);
	gameWin.remove(replayImg);
	gameWin.open();
	pickerWin.close();
});

pickerMenuImg.addEventListener('click',function(e){
	homeWin.open();
	pickerWin.close();
});

// Display Components
pickerWin.add(pickerBanner);
pickerWin.add(catPicker);
pickerWin.add(pickerMenuImg);


//
// HELP
//

var helpWin = Ti.UI.createWindow({
	title: "Bamboozle Help",
	backgroundColor: "#000000",
	exitOnClose: true
});

// Images
var helpBanner = Ti.UI.createImageView({
	top: 0,
	image:'/images/clown.jpg'
});

var helpMenuImg = Ti.UI.createImageView({
	bottom: 0,
	width: 50,
	height: 50,
	image:'/images/menu.png'
});

// Labels
var helpData = Ti.UI.createLabel({
	html: "Bamboozle is a True/False Trivia App coded by Geoff Ellis of AdeptTechs for a Mobile Application Development University class. <br /><br /> The Goal of the game is to get as many trivia questions correct in row. Get 1 wrong and you need to start over!",
	bottom: 50,
	height: 250,
	width: "100%",
	textAlign: "center",
	color: "#FFFFFF",
	backgroundColor: "#0000000",
});

// Event Listeners
helpMenuImg.addEventListener('click',function(e){
	homeWin.open();
	helpWin.close();
});

// Display Components
helpWin.add(helpBanner);
helpWin.add(helpData);
helpWin.add(helpMenuImg);



//
// SCORES CATEGORY WINDOW
//

var scoresCatWin = Ti.UI.createWindow({
	title: 'Bamboozle Scores',
	backgroundColor: "#000000",
	exitOnClose: true
});

// Images
var scoresCatBanner = Ti.UI.createImageView({
	top: 0,
	image:'/images/clown.jpg'
});

var scoresMenuImg = Ti.UI.createImageView({
	bottom: 0,
	width: 50,
	height: 50,
	image:'/images/menu.png'
});

// Pickers
var scoreCatPicker = Ti.UI.createPicker({
	bottom: 100,
	height: 50,
});

// Table Views
var tv = Ti.UI.createTableView({
	bottom: 50,
	height: 200,
	RowHeight: 10,
	maxRowHeight: 10,	
});

// Labels
var noData = Ti.UI.createLabel({
	text: "No Score Data Yet",
	bottom: 100,
	height: 25,
	width: "100%",
	textAlign: "center",
	color: "#FFFFFF",
	backgroundColor: "#0000000",
});

scoreCatPicker.selectionIndicator = false;


var Bamboozle = db.execute('SELECT rowid, cat FROM categories ORDER BY cat');
var scoreCatArray = [];
scoreCatArray[0] = Ti.UI.createPickerRow({title:'Select a category:'});
i = 1;
while (Bamboozle.isValidRow()) {
	scoreCatArray[i] = Ti.UI.createPickerRow({id:'' + Bamboozle.fieldByName('rowid'), title:''+ Bamboozle.fieldByName('cat')});
	Bamboozle.next();
	i++;
}
Bamboozle.close();

scoreCatPicker.add(scoreCatArray);

// Display Components
scoresCatWin.add(scoresCatBanner);
scoresCatWin.add(scoreCatPicker);
scoresCatWin.add(scoresMenuImg);

scoreCatPicker.addEventListener('change', function(e) {	
	Titanium.App.Properties.setString("cat",scoreCatPicker.getSelectedRow(0).title);
	var Bamboozle = db.execute('SELECT cat, score FROM scores WHERE cat LIKE "%' + Titanium.App.Properties.getString("cat") + '%" ORDER BY score DESC LIMIT 10');
	var scoresArray = [];

	while (Bamboozle.isValidRow()) {
		scoresArray.push({title:'' + Bamboozle.fieldByName('score')});
		Bamboozle.next();
		i++;
	}
	Bamboozle.close();

	scoresCatWin.remove(scoreCatPicker);
	if (scoresArray.length > 0) {
		tv.setData(scoresArray);
		scoresCatWin.add(tv);
	} else {
		scoresCatWin.add(noData);
	}
});

scoresMenuImg.addEventListener('click',function(e){
	homeWin.open();
	scoresCatWin.close();
	scoresCatWin.add(scoreCatPicker);
	scoresCatWin.remove(tv);
	scoresCatWin.remove(noData);
});

Enjoy.

unnamed · 12-29-2013, 03:18 PM

Great tutorial Geoff.I'm currently trying to get everything working.
Hopefully it won't take much and I'll be able to start playing with it soon.

RogueCoder · 12-29-2013, 04:26 PM

Thanks, I would probably be able to follow it if I could get Titanium to work on my system Tongue

MarkUltra · 12-04-2021, 09:02 AM

So hello everyone! I have a few ideas for developing my app, however I'm not a developer, so I can hardly do it. Do you have any tips?

mothered · 12-04-2021, 09:57 AM

(12-04-2021, 09:02 AM)MarkUltra Wrote: So hello everyone! I have a few ideas for developing my app, however I'm not a developer, so I can hardly do it. Do you have any tips?

This thread Is 8 years old and as such, It has been grave dug.

I suggest creating a thread of your own.
Closed.