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.
Source for the above example can be found here.