Hakkura:

I’m going to assume you already have Titanium installed as a prerequisite.
If not, visit www.titaniumapp.com/download/ and get the latest version.
If you are running an older version and are upgrading, please delete the previous Titanium folders before doing so.
The folders you need to remove are:
Windows – C:\Documents and Settings\All Users\Application Data\Titanium and C:\Program Files\Titanium Developer
OS-X – /Library/Application Support/Titanium and /Applications/Titanium Developer
Linux – ./TitaniumApp, usually /home/user/TitaniumApp

Alright, you should be inside the Titanium Developer program after your installation finished or you went and opened it because you’re abit ahead fo the game here.
If you’re looking at the listing of projects, hit the Create Project button, it is a small plus sign in a circle.
If you’re looking a list of frameworks like JQuery and MooTools, you’re in the right place.

From here you want to select the additional tools you may want to use for your project.
Just highlight want you want and hit Continue.
Don’t fret too much! You can always add them later or add other libraries just like you would on a normal webpage.

The next page is your projects information.
Fill it out and hit Create.
It’s simple, I promise.

The Project Name is the name of your application to be.
This will also be used to help organize it by giving it a dedicated folder with a matching name.
The Project Description is a summary of what your application is for or does.
The Publisher Name is you or your company.
The Publisher URL is your home page or your company’s home page.
The Project Location is the local location to store your project’s folder. It has a standard browse button there next to it.
The Application Image is the icon that will be used for your application. It aslo has a standard browse button next to it.

Got everything filled in and ready to go?
Hit Create and we’ll move on.

Alright, your project exists and you’re ready to add some code!
Where do you do that?
Well your project has its own folder so let’s go there and take a look.
You’ll have to find this one yourself as you specified that directory when you were filling out the basic project information.
Once you get there, take a look at the folder structure.

The main things to notice here are the ‘tiapp.xml’, the ‘dist’ folder, and the ‘Resources’ folder.
The ‘tiapp.xml’ file is filled with the information you filled in when creating your project but it also handles some window sizing and control material.
You can see more information on it in my post: TiApp.xml – Some Detail On Defaults.

The ‘dist’ folder will populate with data when you Package and Launch your project. It pretty much holds the local data for your project then.

The ‘Resources’ folder is the most important thing for you here.
It acts like your base web directory of a website.
Remember how Titanium uses web languages, right?
Well this is where it starts treating things like a website or webapp.

Open it up and you’ll see an ‘index.html’ file.
The ‘index.html’ file is the first file that is displayed when your application opens.
Note: The icon you chose for your application may be here as well. As of PR3 it appears your icon file may be linked to rather than copied to your Resources folder.

Understand this ‘Resources’ directory is just base folder of a web site.
That means you can add any content you want under this folder and get access to it just like you would in a normal website.
Want to make a ‘js’ folder for your javascript files? An ‘images’ folder for your images? Go for it! Just remember to add ‘js/’ or ‘images’/ to your path when referencing them.

Speaking of referencing to this folder, Titanium saves you some effort by making the ‘Resources’ folder equivalent to ‘app://’.
So your ‘images’ folder above would be ‘app://images/’ and your javascript files would be ‘app://js/’.
Your index is ‘app://index.html’ as well.

Open up that ‘index.html’ file and take a peek inside.
You’ll see it is a very basic webpage welcoming you to Titanium.
Any frameworks that you chose to include when you created your project are also here.
You can add more by adding them in the code here. Don’t worry you don’t have to add references or anything somewhere else. It’s all right here.
Take a few moments to edit it, add in some custom text or your favorite feature.
Need some inspiration? Try out a Notification Tutorial.
Save and close your editor.

Testing Your Application: [+/-]

Packing for Distribution: [+/-]