Day to day, from point A to Point B.
A blog about my passions, interests and the continuous learning process.


Oct 5, 2013   |    #appcelerator    #css    #fromzerotohero    #javascript    #jss    #sublime    #text    #titanium    #studio   

I’ve recently re-evaluated my career path and realized that transitioning to a full UX role right now will not only be impractical, but will also take too much from my time and resources. I’ve decided that moving into mobile development will be a much better transition instead. I’ve been dabbling with Apple’s XCode (for objective-C) and Appcelerator’s Titanium Studio. I’ve barely scratched the surface with these two platforms, but for now I think it will be much better if I go for Titanium Studio since it uses JavaScript. I don’t have to maintain knowledge of different languages mobile and web development.

This will be the first (and I hope many) post about me learning mobile software development. Again, these will be posts regarding me learning new stuff so I’m practically starting from scratch. I’ll be devoting the tag ‘FromZeroToHero‘ for my activities related to this activity.

Oh BTW, I don’t use Titanium Studio much because I use Sublime Text 2 for development (I’ll share my development environment/stack on a future article) so the screenshots will be code in ST2.

Localization / Internationalization in Titanium

Create a folder at root level of your project and name it ‘i18n’. This will be the folder where the app will look for folder containing localized strings, which names should be according to the ISO 639-1 standard. For my sample project, I have 3 languages inside the folder (meh, ph is not supported though). Take a look at the screenshot below:

Folder Structure, Sublime Text 2

Lets have a look at the contents of the xml files.

  /********* strings.xml  *********/  

    <string name=”appname”>Cat
    <string name=”greeting_android”>Hello, I’m an Android!
    <string name=”greeting_ios”>Greetings, I’m a Potatoe!

  /******* strings.xml - es *******/

    Hola, el Android!
    Hola, soy una Patata!

You can call these strings by using Ti.Locale.getString(“resourcename”); or L(“resourcename”); as a shortcut:


Both lines will return appname’s value depending on the locale.

Using JSS (JavaScript Style Sheets)

JSS are Style Sheets that you can use to separate design for each platform. Since I just want iOS and Android for samples, here are my JSS files:

/*********  *********/

#mainwin {
  background-color: '#f00';

#mainlabel {
  text:'Greetings! I'm an Android!';

For my main application, take a look at the code below:

/*********  *********/

var win = Ti.UI.createWindow({ id:'mainwin' });
var label = Ti.UI.createLabel({ id:'mainlabel' });

It just basically creates a window (with the style ‘mainwin’) and a label (with ‘mainlabel’) then opens it. If the app is deployed to iOS, then the window background will be blue and red if it is deployed to Android. Nifty eh?

Using Localized strings with JSS

We’re just going to combine these techniques. How? Its actually very simple. As an example, lets take a look at the Titanium Label class and look specifically at the textid property:

So to use localized strings, lets use the textid property instead of text in our JSS:

Yeah, I’m a Potatoe!
In Spanish!

So there you have it! I hope this post can be of help to you. I know its not much, but at least I’m making progress. Happy coding!

Do you do mobile development? Do you use Appcelerator? Any questions, comments and/or feedback? I would love to hear from you, hit the comments section below!

*UPDATE – (10/10/2013): I’ve received and email from Malcolm Hollingsworth pointing out that JSS was slated to be removed for version 2 of the SDK. He recommends that I learn Alloy (Titanium’s built-in MVC framework). He’s at #1 (at the time of this writing) of the top 100 experts/contributors within the Titanium community. Awesome guy, he actually took the time to email me. I really appreciate it. Thanks Malcom!

comments powered by Disqus