Wednesday, April 10, 2013

Get Ready For Titanium Certified Application Developer Exam (TCAD) & TCAD Sample Questions

Titanium Certified Application Developer exam can be done online and can be used to test your Titanium development skills. The exam is an online examination and at the time of writing it was priced at  $49.99 . But Appcelerator will provide promo codes time to time and if you are lucky enough you may get the chance to do it free. as in my case. :)

I took the exam on May 2012 and I will share some tips that you may need if you are planning to take TCAD exam.

Appcelerator provides a detailed video tutorial on Titanium. If you simply go through the videos well enough you should be able to make it through.
go to,!/video
and refer the links under 'Building Native Mobile Apps'.

Watch the videos few times and make your own notes on things you will forget.
Another source of reference is the appcelerator wiki, this has loads of info about Titanium and it can be used to get a detailed understanding on the topics covered on the videos. And there are Labs associated with the videos and you can try them out to get a better understanding on the content of each video.

If you have time read the wiki itself but it has quite a lot of detail and everything will not be tested on the exam. So if you need to do the exam quick stick to the topics on the videos and refer the wiki.

The exam will also present you with few questions on Titanium which are not mentioned on the videos,  most of them can be answered if you have actually worked with Titanium for a quite a bit of time. But even without getting all these new questions right you should be able to make the pass score of 75% (At the time of writing)

The exam will test lot of your skills, don't skip topics on the videos. Most of us tend to neglect stuff like deployment, distribution of apps, database etc. But TCAD exam covers all of them  so make sure you are ready for the exam.

Sample TCAD Questions

1. What is considered as the bootstrap file of a Titanium project ?

2. The recommend use of the following ? 
                eval, require, Ti.include

3. What is the read only file directory ?

4. What is the read/write file directory ?

5. The images some times have @2x at the end. How are these images accessed from your code ?

6. What is the format of an appID?

7. What is the database type on Android ?

8. What is the database type on iPhone ?

9. What can be used for persistent data storage ?

10. Which platforms support horizontal and vertical scrolling ?

11. What is the Javascript engine on Android ?

12. What is the Javascript engine on iPhone ?

13. What is the preferred data transmission format for mobile networks ?

14. What mobile platforms does Titanium support ?

15. What is the difference between a simulator and a Emulator ?

16. What is the Android specific name space for UI ?

17. What is the iPhone specific name space for UI ?

18. What is the zIndex ?

19. What is the difference between PhoneGap and Titanium ?

20. What is the configuration file of an Titanium project ?

21. What is the tool used to analyse a native iPhone application ?

22. What is the tool used to analyse a native Android application ?

23. What is the process of deploying an application for AdHoc Distribution?

24. Where would you save user preferences of your application ?

25. What are the layout types for a view ?

26. What are the events associated with Ti.UI.View ?

State if the following are True / False

27. The use of multiple execution contexts are recommended

29. You can access all the native API from a web View

30. Map routing is supported on both iPhone and Android

31. Button bar is supported on both iPhone and Android

32. The Appcelerator Platform is free and open source

33. Http requests on Titanium are asynchronous

Introduction to Appcelerator Titanium - Part 1

Appcelerator Titanium is a cross platform native mobile application development tool. You can use a single code base to write applications for iPhone, Android and Blackberry (Windows 8 in the near future). The code will de written in Javascript and the compilation process will create native applications on each platform.

Pure Native Applications Vs Titanium Vs HTML based Hybrid Applications

There is no global best approach for a mobile application. It will always depend on the context and the your requirement. You will undertand the pros and cons of each development method as you read along and understand how to pick up the best solution for the given requirement. Always try understand the requirement and then decide what will be the best solution for you.

Native Applications will always have the best performance. Meaning that if you need to write an application for iPhone you need to write it using Objective C and if you need an application for Android then you need to use Java etc. But writing you code in two different platforms will make you maintain two code bases and most probably you will have to maintain two different development teams with different skill sets to do the programming. So if you need the best possible performance application you will need to stick in to native but on the other hand it will require the highest amount of coding effort.

HTML based web application development is something similar to opening up your mobile browser to display your application. So the application will be similar to a mobile web page. (The user may not always feel that it an actual web browser that is rendering the application). There are technologies such as PhoneGap (Cordova) that will allow you to access native mobile features such as the Accelerometer, GPS etc. The HTML based Hybrid Application development requires less development work and can be made to run on multiple platforms using platforms like PhoneGap. PhoneGap will allow you to make applications for iPhone, Android, Blackberry, Windows 8. But the downside of HTML based Hybrid Applications is that there is a significant performance drawback since the application runs on a web view and the web view is considered as one of the heaviest UI components and it will give you an performance drawback. But if you need an application running on on multiple platforms and with relatively less effort HTML based web application may be your answer. Note that most mobile browsers now support  HTML5 and great features of HTML 5 can be used in your application.

Finally moving on to Titanium, Titanium will maintain a single javascript codebase and will compile to native. That is you write your code in Titanium and then you compile it you actually have a native application. Say you create a window using Titanium and you compile it for iPhone. Then you will get a native window for iPhone just as you create a window using Objective C. And say you compile the same code in to Android, it will create a native window on Android. So your application is actually in native but still with a single code base. Using Titanium will give you an application with near native user experience but with more effort than HTML based web application but with less effort than Native mobile application development.

How Appcelerator Titanium Works

