Javascript Style Sheet in Titanium mobile

0
votes

I'm a learning mobile development using Titanium Mobile framework.

I am facing a problem related to application of javascript style sheet. When I name my jss file same as the js file, to which the style is to be applied, it works fine. But if I name it something else, it don't work. Can anybody tell me a solution. Following is my code sample.

// app.js
var win = Titanium.UI.createWindow({ backgroundColor : '#fff' });

win.add( Ti.UI.createButton({ title : 'Button A' }) );

win.open();

// app.jss, works fine
button { backgroundImage: 'grdadient_img.png'; }

// button_style.jss, don't work
button { backgroundImage: 'grdadient_img.png'; }
2
titaniumappceleratortitanium-mobileappcelerator-mobile

2 Answers

6
votes

I never had much success using more than one JSS file. And if you follow Nandu's links you'll see that it's not really documented very well, likely to be removed from Titanium at some point. I expect that Titanium's Alloy will kill off JSS too.

If you don't want to use JSS (or Alloy yet), there is a neat way to centralise your styles using commonJS modules and optionally underscore.js e.g.

theme.js

var theme = {
    tableLabel : {
        color : '#3285C7',
        backgroundColor : 'transparent',
        inactiveColor : '#AAAAAA'
    }
}
module.exports = theme;

to use

    var theme = require('ui/common/Theme');
...
    var myLabel = Ti.UI.createLabel(_.extend({}, theme.tableLabel, {
        top : 5,
        height : Ti.UI.SIZE,
        width : Ti.UI.FILL,
        text : "Hello world",
    }));

I use _extend to take the settings from the theme and add instance specific settings like size, position etc. Don't forget the first empty object literal in the call to `_.extend()

See http://underscorejs.org/#extend

1
votes

Ammar, please refer the following links. Hope it will help you

1.How to use jss correctly

2.How Does .jss feature really works in Titanium mobile SDK