Skip to content
Titanium UI Examples using JavaScript Modules (commonJS)
Find file
New pull request
Pull request Compare This branch is even with tzmartin:master.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This app is a collection of various UI design patterns written as JavaScript modules for Titanium Mobile. This will show you how to develop and implement factory components for event driven mobile applications.

There are currently 2 UI modules in this version.

THIS IS FOR iOS ONLY. Sorry. Android support is coming next. :-)

Required: Titanium Mobile SDK 1.7.x

For previous version, you may use the object literal modules instead (located in the modules folder).

Screenshot 1

The Modules

1. Heads Up Display (aka, HUD)

This is a basic implementation of an a heads up display, or modal view, that gracefully displays loading indicator and message.

HUD Screen Shot


var HUD = MyApp.mod.hud.init(; // pass in the window to attach the HUD'YOUR MESSAGE');


init(win);      // Properties: object - window  (required)
show(message);  // Properties: string - message (optional)
hide();         // Properties: none       
  1. Initialize the module using the init() method and pass in a window object to attached the HUD.
  2. Show a HUD by calling show(), passing an optional message to the component.
  3. You can remove a HUD by calling the hide() method. This will call the remove() methods to the HUD on the window object.

Note: Replace 'MyApp' with your own app namespace.

2. Passcode Window

This module is designed to "lock down" an app by invoking a passcode screen and prompting a user to input a 4 digit code. This is loosely based on Apple's internal passcode feature in iOS.

Passcode Screen Shot


var PIN = MyApp.mod.passcode.init({code:1234,barColor:'#0079C1'});{
    // do something
    // do something


init(code,barColor);  // Properties: integer - 4 digits (required); string - hex color value (optional)
open(success,error);  // Properties: object - success callback (optional), object - error callback (optional)
close();              // Properties: none
  1. Initialize the module using the init() method and pass in a 4 digit number to validate against and optionally a color code.
  2. Show a passcode window by calling open(). You can optionally pass in two callbacks: "success" and "error" that will be executed on each event. This is where you can choose to allow a user to continue or not.

Note: Replace 'MyApp' with your own app namespace.

Accessing the Module APIs

To access these modules from JavaScript, you would extend your app namespace in app.js and import the module using the global require() method:

// Extend your existing app namespace for your modules to exist
MyApp.mod = {};
MyApp.mod.hud = require('modules/hud');
MyApp.mod.passcode = require('modules/passcode.mod');


Terry Martin Master Trainer, Appcelerator. Founder of Semantic Press.

More modules to come. Follow me on Twitter or contact me if you need a module developed.


This content is released under the MIT License.

Enjoy! Stay tuned for more modules being added to this project.


Something went wrong with that request. Please try again.