Question

I’m working on a mid-size Appcelerator Titanium app. I want to extend the Ti.UI object, and I am wondering if this is safe.

What I want to do
Store a number of UI-related helper functions and objects as part of the Ti.UI tree.

A trivial example would be:

Ti.UI.COLORS = {
    RED: '#213234',
    BLUE: '#ABDCEF'
}

My big concern is that this may be unsafe or just not future-proof.

Why I want to do it
I’ve had bad experiences with Titanium’s JSS and I am currently storing and retrieving my files in a CSS.js file. This file bundles a few functions and objects that make styling easier (like the colors example above), and combines them with a big long list of style classes, stored as objects. The classes make use of the helper functions.

Like so:

//Provide helper functions
COLORS = { RED: 'etc' };
IOS_ANDROID = function(iosValue,androidValue){ 
    if (Device.isIOS) {

        return iosValue
    } else {
        return androidValue
    };

//Provide the styles as exports object (using commonJS)
exports.styles = {
    winHome: {
        backgroundColor: COLORS.RED
    },
    winProducts: {
        navBarHidden: IOS_ANDROID(true,false),
    }
}

Now that my app has grown, the size of this styles object is getting annoying. I am trying to split the styles into several .js files and combine them (and the necessary functions) using includes and requires. So I now have a ‘css-Home.js’, ‘css-Products.js’, etc.

This works, sort of, but I currently need to re-include/require the helper functions in every css-.js file. This feels awkward. I am trying to be strict in the CommonJS practice of only using require() and not doing include(). However, if I use require() to add the helper functions, like so…

var cssHelpers = require('css-helpers.js')

…then I would need to prefix all the helpers with that variable, like so…

exports.styles = {
    winHome: { 
        backgroundColor: cssHelpers.COLORS.RED,
    },
}

That’s why I would like to put these basic things into Ti.UI during the app’s initialization. Then I’ll have the style helper functions available wherever.

Answer 1

I found a decent solution that doesn’t involve altering Ti.UI. The cue came from trying to run the app on Android and finding that it passes even fewer variables between different parts. So I needed to dig deeper into the CommonJS principles and the meaning of require() and Ti.include().

The trick to not having to prefix my CSS helpers with their parent’s name is as follows:

1. Require a CSS-helpers.js file in the file where you need the helper functions.
2. Have CSS-helper.js’s exports object return just one function.

3. Execute the function immediately after requiring. Like so:

   //Include CSS helper functions as local variables
   require(‘shared/css-helpers’)();

4. In the one exports function of CCS-helpers, use the ‘this’ variable to apply functions directly to the js context where globals is included:

   exports = function(){
   this[‘IOS_ANDROID’] = function(ios,android){ etc };
   this[‘otherHelperFunction’] = function(){};
   }

Now, in the file where CSS-helpers was included, you can use the helper functions like IOS_ANDROID() without any prefix. That’s because the ‘this’ variable in CSS-helpers points to the context that called the function.