CODEWITHSUNDEEP
javascriptandroidiphonetitaniumtitanium-mobile
001
001

Reputation: 65205

Titanium: platform detection and changing interface style accordingly

As you may be aware different platform will require slightly different UX/UI.

Example, when you design for the iphone, you might have a back button, however when you build for android, you do not want a back button.

Other things is icons, you might have multiple buttons on the toolbar on the android and only 2 buttons on the toolbar for the iphone.

So the question is...when you build the js file to define the interface, do you build TWO different interface js file each specific to the platform or just 1 js file that would change UI according to platform detection.

I think it might be easier to have two set of UI specific to the platform, rather than change style on platform detection, because the UX might even be different, so the code for UX and UI would be rather complex? what do you think?

Upvotes: 2

Views: 2834

Answers (2)

Charuta
Charuta

Reputation: 43

It would be better to separate your business logic & UI .js files. Also create one .js file for each platform and you can specify the correct js URL depending on the platform. You can refer to the Kitchen Sink example of tabs for a clear idea.

Upvotes: 0

Dhairya Vora
Dhairya Vora

Reputation: 1281

I think, having two sets of UI specific to the platform is better option. the example applications (which comes in-built with titanium studio) shows how to decide the platform. Below is the code from the example application:

var osname = Ti.Platform.osname,
    version = Ti.Platform.version,
    height = Ti.Platform.displayCaps.platformHeight,
    width = Ti.Platform.displayCaps.platformWidth;

//considering tablet to have one dimension over 900px - this is imperfect, so you should feel free to decide
//yourself what you consider a tablet form factor for android
var isTablet = osname === 'ipad' || (osname === 'android' && (width > 899 || height > 899));

var Window;
if (isTablet) {
        Window = require('ui/tablet/ApplicationWindow');
}
else {
    // Android uses platform-specific properties to create windows.
    // All other platforms follow a similar UI pattern.
    if (osname === 'android') {
        Window = require('ui/handheld/android/ApplicationWindow');
    }
    else {
        Window = require('ui/handheld/ApplicationWindow');
    }
}
new Window().open();

Upvotes: 3

Related Questions