CODEWITHSUNDEEP
titaniumappceleratorappcelerator-titanium
A. A. Sebastian
A. A. Sebastian

Reputation: 538

How to use app.tss classes in JS file Titanium

I'm having a style associated with a class in my app.tss. I want to apply the class on a button. If I apply the class in xml or tss file it works fine, but How do I implement the style class when I dynamically create the button through JS file.

This is my app.tss

/*

This is your global styles file. Selectors and rules you define
here will be applied throughout your app. However, these rules
have the lowest priority of any style settings.

For more information, see the "Style Priorities" section of
http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Styles_and_Themes

For example, the following would apply to all labels, windows,
and text fields (depending on platform) in your app unless you
overrode the settings with other TSS, XML, or JS settings:

'Label[platform=android,windows]': {
    color: '#000' // all platforms except Android and Windows default to black
}

'Window': {
    backgroundColor: '#fff' // white background instead of default transparent or black
}

'TextField[platform=android]': {
    height: Ti.UI.SIZE
}

*/

".buttonCls":{
    width:"40dp",
    height : "20dp",
    backgroundColor : "#ff0000",
}

This is my xml

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
    </Window>
</Alloy>

This is my JS file

function doClick(e) {
    alert($.label.text);
}

var vDate = Ti.UI.createButton({
    title : "hello world",
});

$.index.add(vDate);

$.index.open();

How do I set the class buttonCls on my button vDate?

Upvotes: 2

Views: 484

Answers (1)

Said CHAOUCHE
Said CHAOUCHE

Reputation: 695

To know how you can use global classes, refer this link:

http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styles

To solve your issue, you can use either methods:

$.addClass(vDate, "buttonCls");

or

vDate.applyProperties($.createStyle({
    classes: ["buttonCls"]
}));

Upvotes: 3

Related Questions