May 10

If you’ve never worked with PhoneGap WebOS; I would strongly recommend that you follow through my previous post.

This demonstration applies to the recently released PhoneGap-0.9.5 implementation of WebOS.

In this post, I’ll demonstrate how to PhoneGap WebOS’ APIs for screen orientation and window sizing.

Setting the screen orientation:

To set the screen orientation of your WebOS app you will need to call the navigator.orientation.setOrientation(orientation) method.

The setOrientation method will accept the follow 5 values as valid orientations:

  • up
  • down
  • left
  • right
  • free

To set your app to use the device’s full screen size you need to call the navigator.window.setFullScreen(boolean) method, which takes a true or false parameter.

If you use the following code in the index.html file of your app, you will be able see how the setOrientation and setFullScreen methods work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
	<script type="text/javascript" src="phonegap.js"></script>   
	<script type="text/javascript">
 		function onLoad() {
	    	     navigator.device.deviceReady();
		}
	</script>
</head>
<body onload="onLoad();">
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="up" name="orientation" checked>up
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="down" name="orientation">down
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="left" name="orientation">left
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="right" name="orientation">right
	<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="free" name="orientation">free 
 
        <p><input type="checkbox" onchange="navigator.window.setFullScreen(this.checked);">toggle full screen</p>      
</body>
</html>

Screen capture of the example app with the “left” orientation selected.

Left orientation selected

Source for the above example can be found here.

Leave a Reply