Disable Screen Rotation for a Single Page

Most of my application handles both landscape and portrait screen orientations, but I have one page that I would like to lock in landscape.  I found the article, How to disable screen orientation in ET1, which handles the general case of rotation being disabled for the entire application (whatever orientation the device happens to be in when RhoElements is started.

The help gives me the idea of turning the page with a tag on entry, and then block rotation on the screenOrientation event but that's doesn't works as expected.  I set the tag 

     <meta http-equiv="ScreenOrientation" content="rightHanded">

which does force the rotation of the screen as I expect, but when I leave the page, the screen no longer rotates on any of the other screens.  It acts as if I disabled screenOrientation. 

This is on 1.0.1.1.

Any ideas?  Thanks.

Anonymous (not verified)
Hi John,The ScreenOrientation

Hi John,

The ScreenOrientation module is partially persistent. This means that most of the calls persist over future pages. Setting the orientation is one of them.

To switch the auto rotate back on, you need to call:

in Javascript:

screenOrientation.autoRotate = 'enabled';

or in HTML:

<meta http-equiv="ScreenOrientation" content="autoRotate:enabled">

There are a couple of ways of calling this code to make sure only that single page is statically rotated:

1. Set the above tag as a default meta tag in the Config.xml

This means editing the Config.xml file that will be installed in:

\Program Files\RhoElements\Config\Config.xml (on Windows)

/mnt/sdcard/Android/data/com.motorolasolutions.rhoelements/Config.xml (on Android)

in this file, find the "<DefaultMetaTags>" tag and change it to the following:

<DefaultMetaTags>

     <MetaTag VALUE="ScreenOrientation~autoRotate:enabled"/>

</DefaultMetaTags>

This tag will be called every time a page loads, before any other tags on the page. This allows the static page to override this setting. My memory tells me that static meta tags were not implemented in version 1.0.1.1 on the ET1, so if you are using an ET1 it would be best to update to the newest version (1.0.3, check with your Motorola contact for availability. 1.0.3 will be available publicly very soon) or use one of the other steps below:

2. Add the autoRotate call to every other page

Add the HTML meta tag (described above) to the page, or add the JavaScript call (also described above) to the window.onload() function. This is quite a crude way, but will make sure that the other pages autorotate, even if you add more statically rotating pages later.

3. Add the JavaScript call to every exit point from the static page

If you know every way a user can leave a page (i.e, if there are only two links on the page and no back button) then you can make these calls go through a javascript function that switches autorotate back on, and then navigates to the new page.

<script type="text/javascript">

          function navigateAway(newPageUrl)

          {

                    screenOrientation.autoRotate = 'enabled';

                    window.location.href = newPageUrl;

          }

</script>

<a href="navigateAway('home.html')">Go Home</a>

<a href="navigateAway('next.html')">Next Page</a>

I hope this helps,

Ben

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Log in to post comments