How to use dynamic style in appcelerator?

Question

I'm building an app with appcelerator studio with Alloy framework.

So I want to build the layout to orientation vertical and horizontal.

Now this is the code of my first View:

login.xml

    <View class="container">
        <View id="logoDecipherImage" class="images"></View> 

        <Label id="loginLable"
            class="loginLable">Accedi</Label>

        <View id="viewText" layout="vertical" height="Ti.UI.SIZE">
            <TextField id="username" class="textLogin" hintText="Insert username"></TextField>
            <TextField id="password" class="textLogin" hintText="Insert password" 
            passwordMask="true"></TextField>
        </View>



        <View  id="buttons_container" >

            <!--<Button id="changeLanguageButton" class="buttonLanguage"
                onClick="languageListener" >Lingua</Button>-->

            <Button id="loginButton" class="buttonLogin">Login</Button>

            <Button id="emergencyButton" class="buttonEmergency">Emergency</Button>

        </View> <!-- end buttons_container -->

    </View>
</Alloy>

this is the controller login.js

var args = $.args;
var lang = Alloy.Globals.LANG;

//setto il testo della schermata di login
$.loginLable.text=Titanium.Locale.getString(lang+"login_title");
$.loginButton.text=Titanium.Locale.getString(lang+"login_title");
//$.changeLanguageButton.title= Titanium.Locale.getString(lang + "language");
// 
function loginListener(e){

};

function emergencyListener(e){
};




Ti.Gesture.addEventListener('orientationchange', function(e) {
    if(e.source.isPortrait()){
        //verticale
        Titanium.API.info('Orientation changed: vertical');
        //REMOVE CLASS
        $.removeClass($.logoDecipherImage, 'images-horizontal');
        $.removeClass($.username, '.textLogin-horizontal');
        $.removeClass($.password, '.textLogin-horizontal');
        //ADD CLASS
        $.addClass($.logoDecipherImage, 'images');
        $.addClass($.username, '.textLogin');
        $.addClass($.password, '.textLogin');
        $.viewText.layout="vertical";

    }else if (e.source.isLandscape()){
        //orizzontale
        Titanium.API.info('Orientation changed: horizontal');
        //REMOVE CLASS
        $.removeClass($.logoDecipherImage, 'images');
        $.removeClass($.username, '.textLogin');
        $.removeClass($.password, '.textLogin');
        //ADD CLASS
        $.addClass($.logoDecipherImage, 'images-horizontal');
        $.addClass($.username, '.textLogin-horizontal');
        $.addClass($.password, '.textLogin-horizontal');

        $.viewText.layout="horizontal";
    }
});

This is the tss file login.tss:

".container" : {
    backgroundColor: "#666",
    width : '98%',
    height : '85%',
    layout : "vertical",
    borderRadius : 40,
    borderWidth : 2,
    borderColor: "#fff",
}

".images":{
    top:"5px",
    backgroundImage : "/images/logo.png",
    width : "90%",
    height: "62px"
}

".images-horizontal":{
    top:"5px",
    backgroundImage : "/images/logo.png",
    width : "60%",
    height: "55px"
}


".loginLable":{
    color : "#B3B3B3",
    textAlign : "center",
    width: '340px',
    font : {
        fontSize : "20pt",
        fontWeight : "Italic"
    }
}

".textLogin":{
    top : 20,
    height : "12%",
    backgroundColor : "#c9c9c9",
    borderRadius : 10,
    borderWidth : 1,
    borderColor : "#fff",
    color : "#fff",
    width: '90%',
    font : {
            fontFamily : 'Roboto-Regular',
            fontSize : "14pt",
            fontWeight : "Regular"
    }, 
    paddingLeft : 10
}

".textLogin-horizontal":{
    top : 20,
    height : "15%",
    backgroundColor : "#c9c9c9",
    borderRadius : 10,
    borderWidth : 1,
    borderColor : "#fff",
    color : "#fff",
    width: '40%',
    font : {
            fontFamily : 'Roboto-Regular',
            fontSize : "14pt",
            fontWeight : "Regular"
    }, 
    paddingLeft : 10
}


"#buttons_container": {
    top: 80,
    width: 340,
    height: 60,
}


".buttonLogin":{
    left: 0,
    width: 160,
    height : 60,
    backgroundColor : "#29ABE2",
    borderRadius : 10,
    borderColor: "#fff" 
}

".buttonEmergency":{
    right: 0,
    width: 160,
    height : 60,
    backgroundColor : "#29ABE2",
    borderRadius : 10,
    borderColor: "#fff"
}

Now as you can see, I'm build a listener if the user change the orientation. In this listener I change the class of some component of my layout. But this not works.

How can I fix my problem, or there is a mode to auto set different classes based of orientation of device?

Answer 1

There is a Dynamic TSS widget that does exactly what you want. Install in your project and follow the instructions. You can find it here: https://github.com/jasonkneen/com.jasonkneen.dynamicTSS

Ray