IPad> Appcelerator> Alloy> How do I load a different view for a specific controller?

Question

Hopefully a quick question ... I just can't find this in the document, which could mean that I shouldn't do this.

Say I have a "source" controller and a "source" view.

Normally I would do something like this:

var sources = Alloy.createController('source'); $.index.add(sources.getView()); 

Now, I want the sources to have different views based on the ipad orientation. But this is still the same information, just laid out a little differently.

I thought I could do something like this:

 var sources = Alloy.createController('source'); Ti.Gestures.addEventListener( "orientationchange", function(){ if(Ti.Gestures.isPortrait()){ $.index.add( sources.getView('sources/portrait') ); }else{ $.index.add( sources.getView('sources/landscape') ); } }); 

Obviously, I would have to remove views that I am not using, but this is a general idea.

Is there any way to do this?

Answer 1

I would recommend a later approach (hiding / showing) rather than adding more views to the stack. Think of a traditional AJAX HTML web page and responsive projects - you will do this with JS / CSS and don't reload the page.

Suppose you need additional view only for landscape

XML: <View id="ExtraLandscapeView">...<View>

TSS: "#ExtraLandscapeView" : { /* Styles here */ }

JS:

 if(Ti.Gestures.isPortrait()){ $.ExtraLandscapeView.visible = false; } else{ $.ExtraLandscapeView.visible = true; }