How to use JSS correctly

You must Login before you can answer or comment on any questions.

Hi, i want to use JSS to style my components. In KitchenSink I found two jss-files, but the classes aren't used in the project. I tried to use them without success. In the file label_basic.js one label has the id 'font_label_test'. I defined a class in the file common.jss with this name to set the font size:

#font_label_test {
    font-size: 100;
}
But it doesn't have any effect. I cleaned my project and started again, without any effect. Now my question. How can I use JSS correctly? Is a jss-file with the same name as the js-file neccessary? Is it necessary that the jss-file exists in the same folder than the js-file? ... I had a look at this page https://wiki.appcelerator.org/display/guides/Supporting+Multiple+Platforms+in+a+Single+Codebase but it doesn't make it clearer.

2 Answers

Accepted Answer

What worked for me was to create a .jss file with the same name as the .js file I was styling. So I was styling test.js with test.jss

The test.js file looks like this:

var testText = Titanium.UI.createLabel({
    text:'This is a test text',
    id:'testtext'
})
 
win.add(testText);
and for the test.jss file:
#testtext {
    color:'#93b544'
}

— answered 7 months ago by Maarten Arts
answer permalink
4 Comments

  • Not sure how to edit my post, but I forgot to close the jss line with a semicolon. It should have been: 

    #testtext {
    color:'#93b544';
}
    Note that I used quotation marks around the value in the .jss file.

    — commented 7 months ago by Maarten Arts

  • Ok. So I have to create for every js-file a specific jss-file? Or is it possible to create a global jss-file or more than one different jss-files???

    — commented 7 months ago by Alexander Stark

  • I'm not exactly sure, I only started using Titanium yesterday. But the article says:

    Platform-specific styling

    For simple projects, and those that don't use CommonJS require(), you can use JSS to create platform-specific layouts. Currently, however, our JSS implementation doesn't work well with require(). For more complex apps, you might consider using:

    • platform-specific JS files where you embed the platform-specific formatting within the component definitions.

    • using the "Tweetanium technique" where you define a global style object, in which you store style settings determined with platform-branching code. Then, you use that object's properties when setting styles on your UI components.

    source: http://docs.appcelerator.com/titanium/latest/#!/guide/Supporting_Multiple_Platforms_in_a_Single_Codebase

    You might want to look into this "Tweetanium technique". I don't have any experience with it yet though.

    — commented 7 months ago by Maarten Arts

  • Show 1 more comment

If you don't want to use JSS, then I've described a CommonJS module approach on SO here link

Your Answer

Think you can help? Login to answer this question!