STEW: supporting screen rotation
This example illustrates how to design a widget that supports the changes in screen orientation.
+Laying out pages in portrait and landscape orientation
STEW is designed for the 240 x 320 (QVGA) and the 360 x 640 (nHD) screen size in both portrait and landscape orientation. To accommodate for the changes in the width and height ratio when moving between portrait and landscape orientation, the position and size of all elements in the HTML and CSS files in the STEW example are specified relatively.
.input_container input {
+ width: 100%;
+ ...
+}
+
+.top_bar {
+ width: 100%;
+ ...
+}
+
+.status_container table{
+ width: 100%;
+}
+
Figure: STEW Search view in portrait orientation
In most cases, this ensures good user interface display in both portrait and landscape screen orientation on QVGA screens. On nHD screens, additional logic is needed to reposition the navigation menu. In the figure below, the menu is located at the bottom of the screen in portrait orientation, where it takes up a large portion of the screen and reduces the amount of the screen estate available. To fit more content in the view, display the navigation menu at the right side of the screen in landscape orientation.
Figure: STEW Search view in landscape orientation
Use CSS to change the style of the navigation menu when screen orientation changes between portrait and landscape. The following CSS styles are used for portrait orientation:
.buttons_bottom {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 84px;
+ background: url(images/top_bg.png) bottom repeat-x #b7ecef;
+ text-align: center;
+ padding-top: 2px;
+ border-top: 2px solid #7dcbe5;
+}
+The following CSS styles are used for landscape orientation:
.buttons_bottom_landscape {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 84px;
+ height: 100%;
+ padding-top: 50px;
+ background: url(images/top_bg_landscape.png) right repeat-y #b7ecef;
+ text-align: center;
+ border-left: 2px solid #7dcbe5;
+}
+Detecting screen orientation changes
The following function that is assigned to the onResize event handler in the body element in the HTML file detects screen orientation changes:
<body onload="javascript:init();" onresize="javascript:onResize();"> +
The onResize function is located in the main.js file. In addition, the size of the container must be decreased by the menu height or width to position the button menu and title bar correctly on the screen. First, references to all the DOM elements for the menu, container and content are retrieved. Then the size of the content is calculated by subtracting the menu size from the screen size.
function onResize() {
+ // Get the screen height or width.
+ var screenSize = Helper.getScreenSize();
+
+ // On large screens, when rotating, update the
+ // bottom menu layout (bottom with portrait, right with
+ // landscape). Also update the screen container to be smaller
+ // for the amount of the menu to avoid overlapping.
+ var menuStrip = document.getElementById( "menu_strip" );
+ var topBar = document.getElementById( "top_bar" );
+ var container = document.getElementById( "container" );
+ var content = document.getElementById( "content" );
+
+ container.style.width = screenSize.width + "px";
+ container.style.height = screenSize.height + "px";
+
+ var largeScreen = Helper.isLargeScreen();
+ if ( largeScreen ) {
+ // Hide softkeys.
+ menu.hideSoftkeys();
+
+ // Show menu and resize content.
+ var hidden = (menuStrip.className.indexOf( "hidden" ) != -1);
+ if ( Helper.isLandscape() ) {
+ menuStrip.className = "buttons_bottom_landscape";
+
+ var width = (screenSize.width - menuStrip.offsetWidth) + "px";
+ if ( widgetMenu.activeScreen == Menu.LOGIN_SCREEN ) {
+ // If we're on login screen the menu isn't shown so update the width.
+ width = screenSize.width + "px";
+ }
+ topBar.style.width = width;
+ content.style.width = width;
+ content.style.height = (screenSize.height - topBar.offsetHeight) + "px";
+ } else {
+ menuStrip.className = "buttons_bottom";
+
+ var width = screenSize.width + "px";
+ topBar.style.width = width;
+ content.style.width = width;
+ content.style.height = (screenSize.height - menuStrip.offsetHeight - topBar.offsetHeight) + "px";
+ }
+ // If the menu was not visible, hide it.
+ if ( hidden ) {
+ menuStrip.className += " hidden";
+ }
+ } else {
+ // Hide menu strip and resize content.
+ menuStrip.className = "hidden";
+ content.style.width = screenSize.width + "px";
+ content.style.height = screenSize.height + "px";
+ }
+The code above uses two functions from the Helper class: getScreenSize and isLandscape. The getScreenSize function returns the width and height in a size object. The isLandscape function checks the screen orientation. The screen orientation is assumed to be landscape if the width of the screen is greater than its height.
isLandscape: function() {
+ var size = this.getScreenSize();
+ return ( size.width > size.height );
+}
+Polling for screen orientation changes
Some devices, such as the first product release of the Nokia 5800, do not support the onResize function. As a workaround for this known issue, a timer is started that polls for screen size changes. The timer is implemented by calling the startResizePoller function of the WrtHelper object.
startResizePoller: function() {
+ if ( Helper.isLargeScreen() ) {
+ setInterval(WrtHelper._poolResize, 1000);
+ }
+}
+The _poolResize function checks the current and previous screen size. If the size changed, the function triggers the resize event manually to achieve the same effect as if WRT triggered the event.
_poolResize: function() {
+ var screenSize = Helper.getScreenSize();
+ var height = screenSize.height;
+ var width = screenSize.width;
+
+ if ( width != WrtHelper._screenWidth || height != WrtHelper._screenHeight ) {
+ WrtHelper._screenWidth = width;
+ WrtHelper._screenHeight = height;
+
+ // Trigger event.
+ var fireOnThis = document.body;
+ var evObj = document.createEvent("HTMLEvents");
+ evObj.initEvent("resize", true, true);
+ fireOnThis.dispatchEvent(evObj);
+ }
+}
+