org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-1812A0D5-74CC-4A94-AF91-970465F6A738.html
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-1812A0D5-74CC-4A94-AF91-970465F6A738.html Fri Mar 05 19:11:15 2010 -0800
@@ -0,0 +1,186 @@
+<!DOCTYPE html
+ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
+<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="Enabling STEW for the home screen"/><meta name="abstract" content="Users can add the Simple Texting Example Widget (STEW) to the home screen."/><meta name="description" content="Users can add the Simple Texting Example Widget (STEW) to the home screen."/><meta name="DC.Relation" scheme="URI" content="GUID-8DC78944-809B-462B-BEC2-0114696F8B14"/><meta name="DC.Relation" scheme="URI" content="GUID-1FD5C597-43B8-402E-92B8-FE0787DB4F3B"/><meta name="DC.Relation" scheme="URI" content="GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-1812A0D5-74CC-4A94-AF91-970465F6A738"/><meta name="DC.Language" content="en"/><title>Enabling STEW for the home screen </title><script type="text/javascript">
+ function initPage() {}
+ </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-1812A0D5-74CC-4A94-AF91-970465F6A738">Enabling STEW for the home screen</h1><div><p>Users can add the Simple Texting Example Widget (STEW) to the home screen.</p>
+<p>The resolution of <a href="GUID-78D2B232-BC16-4633-8B66-DCD0C496B354.html#GUID-78D2B232-BC16-4633-8B66-DCD0C496B354">STEW</a> on the home screen is 309 x 85 pixels and the data is refreshed every 1 second.</p>
+<div class="figure" id="GUID-0FAAEC49-0143-499F-86F9-A7A991E15EBA"><img src="GUID-2A567315-DB83-4876-8E78-C3F1944CAB89_d0e12345_href.png"/><p class="figure-title"><strong>Figure: </strong>STEW on the home screen</p></div>
+<p>Before you can add STEW to the home screen, you must create STEW, as instructed in <a href="GUID-EB2043BB-E557-429B-BA0A-E350A6D06597.html#GUID-EB2043BB-E557-429B-BA0A-E350A6D06597">Designing STEW user interface</a></p>
+<div class="figure" id="GUID-F7D0E4B3-A7D9-4C8C-8B11-F8E661724503"><img src="GUID-65E5FE9D-5585-4A81-A70B-B0F593CE0436_d0e12357_href.png"/><p class="figure-title"><strong>Figure: </strong>STEW Update Status view in full screen mode</p></div>
+<div><h3>To enable STEW for the home screen</h3><ol>
+<li id="GUID-C182FBC9-DB35-4F52-BE3C-4DEEF0B8F693"><a name="GUID-C182FBC9-DB35-4F52-BE3C-4DEEF0B8F693"><!----></a><p>Download the <a href="stew.wgz">STEW home screen widget source files</a> to your computer.</p></li>
+<li id="GUID-582B7B1A-FD16-4779-A752-4546FA119C5F"><a name="GUID-582B7B1A-FD16-4779-A752-4546FA119C5F"><!----></a><p>Modify the <code>info.plist</code> file to include the following key:</p><pre class="codeblock"><key>MiniViewEnabled</key>
+<true/>
+</pre>For more information on the <code>info.plist</code>, see <a href="GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B.html#GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B">Creating the info.plist file</a>.</li>
+<li id="GUID-76C9F586-9FFC-40B8-8D27-ABEA59902C51"><a name="GUID-76C9F586-9FFC-40B8-8D27-ABEA59902C51"><!----></a><p>Add a home screen widget area (<code>mini_view</code>) to the <code>main.html</code> file:</p><pre class="codeblock"><body onload="javascript:init();" onresize="javascript:onResize();" onshow="javascript:setViewMode();">
+
+<div id="container">
+ ...
+</div> <!-- end of 'container' -->
+
+<div id="mini_view" class="hidden">
+ <table id="mini_view_table" class="miniview_tweets" cellspacing="0">
+ <tr>
+ <td id="miniViewLoading"></td>
+ </tr>
+ </table>
+</div>
+
+</body>
+</pre>For more information on the HTML file, see <a href="GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA.html#GUID-C294F32D-CAC7-499C-AD4B-701B9AB57ACA">Creating the widget HTML file</a>.</li>
+</ol></div>
+<div><h3>To detect screen changes</h3><ol>
+<li id="GUID-89F18D54-1D36-4B6B-80AA-70E18D4E9000"><a name="GUID-89F18D54-1D36-4B6B-80AA-70E18D4E9000"><!----></a><p>Add the <code>onshow</code> event handler to the <code>main.html</code> to detect screen (viewport) changes:</p><pre class="codeblock"><body onload="javascript:init();" onresize="javascript:onResize();" onshow="javascript:setViewMode();"></pre></li>
+<li id="GUID-0951E6D9-2333-4166-804C-87B6B939231E"><a name="GUID-0951E6D9-2333-4166-804C-87B6B939231E"><!----></a><p>Modify the <code>onresize</code> method in the <code>main.js</code> file to check whether the widget should be displayed on the home screen or in full screen mode:</p><pre class="codeblock">function onResize(){
+ if ( !Helper.isMiniViewMode() ) {
+ resizeNormalView();
+ }
+ setViewMode();
+}
+</pre><p>The function <code>resizeNormalView</code> contains all the code previously implemented in the <code>onresize</code> function.</p></li>
+<li id="GUID-1E4532DD-29B1-4459-9D8E-580AADAB854F"><a name="GUID-1E4532DD-29B1-4459-9D8E-580AADAB854F"><!----></a><p>Implement the <code>setViewMode</code> function to show or hide the HTML for the full screen widget or the home screen widget:</p><pre class="codeblock">function setViewMode(){
+ var isInMiniView = Helper.isMiniViewMode();
+
+ if ( isInMiniView ) {
+ // Hide main screen.
+ Helper.show( "container", false );
+ // ... and show MiniView.
+ Helper.show( "mini_view", true );
+ miniView.onActivated();
+ } else {
+ // Hide MiniView.
+ Helper.show( "mini_view", false );
+ miniView.onDeactivated();
+ // ... and show main screen.
+ Helper.show( "container", true );
+ }
+}
+</pre></li>
+<li id="GUID-D2B95F8C-DCC3-45E1-B190-AE4B7F82D6E4"><a name="GUID-D2B95F8C-DCC3-45E1-B190-AE4B7F82D6E4"><!----></a><p>To determine whether a widget is running on the home screen, set a threshold value for the screen size in the <code>helper.js</code> file:</p><pre class="codeblock">isMiniViewMode: function() {
+ var size = this.getScreenSize();
+ return ( size.height < Helper.MINI_VIEW_TRESHOLD );
+}
+
+Helper.MINI_VIEW_TRESHOLD = 150;
+</pre><p>If the screen size is less than the threshold value, you can assume that the widget is running on the home screen.</p></li>
+</ol></div>
+<div><h3>To lay out STEW on the home screen</h3><ol>
+<li id="GUID-7F36A5E2-1FFB-41C6-8DE9-2BD24E0932AB"><a name="GUID-7F36A5E2-1FFB-41C6-8DE9-2BD24E0932AB"><!----></a><p>Create a separate CSS file, <code>miniview.css</code>, that defines the layout of STEW on the home screen:</p><pre class="codeblock">/* ******** */
+/* MINIVIEW */
+/* ******** */
+#mini_view {
+ width: 308px;
+ height: 85px;
+ background: white;
+ overflow: hidden;
+}
+
+#mini_view th {
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ background: #7fcce5;
+ padding: 4px 6px;
+ text-align: left;
+}
+
+#mini_view .miniview_tweets {
+ width: 100%;
+}
+
+#mini_view .miniview_tweets .tweet{
+ background: url(images/tr_bg.png) repeat-x bottom #fff;
+}
+
+#mini_view .miniview_tweets .tweet .image{
+ padding: 1px 3px 1px 2px;
+ width: 16px;
+ min-width: 16px;
+ vertical-align: top;
+}
+
+#mini_view .miniview_tweets .tweet .image img{
+ width: 100%;
+}
+
+#mini_view .miniview_tweets .tweet .tweet_content{
+ padding: 2px;
+ vertical-align: top;
+}
+
+#mini_view .miniview_tweets .tweet .name {
+ color: #0099cc;
+ font-size: 12px;
+ font-weight: bold;
+}
+
+#mini_view .miniview_tweets .tweet .status {
+ color: #666666;
+ font-size: 10px;
+ float: left;
+}
+
+</pre></li>
+<li id="GUID-A1E760B1-F7AE-40DC-996D-EDE047F532F3"><a name="GUID-A1E760B1-F7AE-40DC-996D-EDE047F532F3"><!----></a><p>Add a reference to <code>miniview.css</code> to the <code>main.html</code> file:</p><pre class="codeblock"><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <link href="style.css" rel="stylesheet" type="text/css">
+ <link href="style_small.css" rel="stylesheet" type="text/css">
+ <link href="miniview.css" rel="stylesheet" type="text/css">
+ ...
+</head>
+</pre></li>
+</ol></div>
+<div><h3>To implement the functionality of STEW on the home screen</h3><ol>
+<li id="GUID-E5DE6571-D162-4FE0-8302-7C4CB9D9240A"><a name="GUID-E5DE6571-D162-4FE0-8302-7C4CB9D9240A"><!----></a><p>Implement STEW home screen widget functionality in the <code>MiniView.js</code> file. </p></li>
+<li id="GUID-18EFA1DD-5AC2-49AF-8589-94A4C6C51DF5"><a name="GUID-18EFA1DD-5AC2-49AF-8589-94A4C6C51DF5"><!----></a><p>Users can set the refresh rate for the home screen widget in the STEW <span class="uicontrol">Settings</span> view when the widget is running in full screen mode. Create the <code>onActivated</code> function that is called from the <code>setViewMode</code> function to check the refresh rate when the home screen widget is activated:</p><pre class="codeblock">function MiniView() {
+
+}
+MiniView.prototype.onActivated = function() {
+ // Get the refresh rate.
+ var refresh = parseInt( widget.preferenceForKey( SettingsScreen.KEY_REFRESH ) );
+ if ( isNaN( refresh ) ) {
+ refresh = 30000; // Default to 30 seconds.
+ }</pre></li>
+<li id="GUID-9B03ABE9-CAA7-4BD9-8250-C8E78A2B4F14"><a name="GUID-9B03ABE9-CAA7-4BD9-8250-C8E78A2B4F14"><!----></a><p>Create a timer to refresh the home screen widget at the set intervals. The first refresh happens immediately to fetch the latest status updates. </p><pre class="codeblock"> // Start the timer which refreshes the miniview.
+ var self = this;
+ this.timerId = setInterval( function(){
+ self.refresh();
+ }, refresh );
+
+ // Timer will trigger after the refresh period so refresh manually now.
+ this.refresh();
+}
+
+MiniView.prototype.refresh = function() {
+ var self = this;
+ twitterService.onSuccess = function( response ) { self.onTwitterResponse( response ) }
+ twitterService.onError = function( status ) { self.onTwitterError( status ) }
+
+ twitterService.getPublicTweets( 3 );
+}</pre></li>
+<li id="GUID-1573799D-A20C-498A-AE51-8CEC0381A3E6"><a name="GUID-1573799D-A20C-498A-AE51-8CEC0381A3E6"><!----></a><p>Timers consume battery power on mobile devices. Create a function to stop the timer when the home screen widget is deactivated. The function is called from the <code>setViewMode</code> function.</p><pre class="codeblock">MiniView.prototype.onDeactivated = function() {
+ // Stop timer.
+ clearInterval( this.timerId );
+}</pre></li>
+<li id="GUID-825B5BCE-24CF-4BEC-9787-FEFC365366B6"><a name="GUID-825B5BCE-24CF-4BEC-9787-FEFC365366B6"><!----></a>Create a function to fetch data for the home screen widget:<p/><pre class="codeblock">MiniView.prototype.onTwitterResponse = function( response ) {
+ // Fill in dummy data here.
+ var tweetsTable = document.getElementById( "mini_view_table" );
+ var html = Helper.createTableHeader( "Friends and my tweets" );
+
+ // Fill in the table.
+ for ( var i = 0; i < response.length; ++i ) {
+ var tweet = response[i];
+
+ html += Helper.createStatusRow( tweet.user.profile_image_url,
+ tweet.user.screen_name,
+ tweet.text, "", "" );
+ }
+
+ tweetsTable.innerHTML = html;
+}</pre></li>
+<li id="GUID-1B800C38-6250-4170-8F75-9682B0E0AAE7"><a name="GUID-1B800C38-6250-4170-8F75-9682B0E0AAE7"><!----></a><p>If an error occurs during data retrieval, display an error message:</p><pre class="codeblock">MiniView.prototype.onTwitterError = function( status ) {
+ var tweetsTable = document.getElementById( "mini_view_table" );
+ tweetsTable.innerHTML = "Error...";
+}</pre></li>
+</ol></div>
+</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>
\ No newline at end of file