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

Download the STEW home screen widget source files to your computer.
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.

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

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

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

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.

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

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

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

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

Implement STEW home screen widget functionality in the MiniView.js file.
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.
	}
```

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

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

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

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