Application Settings

Setting up application settings is really straight forward with Titanium.

For my app I give the users the option of include full quotations or abstract single words.  For one set of clients the quotations are most relevant whereas another set of clients abstract words would be helpful.

Settings Screen

I wanted the user to be able to pick what gets included in the results: quotations only, abstract words only, or a mix.  As such, I created this settings screen:

Originally I wanted to go with a TabbedBar object with three options of "Quotations" - "Mixed" - "Abstracts" but then I found out the tabbed bar does not work with Android. As the whole point of this app is to work on both iPhone and Android I had to quickly ditch the tabbed bar.  If you look on the top right hand corner of the API documentation you'll see icons for what platform the page you're looking at applies to - I missed this initially.  You can see for the Tabbed Bar it only works on Apple (the apple icon and .08):

Settings

In my app.js file I created two global variables for the app settings. I then included my appSettings.js file where I'm trying to keep all my app settings code. I've found in other projects the more modular the program the easier it is to maintain and follow.

// app settings
var includeQuotations = true;
var includeAbstractWords = true;

Ti.include("appSettings.js"); 

Inside the appSettings.js file I have the following code which was very intuitive:

if(Ti.App.Properties.hasProperty("includeQuotations")) {
    includeQuotations = Ti.App.Properties.getBool("includeQuotations");
} else {
    Ti.App.Properties.setBool("includeQuotations",true);
}

if(Ti.App.Properties.hasProperty("includeAbstractWords")) {
    includeAbstractWords = Ti.App.Properties.getBool("includeAbstractWords");
} else {
    Ti.App.Properties.setBool("includeAbstractWords",true);
}

I first check whether or not the setting exists - if not, create it with a default value of true.

If the setting does exist, set the global variable to the value the user has selected. I'm not sure what happens if you try and get a property that does not exist with the getBool method but I'm sure it's not what is expected. 

You can then use the two app setting vars anywhere in your program where you need to get application preferences.

Window Backgrounds

Design is a clearly an important element for all apps. You have such a limited space (on the iPhone - Width: 320, Height: 480 pixels) that you have to make good use of the space.  One way to do this is use beautiful window backgrounds to spice up your app.

Given the following directory structure of your projects with the winBackground.png in the Resources/Images folder:

Setting the background of a window is pretty straightforward:


var shuffleWindow = Titanium.UI.createWindow({
    title:'Shuffle',
    backgroundImage:'images/winBackground.png'
});



I had some trouble getting the right image to load. I've seen instructions for the backgroundImage: '../images/winBackground.png' or '/images/winBackground.png' and was rather confused.  If you see a black background it probably means the path to the image is wrong.

Setting up Titanium on a Mac

(relevant for Titainum 1.5.1 as of 1/9/11).

One of the sticking points with developing iPhone apps for me was transitioning to a Mac computer.  I've never been a mac person and have always worked on a Windows PC.   All of my programming experience has been on a PC. I've developed VBA applications within Excel in addition to numerous websites.

But since you need a Mac to develop iPhone apps I took the plunge and got an iMac.  It's a beautiful computer but have had lots of difficulty transitioning between Mac (developing apps) and my PC (developing websites).  Just as installing xcode (iPhone app development software) and getting that working I found installing Titanium to be a bit of a hassle mainly to my inexperience with a Mac.  Here are some problems I ran into to hopefully save you some time.

Titanium does have a very through guide available on their website.  I don't want to rehash what's been created there but here are a few points:

• I have a Mac with OSX 10.6.4 and had no problems with Java.  Already had xcode and apple SDK installed so that step was not a problem.

• The android SDK gave me fits.  

At first I completely skipped the step regarding downloading the correct SDK, APIs, etc. I know it's right there on the guide but for some reason things looked OK to me.  So make sure that your android installation is just like this picture:

 I'm still unsure what everything is in the list but this setup allowed me to create android apps. If you're missing something go to the available packages and make sure to check it.  Also, after you click to install selected make sure you select "accept all" to make all the packages have a Green check next to them.  Otherwise you haven't agreed to the licenses and the packages won't download.


