Tag Archives: Appcelerator

Insights from the Titanium App Developer certification exam

Recently I became a Titanium Certified Application Developer (TCAD) and I was thinking on giving some insights on the exam for those who want to take it.

The exam covers all the areas that exists in the process of developing an app with Titanium Appcelerator:

  • Code Questions,
  • Contacts and Social APIs,
  • Cross-Platform Development in Titanium,
  • Integrating Web Content,
  • Media and the Filesystem,
  • Using Location Services,
  • Working with Local Data,
  • Working With Remote Data,
  • You’re a Native Application Developer Now,
  • Zero To App Recap,
  • UI Fundamentals,
  • Deployment and Distribution.

To pass the exam you will need of course experience but the Appcelerator team has put online at Wiki the labs for each part of the exam. I strongly suggest you to take a good look at them, even at those that might look already known to you, because you might find some nice stuff inside and it will also remind you forgotten stuff at least.

Some of the courses have videos and also links to the downloadable projects.

The projects are a good point to start/learn how to do things “the right way” and explain pretty well some principles that apply to an Appcelerator app.

Don’t let the word “exam” scare you because it’s not really difficult – some of the questions are simple and common sense.

So go for it!

Seven days with Titanium – day 0 – introduction

What is all about?

I intend this to be a set of seven tutorials to help beginners understand how to work with the Titanium mobile framework.

The guys at Appcelerator did a great job with the framework allowing to us, the web developers, to have access on native applications for mobile devices ( Apple iDevices, Android and soon BlackBerry).

The framework reached the 1.4 version and each day more developers seem to be interested in using it – especially because it’s free. The community is great and you’ll find answers on almost any problem you might have. But for the beginners is still a little difficult to start. From here surged the idea of this set of tutorials in which I will try to cover the basics of the development process for iPhone and Android.
Titanium Appcelerator

Some things to start

Each post will contain a header with the previous tutorials written, for an easy follow. It will also have a footer part where some links of interest will be published.

It won’t be daily posts, I will write when I’ll have enough time to test and write the examples. I prefer a better written post to a fast one. And each post might be updated to add forgotten things (or to fix issues) so don’t forget to bookmark it.

The provided code will be licensed under the MIT license so you will be able to use it as you wish.

What should I know and/or what do I need?

Basically you need only Javascript knowledge. Some OOP coding routine would be great but is not mandatory ( we learn on the fly 🙂 .

    To develop for Android you will need Android SDK( Linux / OsX / Windows )
  • To develop for iPhone you will need a Mac ( Apple’s rules not mine)

I will not show you how to install any of the frameworks, SDKs, etc. There are good tutorials and HowTo’s that will show you this so I don’t want to repeat what’s already out there.

What do I need to forget?

May look strange but you really have to forget about something: DOM. Why? Because there is no DOM in there. We are not anymore in the HTML world. So nothing from HTML applies here. There are similar things (events for example) but everything it’s just an analogy to make it easier to use it.

Forget also about using a library ( yes, no MooTools, jQuery, etc…), or at least for a start. Again why? Because all these libraries are DOM oriented and are used to fight with multiple browsers, to please each of them and this adds bloatware to your code – code that will not be used by the devices anyway.

Why “at least for a start” ? Well, later you might miss some functions and methods these libraries have (let’s say the array methods like filter, each, unique, etc… ) but you will be able to implement this by your own and avoid a 150k library.

What you will NOT learn in these tutorials:

You won’t learn Javascript (you need to know it already). You will not learn ObjC and/or Java (in the end this is the purpose of Titanium). I will try to provide the code for each thing you will learn about as well as screenshots and maybe videos.

And at last

What will you learn:

Day 1:

Some things about navigation, windows, views and tabs – the basics of the interface. I will try to briefly explain what does each of these elements and how to use them.

Day 2:

Tables and pickers (or option pickers, the ‘select’ tag equivalent)

Day 3:

Ajax (actually XHR) – on how to use the HttpClient for webpages, XML, JSON and YQL; The webview – how to embed html code in your apps.

Day 4:

Media – images, movies and sounds

Day 5:

GPS and maps.

Day 6:

Some eye-candy with animations and transforms

Day 7:

About orientation and accelerometer.

Day 8:

This will be a post-tutorials day where I’ll sum up the lessons, add links and so on.

I know I said seven days and in the end are 9, but this one and the last do not count as “learning” days. There is a lot of stuff left out like scrollviews, sliders, some modules – Facebook? – more advanced techniques – like app events – but hopefully these will be the subject of another tutorials.

Let me know your thoughts, if you have ideas of what should I write about – remember that this is a beginner’s guide – or to ask questions.

See you in day 1.


PDF documents on how to install Titanium on each of the supported platforms ( Linux / OsX / Windows ) can be found on Titanium Appcelerator blog, go get them 🙂

Check the Spanish version of this post:
Siete días con Titanium – Día 0 – Introducción

Custom table rows with Titanium

Custom row for TableView in Appcelerator Titanium

In this post  I will try to explain how to create custom rows for TableViews using Titanium Mobile.

If you don’t know what Titanium is about,  take a look here. I suppose you already know how to setup and start a Titanium project so I’ll show only how to create a custom row.

By default a TableView will let you create a row that can have: the left image, the title and the row type decorator set. The next code is an example of the standard data that needs to be passed to a TableView.

var RegData = [
{ leftImage:'es.png', title:"Spain", hasChild:true },
{ leftImage:'gb.png', title:"United Kingdom", hasChild:true },
{ leftImage:'us.png', title:"United States", hasChild:true },
{ leftImage:'fr.png', title:"France", hasChild:true }
var TheTable = Titanium.UI.createTableView({

And the result is this:

Ok, we would like to add more data to a row, maybe something like this:

This will require to build the row “by hand”. So we need to add a 2 imageViews, the flag and the trend, and  labelViews for the country and the percent . We also need to change the data array of course.

var CustomData = [
{ flag:'es.png', country:"Spain", trend:'up.png', percent:'28%' ,hasChild:true },
{ flag:'gb.png', country:"United Kingdom", trend:'down.png', percent:'-3%', hasChild:true },
{ flag:'us.png', country:"United States", trend:'up.png', percent:'8%', hasChild:true },
{ flag:'fr.png', country:"France", trend:'down.png', percent:'-40%', hasChild:true }

We create a data variable as an array that will hold the row objects generated.

var data=[];

then we walk through the CustomData array, create  a new row , the imageViews and labels and add them to the row.

for (var i = CustomData.length - 1; i <= 0; i--) {
var row = Titanium.UI.createTableViewRow();
var flag =  Titanium.UI.createImageView({
var country = Titanium.UI.createLabel({
var percent =  Titanium.UI.createLabel({
var trend =  Titanium.UI.createImageView({
row.className = 'coutry_row';

As you see we also add a className to the row to improve the rendering performance, as the iPhone will reuse the row template with every new data when rendering the table.

The obtained result is this:

You can download the complete Titanium project from here. You will have to create a new project in Titanium and replace the resource folder with the one in the archive.

Let me know your thoughts.

Check the Spanish version of this post:
Como crear filas personalizadas para TableViews usando Titanium Móvil