CODEWITHSUNDEEP
cordovasencha-touch-2
vsidou
vsidou

Reputation: 125

sencha touch 2 stick device orientation to portrait except landscape for 1 view

I have an application which i try to dev with the sencha touch 2 framework on android and iphone. I want the application orientation to be set as portrait only except for one view. This view will load a portrait view if device orientation is "portrait" or landscape view if device orientation is "landscape"

For the moment i'm using phonegap on android where i have fixed the orientation as portrait.

But i'm quite lost when it come to create the view which will load either "portrait view" or "landscape view" depending on orientation. Also will orientation be detected if i stick orientation to portrait in phonegap ?

Thanks for you help

Upvotes: 0

Views: 1126

Answers (2)

greg.arnott
greg.arnott

Reputation: 1642

On the one view you wish standard orientation, add a custom value like doLandscape: 1. I like to set runtime "global" values in an app.config.Runtime Class, else I'll attach it to the navbar if it operates for entire app.

Ext.define(‘MyApp.config.Runtime’,{
    singleton : true,
    config : {
        doLandscape: 0   // initialize to 0
    },
    constructor : function(config){
        this.initConfig(config);
    }
});

On the viewport, add:

onOrientationChange: function(viewport, orientation, width, height) {
    // test trigger and values
    console.log('o:' + orientation + ' w:' + width + ' h:' + height);

    if (orientation == 'landscape' && MyApp.config.Runtime.doLandscape === 0) {
        // most often this is all that's needed to prevent change
        return false;

        // alternatively / additionally set it back to portrait manually.
        viewport.orientation = this.PORTRAIT;
    }
}

Looking at the updated source code, here's the viewport default code which handles and fires orientation changes.

onOrientationChange: function() {
    var currentOrientation = this.getOrientation(),
        newOrientation = this.determineOrientation();

    if (newOrientation !== currentOrientation) {
        this.fireOrientationChangeEvent(newOrientation, currentOrientation);
    }
},

fireOrientationChangeEvent: function(newOrientation, oldOrientation) {
    var clsPrefix = Ext.baseCSSPrefix;
    Ext.getBody().replaceCls(clsPrefix + oldOrientation, clsPrefix + newOrientation);

    this.orientation = newOrientation;

    this.updateSize();
    this.fireEvent('orientationchange', this, newOrientation, this.windowWidth, this.windowHeight);
}

As you are packaging native, this option is available as another alternative:

Ext.device.Orientation.on({
    scope: this,
    orientationchange: function(e) {
        console.log('Alpha: ', e.alpha);
        console.log('Beta: ', e.beta);
        console.log('Gamma: ', e.gamma);
    }
});

Upvotes: 0

vsidou
vsidou

Reputation: 125

Without any answer from my question i'll answer to myself.

On Android (phonegap) for example, define in the manifest the orientation as :

android:screenOrientation="sensor"

Then, before starting the application in the Activity, if you want the application to use Portrait only set it to portrait : setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); super.loadUrl("file:///android_asset/www/index.html");

In you JS, when you want to get landscape/portrait to be used, send a command to the main application with an action calling a custom setOrientation code :

onSetOrientationSuccess: function(result) {
    ...
},
onSetOrientationError: function(err) {
    ... 
},

setOrientation: function(orientation) {

    PhoneGap.exec(this.onSetOrientationSuccess, this.onSetOrientationError, "OrientationPlugin", orientation, []);
},

OrientationPlugin is just a simple phonegap plugin where you will check the action and call the right code :

public class OrientationPlugin extends Plugin {

public static final String ACTION="undefined";

@Override
public PluginResult execute(String action, JSONArray data, String callbackId) {
    Log.d("OrientationPlugin", "Plugin called");
    PluginResult result = null;
    YourActivity activity = (YourActivity) this.ctx;
    Log.d("OrientationPlugin", "Plugin Got context");

    if (ACTION.equals(action)) {
        Log.d("OrientationPlugin", "Plugin set SCREEN_ORIENTATION_SENSOR");         
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
    }
    else {
        Log.d("OrientationPlugin", "Plugin set SCREEN_ORIENTATION_PORTRAIT");               
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);         
    }
    Log.d("OrientationPlugin", "Plugin set ALL OK");            
    result = new PluginResult(Status.OK, "ok");
    return result;
}

}

Then you can always set it back to PORTRAIT whenever you need it from JS.

Hope that help !

Upvotes: 1

Related Questions