|
1 |
|
2 <!DOCTYPE html |
|
3 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="STEW: supporting screen rotation"/><meta name="abstract" content="This example illustrates how to design a widget that supports the changes in screen orientation."/><meta name="description" content="This example illustrates how to design a widget that supports the changes in screen orientation."/><meta name="DC.Relation" scheme="URI" content="GUID-9F3218D9-2BEA-417C-8017-E05AC749BF84"/><meta name="DC.Relation" scheme="URI" content="GUID-0FCBC574-2328-4986-99D3-7DC4BDE9C3A4"/><meta name="DC.Relation" scheme="URI" content="GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2"/><meta name="DC.Relation" scheme="URI" content="GUID-EB2043BB-E557-429B-BA0A-E350A6D06597"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-B12990B6-979C-4BBA-B030-FB7CEC04CB3A"/><meta name="DC.Language" content="en"/><title>STEW: supporting screen rotation </title><script type="text/javascript"> |
|
5 function initPage() {} |
|
6 </script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-B12990B6-979C-4BBA-B030-FB7CEC04CB3A">STEW: supporting screen rotation</h1><div><p>This example illustrates how to design a widget that supports the changes in screen orientation.</p> |
|
7 <div><h3>Laying out pages in portrait and landscape orientation</h3><p>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.</p><pre class="codeblock">.input_container input { |
|
8 width: 100%; |
|
9 ... |
|
10 } |
|
11 |
|
12 .top_bar { |
|
13 width: 100%; |
|
14 ... |
|
15 } |
|
16 |
|
17 .status_container table{ |
|
18 width: 100%; |
|
19 } |
|
20 </pre><div class="figure" id="GUID-E7646C17-A84F-4729-BB60-EE13A608EBA7"><img src="GUID-440F39F5-9529-4422-A1A2-E5C309CA8750_d0e11769_href.png"/><p class="figure-title"><strong>Figure: </strong>STEW Search view in portrait orientation</p></div><p>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.</p><div class="figure" id="GUID-5BB68204-A994-4F4E-8857-4F2F08A91077"><img src="GUID-B4CB1D93-7418-493A-8ED8-812775ECF341_d0e11778_href.png"/><p class="figure-title"><strong>Figure: </strong>STEW Search view in landscape orientation</p></div><p>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:</p><pre class="codeblock">.buttons_bottom { |
|
21 position: absolute; |
|
22 bottom: 0; |
|
23 left: 0; |
|
24 width: 100%; |
|
25 height: 84px; |
|
26 background: url(images/top_bg.png) bottom repeat-x #b7ecef; |
|
27 text-align: center; |
|
28 padding-top: 2px; |
|
29 border-top: 2px solid #7dcbe5; |
|
30 } |
|
31 </pre><p>The following CSS styles are used for landscape orientation:</p><pre class="codeblock">.buttons_bottom_landscape { |
|
32 position: absolute; |
|
33 top: 0; |
|
34 right: 0; |
|
35 width: 84px; |
|
36 height: 100%; |
|
37 padding-top: 50px; |
|
38 background: url(images/top_bg_landscape.png) right repeat-y #b7ecef; |
|
39 text-align: center; |
|
40 border-left: 2px solid #7dcbe5; |
|
41 } |
|
42 </pre></div> |
|
43 <div><h3>Detecting screen orientation changes</h3><p>The following function that is assigned to the <code>onResize</code> event handler in the <code>body</code> element in the HTML file detects screen orientation changes:</p><pre class="codeblock"><body onload="javascript:init();" onresize="javascript:onResize();"> |
|
44 </pre><p>The <code>onResize</code> function is located in the <code>main.js</code> 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.</p><pre class="codeblock">function onResize() { |
|
45 // Get the screen height or width. |
|
46 var screenSize = Helper.getScreenSize(); |
|
47 |
|
48 // On large screens, when rotating, update the |
|
49 // bottom menu layout (bottom with portrait, right with |
|
50 // landscape). Also update the screen container to be smaller |
|
51 // for the amount of the menu to avoid overlapping. |
|
52 var menuStrip = document.getElementById( "menu_strip" ); |
|
53 var topBar = document.getElementById( "top_bar" ); |
|
54 var container = document.getElementById( "container" ); |
|
55 var content = document.getElementById( "content" ); |
|
56 |
|
57 container.style.width = screenSize.width + "px"; |
|
58 container.style.height = screenSize.height + "px"; |
|
59 |
|
60 var largeScreen = Helper.isLargeScreen(); |
|
61 if ( largeScreen ) { |
|
62 // Hide softkeys. |
|
63 menu.hideSoftkeys(); |
|
64 |
|
65 // Show menu and resize content. |
|
66 var hidden = (menuStrip.className.indexOf( "hidden" ) != -1); |
|
67 if ( Helper.isLandscape() ) { |
|
68 menuStrip.className = "buttons_bottom_landscape"; |
|
69 |
|
70 var width = (screenSize.width - menuStrip.offsetWidth) + "px"; |
|
71 if ( widgetMenu.activeScreen == Menu.LOGIN_SCREEN ) { |
|
72 // If we're on login screen the menu isn't shown so update the width. |
|
73 width = screenSize.width + "px"; |
|
74 } |
|
75 topBar.style.width = width; |
|
76 content.style.width = width; |
|
77 content.style.height = (screenSize.height - topBar.offsetHeight) + "px"; |
|
78 } else { |
|
79 menuStrip.className = "buttons_bottom"; |
|
80 |
|
81 var width = screenSize.width + "px"; |
|
82 topBar.style.width = width; |
|
83 content.style.width = width; |
|
84 content.style.height = (screenSize.height - menuStrip.offsetHeight - topBar.offsetHeight) + "px"; |
|
85 } |
|
86 // If the menu was not visible, hide it. |
|
87 if ( hidden ) { |
|
88 menuStrip.className += " hidden"; |
|
89 } |
|
90 } else { |
|
91 // Hide menu strip and resize content. |
|
92 menuStrip.className = "hidden"; |
|
93 content.style.width = screenSize.width + "px"; |
|
94 content.style.height = screenSize.height + "px"; |
|
95 } |
|
96 </pre><p>The code above uses two functions from the <code>Helper</code> class: <code>getScreenSize</code> and <code>isLandscape</code>. The <code>getScreenSize</code> function returns the width and height in a <code>size</code> object. The <code>isLandscape</code> function checks the screen orientation. The screen orientation is assumed to be landscape if the width of the screen is greater than its height.</p><pre class="codeblock">isLandscape: function() { |
|
97 var size = this.getScreenSize(); |
|
98 return ( size.width > size.height ); |
|
99 } |
|
100 </pre></div> |
|
101 <div><h3>Polling for screen orientation changes</h3><p>Some devices, such as the first product release of the Nokia 5800, do not support the <code>onResize</code> 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 <code>startResizePoller</code> function of the <code>WrtHelper</code> object.</p><pre class="codeblock">startResizePoller: function() { |
|
102 if ( Helper.isLargeScreen() ) { |
|
103 setInterval(WrtHelper._poolResize, 1000); |
|
104 } |
|
105 } |
|
106 </pre><p>The <code>_poolResize</code> function checks the current and previous screen size. If the size changed, the function triggers the <code>resize</code> event manually to achieve the same effect as if WRT triggered the event.</p><pre class="codeblock">_poolResize: function() { |
|
107 var screenSize = Helper.getScreenSize(); |
|
108 var height = screenSize.height; |
|
109 var width = screenSize.width; |
|
110 |
|
111 if ( width != WrtHelper._screenWidth || height != WrtHelper._screenHeight ) { |
|
112 WrtHelper._screenWidth = width; |
|
113 WrtHelper._screenHeight = height; |
|
114 |
|
115 // Trigger event. |
|
116 var fireOnThis = document.body; |
|
117 var evObj = document.createEvent("HTMLEvents"); |
|
118 evObj.initEvent("resize", true, true); |
|
119 fireOnThis.dispatchEvent(evObj); |
|
120 } |
|
121 } |
|
122 </pre></div> |
|
123 </div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html> |