CODEWITHSUNDEEP
titaniumappceleratorappcelerator-titaniumappcelerator-alloy
developer82
developer82

Reputation: 13713

Appcelerator Titanium - Using Model as dynamic theme

Will this be a good idea:

I recently asked a question about themes (letting the user choose a theme and immediately applying it). To do this I had the thought of using Models and binding - which I used the opportunity to finally learn. I got the desired result - creating a theme and applying it using a model with data binding, and in my test app I did the following:

app.tss "Label": { backgroundColor: "{theme.backgroundColor}" }

(of course in a real app there will be much more definitions and much more bindings.

Doing this requires that I include my Model in every page like this (index.xml):

<Alloy>
    <Model src="theme" />

    <Window class="container" layout="vertical">
        <View
            id="test"
            width="150"
            height="150"
            top="10">
        </View>

        <Label id="label" onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>
        <Label onClick="doClick" top="10">Hello, World</Label>

    </Window>
</Alloy>

(In my real app I'm using an implementation of cross-platform navigation control so I will just pass this model when I open the window in a single place)

Obviously doing this kind of thing will create many binding for pretty much each element on the page. I don't exactly know what is going on behind the scenes, but I'm guessing that it creates a listener for each such binded value - which results in many listeners, a lot of overhead and generates more code for the page.

Guessing I'm pretty much answering my own question - is this path recommended to continue investigating? How bad is this?

Upvotes: 0

Views: 46

Answers (1)

Rene Pot
Rene Pot

Reputation: 24815

It is possible using classes and re-applying them when it changes. You only have to monitor for an event at one place per controller

You can take a look at the example I wrote about dynamic styling based on orientation on GitHub

You can do that like this:

".DynamicLabel[if=Alloy.Globals.isPortrait]": {}

You should be using Backbone events, like also specified in the repository I linked above.

Alloy.js:

Alloy.Globals.events = _.clone(Backbone.Events);

Controller.js:

Alloy.Globals.events.on('orientationchange', () => {

But: This is very complicated and introduces complexity you don't need. The events part I wouldn't recommend for a complicated application. But.. it is possible!

What I would recommend for a complex application, is use the if filters in the tss and just close and re-open the controllers you want to have re-styled.

Upvotes: 0

Related Questions