Techminded

Crossplatform layouts on Titanium Framework

Titanium Framework allows you to develop cross-platform applications using one code base. In particular Titanium Mobile allows to develop apps for iOS, Android and Blackberry devices. Mobile applications on Titanium are coded with JavaScript and built to almost native binaries for each platform.

The problem is that they all have different screen resolutions and ui customs. Happily starting from version 1.5 Titanium introduced JSS tool that allows you to define layout options using CSS notation. All you should do is to create jss files in Resources named after context where they should be loaded. For app.js it will be app.jss and for some_windows.js - some_windows.jss. They you can describe properties using id and class type selectors. For example you have someLabel element in app.js. As Titanium guys still haven't implemented platfrom dependent jss style loading as they done with images, but we can name element id's with platform suffix.

var someLabel = Titanium.UI.createLabel({ 
    id: "somelabel-"+Titanium.Platform.osname,
});

Your app.jss may containg the following definitions:

#somelabel-iphone {
    width: 200;
}
#somelabel-ipad {
    width: 350;
}

Now you will have different width of the same button for iPhone and iPad devices. Note that options should be named in CSS notation but not as they named in your Titanium Javascript code. E. G. textAlign will be text-align and so on. And one more: your should clean and rebuild you app after jss file is changed to apply changes on app.

Comments