The final step for the android sdk is copying the ADB file into the tools folder.  Again, it's all explained in the guide but initially I skipped right over this step.  As far as I can tell Google changed the location of the adb file in it's latest SDK release.  Titanium, however, needs it to be in a certain place.  So, while the guide talks about symbolic links I just duplicated the adb file from platform-tools folder to the tools folder and that did the trick. 

• Download Titanium

You should now be all set to download titanium.  You'll want to have the android SDK all ready to go so you know the location when needed by Titanium.  Install Titanium and follow the directions on the guide. You'll have to login/create an account.  Select the location of the android SDK FOLDER and you're set.

• Download Netbeans

Unfortunately at this point Titanium does not have a built in text editor or IDE.  That means while Titanium will do the hard work of creating your app for you your actual programming work has to be done in another program. Netbeans seems the best for me.  I've worked with Eclipse on my PC and Netbeans operates almost the exact same way.

• Your first app

Now, in creating your first app here is a tip: select "mobile" for Project Type!  For some insane reason I could not understand this part in the guide.  I saw the screenshot where it says "Installed Mobile Platforms" and had both iPhone and Android selected yet my screen looked like this:

After getting very frustrated and considering shelving the whole Titanium project I realized my mistake.  You have to select Project Type: "Mobile" at the top of the form in order to test your app on the iPhone/Android simulator (the whole point for me!). 

• Create new Project in NetBeans

Titanium sets up your directory structure and creates the app.js file which is the entry point for your app.  In Netbeans go to "File"->"New Project" and type in your project name.    I just used the PHP application template but I don't think it really matters.

For your sources folder select the folder you specified in the step above.  Avoid the frameworks. You should now be able to open App.js and see the underlying code.  Make a few edits (I changed "I am a window" to "I am Danny"), click save. 

• Launch your app

Go back to Titanium and under the "test & package" tab select the emulator of your choice and click launch. For iPhone I had no problems and it seems, at least on my computer, to run way faster than the android emulator which takes forever to load.

For the android simulator make sure your SDK starts with "API." So on my computer I have these chocies: 1.6, APIs 1.6, 2.1-update1, APIs 2.1-update1, 2.2, and APIs 2.2.  For the emulator to work the SDK selected must start with API (the ones bolded above).  Finally, for some reason the Android emulator, when launched, is in locked mode. Sometimes this caused problems so the easiest thing I found was that as soon as possible when the Android Screen popped up drag the lock button from the left to the right side of your screen. Titanium was usually on the "this will take awhile" step (shown in the titanium screen log) so the emulator was usually unlocked by the time Titanium was ready to run my test app.

Welcome

Recently I stumbled across a fantastic piece of software called Titanium developed by Appcelerator.  With mobile apps all the rage right now I had taken it upon myself to try and get some apps to market.

As computer programming is mainly a hobby I've had little formal training in computer science. But I have been developing webpages in HTML/Javascript since I first logged onto the web using Compuserve back in the late 90s.  When I dove into iPhone App development and starting learning Objective-C I almost tore all my hair out.  For those of you who know the language my hats off to you - it's tough.  It's also tough as a hobby since I don't sit down and work every day in the language. When you haven't looked at xcode in 3 months and try and get back into the programming mode it's really difficult.

Titanium, at least so far, looks like a fantastic solution to this problem.  Rather than learning objective-C (for iOS) or Java (for android) you leverage your html/javascript programming talents.  Add in a few Titanium specific lines of code (which so far are very intuitive and feel like javascript) and you're set.

I was able to take an App I wrote for the iPhone in objective-C, and within 1 day, rewrite it in html/javascript/titanium, compile it to an Android app, and publish it on the Android Market!  Pretty incredible.

This blog will serve as my repository for what I'm learning in Titanium and as a way to hopefully share what I've learned. Good luck!