Forging Titanium Episode 3: Custom UI Components

Futuristic technology background. Internet data connection. Cloud networks.

Editor’s note: This and future episodes of Forging Titanium are available here.

In last week’s episode, we created a cross-platform Navigation Controller as a custom component we could use to organize windows in a Titanium application. This week, we will be taking a deeper look at how to extend core Titanium objects and create our own custom UI components.

In order to accomplish this, we will be using a technique popularized by JavaScript luminary Douglas Crockford, which is called parasitic inheritance. Parasitic inheritance takes advantage of the malleable nature of JavaScript objects, allowing a developer to create an instance of a given type, modify it with additional properties, and return it as a new type of object.

This is a very powerful technique in JavaScript applications generally, but is even more useful and powerful when dealing with JavaScript proxy objects in Titanium. We can use factory functions in the Ti.UI namespace to create base UI components, and then extend those components with new features and functionality we define ourselves.

Find out how use this technique to create a custom ratings widget in this week’s episode of Forging Titanium.

Episode Resources:

  • Douglas Crockford on inheritance in JavaScript
  • Icon set used for star widgets
  • Forging Titanium GitHub repository


  1. Thank you for this tutorial. Im following every one of them. Its a great great work, but I have some doubts about it. Why you enclosure the EventListener in ui.js in a (function(){ … })(); and why in your app.js when you create the button to set the rating to 3.245 you add the function with changeRating with no ‘click’. Thanks.