Applying styles to my Titanium UI

Question

I'm just starting Appcelerator's Titanium Alloy.

How can I add styles to my controller/index.js here's the code:

var title = Titanium.UI.createLabel({
   title: "My Label",
   id: "myLabel"
});

I am trying this one on styles/index.tss

"#myLabel": {
 textAlign: "left",
 right: 15,
 color: '#000',
 font: { fontSize:20 },
 shadowColor: '#aaa',
 shadowOffset: {x:5, y:5},
 horizontalWrap: true
}

but unfortunately it's now working. Can anyone teach me on how to add styles to my Titanium UI

score 10 · Answer 1 · answered Nov 26 '13 at 08:47

10

Alloy style are applied automatically to views created through xml. If you want to keep that effect while you are creating objects inside controller you have to use $.UI.create() method instead of Titanium API. In your case your code will look like this:

var title = $.UI.create('Label', {
   title: "My Label",
   id: "myLabel"
});

For more read Dynamic Styles guide. It's not very well documented and some parts of it were unclear for me when I read it but it's good starting point to experiment with the code and learn Alloy behaviour.

answered Nov 26 '13 at 08:47

daniula

6,898
4
32
49

That's why I'm scouring the interwebz now. The styles documentation is wordy and ambiguous. – Mike S. Apr 30 '14 at 20:27
That saved me hours of googling – WeMakeSoftware Aug 13 '14 at 09:33

score 2 · Answer 2 · answered Nov 26 '13 at 14:04

2

it seems that your problem is in the create statement, you should use a text property instead of title:

var title = Titanium.UI.createLabel({
   text: "My Label",
   id: "myLabel"
});

This way, you'll see the label, but the style it won't automatically be applied, so consider one of this options:

If it's possible, create your label in the view:
```
<Alloy>
    <View id="content" class="container">
        <Label id="myLabel" text="My Label"/>
    </View>
</Alloy>
```
That will work automatically applying the style "#myLabel" defined in your .tss file, and of course, you can always change the text value in code:
```
$.myLabel.text = "New value"; 
```

Other solution would be applying the style in code:

var title = Ti.UI.createLabel({
    text: "My Label",
    id: "myLabel"
});
var style = $.createStyle({
    classes: ['myLabel']
    ,apiName: 'Label'});
title.applyProperties(style);

In this case, in your .tss file you need to replace "#myLabel": { for ".myLabel": {

answered Nov 26 '13 at 14:04

kabomi

526
2
10

Your first answer is unrelated As you can see I declared a variable title for my label having a text property set to "My Label". Second, I cannot just add my Label to the views because I am having a loop that will automatically creates a label. Third, your last solution is is possible to just call the id of the label in the index.tss like this "#myLabel": {} – AllenC Nov 26 '13 at 15:42
Hi Allen, so I think that the last solution would be perfect for you and I meant that you need to replace `"#myLabel": { textAlign: "left", right: 15, color: '#000', font: { fontSize:20 }, shadowColor: '#aaa', shadowOffset: {x:5, y:5}, horizontalWrap: true }` for `".myLabel": { textAlign: "left", right: 15, color: '#000', font: { fontSize:20 }, shadowColor: '#aaa', shadowOffset: {x:5, y:5}, horizontalWrap: true }` – kabomi Nov 26 '13 at 16:35
Take a look on my answer. There is $.UI.create() method, not very well documented in Appcelerator documentations but fits exactly this use case. – daniula Nov 26 '13 at 21:28

score 0 · Answer 3 · answered May 04 '16 at 15:52

0

Simple solution is to add class like below,

$.addClass(yourView, "yourClassName");

add your class in .tss file.

answered May 04 '16 at 15:52

Zumry Mohamed

9,318
5
46
51

Applying styles to my Titanium UI

3 Answers3