This is how appcelerator Titanium works. You write your application using Javascript. You will use the API provided by Titanium to create your application.  Example, Titanium will provide you with an API to create a window or to create a button. So you simply will have to call the API  to create your UI component in your application. Then when you compile your code it will compile into native. As given in the below diagram in orange, there is a component called the Kroll bridge that will convert your Javascript code into a native code. This cross compilation process is actually done by a python script called So when you actually install your application you will have native functionality.

ref :

Installing Titanium

You  can follow the detailed instructions on Titanium official site to get Titanium installed.

Just to walk you through the process at an very high level

step 1 : Install Xcode (For Mac Machines)
step 2 : Install Java 6 ( Mac Machines has java 6 preinstalled, set the environment variables in Windows machines)
step 3 : Download Titanium
step 4 : Download Android SDK and update it
step 5 : open Titanium,
goto, Titanium Studio -> Preferences -> Titanium Studio -> titanium -> Browse for the relevant directories.

Creating your first app using Titanium

Step 1 :

Step 2 :
Select a default project. (The actual layout and options will change depending on your Titanium Studio version)

Step 3 :

Type your project name as helloWorld and add type an App id as com.yourCompany.helloWorld. The App id will be used to uniquely identify your application and it is usually used in reverse domain format. More on App id later. :)
You can also set the SDK version and the deployment targets. The available deployment targets will depend on the SDKs you have installed on your machine. On the screenshot below you can see that the Blackberry checkbox is greyed out. It is because I have not installed the Blackberry development tools on my machine. And also note that to do iPhone development you will need a Apple, the SDKs are only supported on Mac OS. But android apps can be developed on both Windows and Mac machines.

Step 4 :

Running your application. Right click on your project click Run As -> Select the Simulator or Emulator you need to run your app. The app will now get installed on the target and it will pop up on your screen. Note that the Android Emulator takes ages to load so don't close it once it is up and running until you are done with the development session. :)

Your Default application

The below screenshots are taken from running the application on Android and iPhone.

Here you will notice that the the Application on iPhone and the application on Android seems bit different from each other. The Tab buttons/ Tag group is at the bottom on iPhone while it is on top in Android. But its the same code. The reason is simple. It is because Titanium calls native functions on the respective platform, and the Tab group native implementations are different thus it is rendered differently.
Simple example, an Android user will always expect the tabs to be at the top, an iPhone user will always expect the tab group to be at the bottom. And Titanium simply offers the user the look and feel of a real native application.

Now you are done with your default application. Let's move on to creating our own hello world application.

Hello world with Appcelerator Titanium

Open app.js and delete its content. Lets create the hello world app from scratch. :)

the existing app.js with the default application may look as follows. (Select the contents and delete.)

Step 1:

You need to create a window to hold the UI components of your application. Titanium provides a method called 'createWindow' to create a new window.
The parameter passed to the method is a JSON object and it will define the properties of the window.
In this example I've set the property background color to 'white'.

The API is available at :!/api/Titanium.UI.Window

var win = Ti.UI.createWindow({
    backgroundColor : 'white'

Step 2:

Now lets create the label 'Hello World'. Titanium provides a method called 'createLabel' to create a new label. The parameter passed to the method is a JSON object and it will define the properties of the label.
In this example I've set the property text color to 'Hello World' and the top property to 250.

The API is available at :!/api/Titanium.UI.Label

var myLabel = Ti.UI.createLabel({
    text : 'Hello World',
    top : 250

Step 3:

You need to add the UI components to your window. Adding the UI components to the window will make them visible when the window is opened.


Step 4:

Open the window.;

The complete Hello World code

var win = Ti.UI.createWindow({
    backgroundColor : 'white'

var myLabel = Ti.UI.createLabel({
    text : 'Hello World',
    top : 250


Copy the above code snippet on app.js and Run your application.

Adding Event Listeners 

An event listener is used to capture certain events on your application. The simplest example is a button click. say you need to perform some task when the button is clicked. Then you will need to attach an event listener to the button and when the event lister identifies a click event you can trigger your code that needs to execute.
Lets use the Hello World example to add an event listener to a button.

Step 1:

Titanium provides a method called 'createButton' to create a new button. The parameter passed to the method is a JSON object and it will define the properties of the button.
In this example I've set the properties title, top, width and left.

The API is available at :!/api/Titanium.UI.Button

var myButton = Ti.UI.createButton({
    title : 'My Button',
    top : 300,
    width : 300,
    left : 10

Step 2:

Add the button to the window.


Step 3:

Now lets add an Event Listener to the button and when the button is clicked we will have a pop up saying the button is clicked.

The event listener function signature is,

addEventListenerString EventName, Callback<Object> callback )

The first parameter is the event to be captured. Like 'click', 'dbclick' etc.
The second parameter is a callback function that will execute when the button is clicked. So in simple the code/ function that needs to get executed when the button is clicked.

In our example we need to capture the 'click' event, so the first parameter needs to be 'click'. The second parameter is a function that actually gives an alert.

The following is an anonymous function that will create an alert. 

    alert('My Button Clicked');

The following code snippet will add an event lister to the button

myButton.addEventListener('click', function(e){
    alert('My Button Clicked');

The complete code snippet for our example will be as follows. Remove any existing code from app.js and add the following code.

var win = Ti.UI.createWindow({
    backgroundColor : 'white'

var myLabel = Ti.UI.createLabel({
    text : 'Hello World',
    top : 250

var myButton = Ti.UI.createButton({
    title : 'My Button',
    top : 300,
    width : 300,
    left : 10

myButton.addEventListener('click', function(e){
    alert('My Button Clicked');

Run Your application.

Now click the button. You will see the alert. :)