Featured Module — Extend Alloy Theming with TiTh

Developing cross-platform, native apps with Titanium is easy using Alloy MVC. And, one of its most powerful features is the ability to theme apps.

With Alloy themes, you can override styles, and assets like images by placing them in a theme folder and changing the config.json file to specify a theme name.

It’s important to understand that theming is a build-time process — these aren’t themes that users can select in the app. They’re applied during the compile process.

The idea would be that you could have a similar app for various clients and use theming (and other data options) to provide a different brand / look across the apps. Think golf courses, hair salon apps, etc.

The problem with this, and for me, the most important feature that’s missing from Alloy is the ability to theme the application name, and more importantly, the configuration settings in the tiapp.xml file.

To solve this problem I created TiTh (a mashup of Titanium Themes). I was working on an app where I needed a single codebase to build four different apps across two codebases so eight apps in total. Each app would have a different name, tiapp.xml settings and so I needed a way to be able to generate a dev, test, and production build quickly.

To get started, install TiTh with:

npm install -g tith

Then, in the root of an Alloy project you can type:

tith

to see the current theme name.

Now, to use theme-based tiapp.xml support, copy your tiapp.xml file to one of the following locations:

app/themes/app1/tiapp.xml
app/themes/app1/ios/tiapp.xml
app/themes/app1/android/tiapp.xml

In the example above, the first path would apply the tiapp.xml file to both iOS and Android builds. For platform-specific versions, use the platform subfolder approach.

You can do the same with the defaulticon.png:

app/themes/app1/DefaultIcon.png
app/themes/app1/ios/DefaultIcon.png
app/themes/app1/android/DefaultIcon.png

Now, to set a theme, use the following:

tith set app1

or

tith set app1 android

or

tith set app1 ios

TiTh will copy over the tiapp.xml and defaulticon.png from the relevant folder into the root of the project. It’ll also do a ti clean command, and you’re ready to build.

It’s important to remember not to update the tiapp.xml in the root of the project — update the theme version instead.

You can find out more about TiTh, download, play with it and contribute at https://github.com/jasonkneen/tith

In case you missed them, check out all our featured modules:

Or click the “featured module” tag below!