# Enabling STEW for the home screen

Users can add the Simple Texting Example Widget (STEW) to the home screen.

The resolution of STEW on the home screen is 309 x 85 pixels and the data is refreshed every 1 second.

Figure: STEW on the home screen

Before you can add STEW to the home screen, you must create STEW, as instructed in Designing STEW user interface

Figure: STEW Update Status view in full screen mode

### To enable STEW for the home screen

1. Download the STEW home screen widget source files to your computer.

2. Modify the `info.plist` file to include the following key:

       <key>MiniViewEnabled</key>
       <true/>

   For more information on the `info.plist`, see Creating the info.plist file.

3. Add a home screen widget area (`mini_view`) to the `main.html` file:

       <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>

   For more information on the HTML file, see Creating the widget HTML file.

### To detect screen changes

1. Add the `onshow` event handler to the `main.html` to detect screen (viewport) changes:

       <body onload="javascript:init();" onresize="javascript:onResize();" onshow="javascript:setViewMode();">

2. Modify the `onresize` method in the `main.js` file to check whether the widget should be displayed on the home screen or in full screen mode:

       function onResize(){
       	if ( !Helper.isMiniViewMode() ) {
       		resizeNormalView();
       	}
       	setViewMode();
       }

   The function `resizeNormalView` contains all the code previously implemented in the `onresize` function.

3. Implement the `setViewMode` function to show or hide the HTML for the full screen widget or the home screen widget:

       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 );
       	}
       }

4. To determine whether a widget is running on the home screen, set a threshold value for the screen size in the `helper.js` file:

       isMiniViewMode: function() {
       	var size = this.getScreenSize();
       	return ( size.height < Helper.MINI_VIEW_TRESHOLD );
       }

       Helper.MINI_VIEW_TRESHOLD = 150;

   If the screen size is less than the threshold value, you can assume that the widget is running on the home screen.

### To lay out STEW on the home screen

1. Create a separate CSS file, `miniview.css`, that defines the layout of STEW on the home screen:

       /* ******** */
       /* 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;
       }

2. Add a reference to `miniview.css` to the `main.html` file:

       <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>

### To implement the functionality of STEW on the home screen

1. Implement STEW home screen widget functionality in the `MiniView.js` file.

2. Users can set the refresh rate for the home screen widget in the STEW Settings view when the widget is running in full screen mode. Create the `onActivated` function that is called from the `setViewMode` function to check the refresh rate when the home screen widget is activated:

       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.
       	}

3. Create a timer to refresh the home screen widget at the set intervals. The first refresh happens immediately to fetch the latest status updates.

       	// 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 );
       }

4. 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 `setViewMode` function.

       MiniView.prototype.onDeactivated = function() {
       	// Stop timer.
       	clearInterval( this.timerId );
       }

5. Create a function to fetch data for the home screen widget:

       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;
       }

6. If an error occurs during data retrieval, display an error message:

       MiniView.prototype.onTwitterError = function( status ) {
       	var tweetsTable = document.getElementById( "mini_view_table" );
       	tweetsTable.innerHTML = "Error...";
       }