Styles constants on Alloy

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

Hi,

Is there any way to use custom constans in the tss files? Something like this.

"Label.largeBig": {
    font: customContants.fonts.large,
    color: customContants.colors.darkRed
}
Then somewhere in the code is declared:
customContants: {
    fonts: {
        small: {
            fontSize: "12dp"
        },
        medium: {
            fontSize: "14dp"
            },
        large: {
            fontSize: "18dp"
        }
    },
    colors: {
        ....
    }   
}
that would be awesome.

1 Answer

Accepted Answer

Yes, you can attach these constants to the Alloy.CFG object in the app/config.json file. You are able to use anything on Alloy.CFG in the TSS files, just like you can use Titanium constants or localization calls L(). For example, in your app/config.json (create it if it doesn't exist) you could do this:

app/config.json (stripped down to what you need)
{
    "global": {
        "fonts": {
            "small": { "fontSize": "12dp" },
            "medium": { "fontSize": "14dp" },
            "large": { "fontSize": "18dp" },
        },
        "colors": {}
    },
    "dependencies": {}
}

Remember to double quote your strings and keys as this is JSON, not JS. And you could then use these values in your TSS like this:

app/styles/index.tss
"TextField": {
    font: Alloy.CFG.fonts.medium
}

— answered 1 year ago by Tony Lukasavage
answer permalink
2 Comments
  • That work nice. What do you think about these aproach though?

    Create a lib/ui.js, here exports my fonts and colors in commonJS format.

    app/alloy.js

    var customUI= require('ui');
    Alloy.UI = {
        fonts: customUI.fonts,
        colors: customUI.colors
    };
    here I require the lib and expose those objects in the Alloy object.. (may be this is not recommended)

    app/style/index.tts

    "TextField": {
        font: Alloy.UI.fonts.medium
    }
    any thoughts?

    — commented 1 year ago by Juan Ignacio Donoso

  • So here's the thing. I try to reserve namespaces on the Alloy namespace for developers that will never be overwritten by Alloy. For this purpose, we currently have Alloy.CFG and Alloy.Globals. I can't guarantee that Alloy.UI will be safe forever. I would stick to Alloy.CFG.

    Your use of app/alloy.js is perfectly valid, though, and I almost included that in my original answer. Doing this in the app/alloy.js would be the only way to populate the Alloy.CFG with dynamic values that could still be used in the styles.

    — commented 1 year ago by Tony Lukasavage

Your Answer

Think you can help? Login to answer this question!