sweaver.co.uk
Last week I wrote an article on Getting Started with Appcelerator in 10 Easy Steps. This week I am going to show you how to write your first application in Appcelerator.
If you haven’t already got your environment set up, then read my previous article – Getting Started With Appcelerator in 10 Easy Steps to get Titanium installed and configured ready to start developing.
Ready to go? Good!
First, open up Titanium, and from the Dashboard, click the tab that says Develop:
Then scroll down to the bottom Templates section and select New Project on Single Window Application:
Fill in the details for your new project:
Note, the app ID has to be unique. This should be your domain name in reverse order for good practice but doesn’t have to be. If you don’t have a domain name, use something that is very likely to be unique.
When the new project has been created you can expand it in the left pane of Titanium, and expand the Resources subfolder. Open up “app.js”.
App.js will already contain a bunch of generated code. You can delete all over this code, we will be writing our own in there.
For our first application, we are going to create a very simple application that has a black background with a welcome message.
The great thing about Appcelerator is that if you can already write in Javascript, then you are going to find the learning curve very simple.
The code to put into App.js is as follows:
var win;
var label;
function init() {
// We create a new Window with a black background.
win = Ti.UI.createWindow({
backgroundColor: ‘#000000′
})
// next we create a label that will be formatted to have white centred text
label = Ti.UI.createLabel({
color: ‘#ffffff’,
font: {fontSize: 36, fontFamily: “Courier”, fontWeight: 900},
textAlign: ‘center’
})
// give the label the text
label.text = “My first application 
”;
}
function load() {
// add the label to the window
win.add(label);
// load the window
win.open();
}
init();
load();
Save app.js and press the green arrow on the main toolbar to run the app in your chosen emulator. It should load up and look like this:
Congratulations, you have just created your first appcelerator app
If you have any questions or comments, feel free to let me know!
If you enjoyed this article, please consider sharing it!
[...] Sam Weaver rebooted his blog with writing your first Appcelerator app. [...]