1readme.md

I've lifted this from a project I'm working on, thought it might be interesting starting point for some sort of dynamic switching of styles with Alloy.

It's a hack, so please free to rip it apart.

• Add the function to alloy.js

• Add objects for "portrait" and "landscape" to your TSS (and leave defaults in there to be overridden, see the sample)

• Call the function from your controller to a) init the view in case you have the device held in landscape when a window opens and b) within an event listener (remember to kill it)

Tested on iOS and Android.

alloy.js

Alloy.Globals.setOrientation = function(view) {

    function applyProperties(object, mode) {
        if (object[container]) {
            object.applyProperties(object[mode]);
        }
    }
    
    function updateControls(_children) {
        
        // default
        var orientName;

        // override for landscape
        if ((Ti.Gesture.orientation == Ti.UI.LANDSCAPE_LEFT) || (Ti.Gesture.orientation == Ti.UI.LANDSCAPE_RIGHT)) {
            orientName = "landscape";        
        } else {
            orientName = "portrait";
        }
        
        // update the kids
        if (_children) {
            _children.forEach(function(control) {                
                applyProperties(control, orientName);
                updateControls(control.views || control.children);
            });
        }
    }    
    updateControls([view]);
}

sample.tss

".helpText" : {
  color: "white",
	textAlign: "center",
	top: "40",
	width: "70%",
	left: null,
	font: {
		fontFamily: "HelveticaNeue-UltraLight",
		fontWeight: "light",
		fontSize: 26
	},
	portrait:{
		width: "70%",
		left: null,
		textAlign: "center"
	},
	landscape:{
		width: "50%",
		left: 20,
		textAlign: "left"
	}
}

".helpImage" : {
	height: 126,
	right: null,
	bottom: 40,
	portrait: {
		right: null
	},
	landscape: {
		right: 40
	}
}

sampleController.js

// remember to handle the removal of this
Ti.Gesture.addEventListener("orientationchange", function(){
         Alloy.Globals.setOrientation($.myWrapper);
});

samplecontroller.xml

<Alloy>
    <Window class="container">       
        <ScrollableView id="myWrapper" showPagingControl="true">
           
            <View class="panel">
                <Label class="helpText">Text1</Label>                
                <ImageView class="helpImage" image="image1.png"/>                
            </View>
            
            <View class="panel">
                <Label class="helpText">Text2</Label>                
                <ImageView class="helpImage" image="image2.png"/>                
            </View>
            
            <View class="panel">
                <Label class="helpText">Text3</Label>                
                <ImageView class="helpImage" image="image3.png"/>                
            </View>
            
        </ScrollableView>
    </Window>
</Alloy>