Code samples and components for Titanium mobile
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


TitanTricks Readme

TitanTricks is Titanium Mobile project, full of reusable code samples and tricks with a didactic aim, oriented to begginers and intermediate level users.

Is compatible with android and iOS, but some samples only work on iOS (indicated on each case).

The project itself aims to be an example of how to structure a titanium project and how to work with JavaScript using basic technics and principles.

There is a mobile web version of this project [here](

Component oriented

TitanTricks has been completely refactored to commonJS modules, following Appcelerator guidelines.

Specific app components are defined inside 'app' folder, using one js file for each component (AppWindow, DemoWin, IndexView...)

Also, reusable components are now commonJS modules, under 'app/ui/components' folder.

All TitanTricks components can be easily reused. Copy and paste 'components' folder and require() them in your project.

Coding style and commonJS modules

All path to commonJS modules are declared in module ModulePaths.js, so there's no need to use paths in the project (except for the path to ModulesPath.js file):

var Mods = require('/ModulePaths');

//all the app modules are declared as constants inside a module
var IndexView = require(Mods.INDEXVIEW),
        Tools = require(Mods.TOOLS),
        $$ = require(Mods.STYLES);

module.exports = function() {
        var win = Ti.UI.createWindow ($$.APP_WINDOW);

Also the common styles for the app are defined in Styles.js file, and commonly assigned to $$ var, as a reminiscence of the tweetanium app. Specific styles for some demos are declared inside each demo view.

Tools.js file includes some useful and reusable functions and is required all along the project.

For more info about how to use commonJS modules on Titanium, these two reads will help a lot:

Global Vars:

Global what? :)

There's no need for global vars using CommonJS modules. Even the code in app.js has been involved in an anonymous javascript function to avoid pollute the global scope.


        var Mods = require('/ModulePaths');

        var AppWindow = require(Mods.APPWINDOW);

        var appWin = new AppWindow();;


//no global vars here!


TitanTricks is open for collaboration. You can reuse code, modify or extend in any way.

How to add demos

All demo views are in app/ui/demos

Custom components are in app/ui/components/

Before be shown to the user, demos are built inside ViewTemplateDemo.js and WinDemo.js, which are a template with a title, descriptions and so on, in a vertical layout. Demos are launched from main index tableview (in IndeView.js)

Each ViewDemo in demos/ folder returns a view that is built inside the demos template automatically.

To add a new demo, create a new ViewDemo module and include it in /app/ui/demos/demos.js.

Each ViewDemo has a var called "demoInfo", with info about the demo and a "createView" interface property to launch the demo from the index table.

//Standard demo declaration used along TitanTricks App to reference each demo.
var demoInfo = {
        title:  'Image reflection',
        description:    'Creates an image with its own reflection',
        instructions:   'Click the image to show/hide its reflection. Only works on iOs.',
        component:      'ImageReflection',
        header: 'UI',
        ios:    true,
        android:        false

demoInfo.createView = function(){
        var view = new DemoTemplateView(demoInfo);

        //implement here your demo and build over the view component
        return view;

module.exports = demoInfo; //make it public

Apart of the demo folder, you may want to add some new components to the app. Add your custom components inside components folder.

Code strong!


Author: Javier Rayon, 2011

Contact: javier at criteriastudio dot com

GitHub Repo:

Appcelerator DevLink: