There have been some articles written giving overviews of the Titanium Developer application.
This is the application that helps you manage your Titanium projects, test code samples, and keep up with the Titanium community.
This tutorial isn’t about the application so much as what is involved in making your application.
For a more broad look at Titanium Developer check out the official screencast for PR3: Titanium Developer – Preview Release 3 Features.
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.
Project Listing
Creating a Project
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.
Creating a Project: Details
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.
File Structure of a Project
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.
File Structure of a Project: Resources Folder
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.
Index.html with default content
Testing Your Application: [+/-]
#image: TiDev in project window with project selected
Back in the Titanium Developer application on the Projects tab your project should be listed along with any others you have started.
Click its name to open up some details on it.
Replacing the date next to the project name are a couple of icons.
The minus sign will let you delete your project.
The ‘box’ icon will let you run or package your project for installation.
Go ahead and click the box.
Project Package / Install / Launch Options
You should be presented with some options:
- Package and Launch
- Run Application Installer
- Package for Distribution
To test your application you’ll want to use Package and Launch.
This will prepare your application to run and then run it so you can see it in action.
Feel free to give it a whirl and see some of your code in action.
Simple Titanium App Running w/ Debugger
Packing for Distribution: [+/-]
If you followed the Testing Your Application section you’ll be in the right place to begin packing your application.
If not, open up the Titanium Developer, go to the Projects tab, select your project, and push the box icon next to your project name.
Package for Distribution Options
Here you are greeted with icons to select the platforms (OS-X, Windows, and Linux) to build the application for.
Go ahead and at select one or more of them and we’ll move on.
You can then choose if the Titanium runtime files will be bundled with your installer or downloaded when the installer is installing your application.
The Network option is smaller and a good idea in case the user already has the runtime files.
Since I’m just testing, I usually use the Bundled options even though it can be pretty large.
Below the basic Network /Bundled option is a listing of the different modules.
You can choose to Exlude a module entirely, leave it downloadable on install, or bundle it.
This will let you customize what is actually going with your application and is your best bet when you get to the point when you’re trying to make your installer a little smaller.
Before you jump down to the Package button look down there for a little check box.
See him? He’s there to let you make your application public in the cloud.
If you check him and Package he’ll show up on the Apps tab and make your application easier for others to access.
Once you’ve at least selected a general packaing method hit Package along the bottom.
Packaing Project: In Progress Cloud
You will be packaged via the Titanium Cloud.
You will see an animation with a cloud to show you it is packaing the application.
When it is done you will be given a link to your application for each of the operating systems you chose.
There is also a link to visit a page containing them all.
Packing Project: Finished - Download Options
Follow a link and grab your application.
Congratulations on completing your application in Titanium!