Creating content specific to home screen widgets

Home screen widget content should be a subset of the most important data from the full screen widget.

Figure: Widgets on the home screen

Creating the content

Remember the following recommendations when creating content that is specific to a widget displayed in the home screen:

The home screen view is a graphical representation of the WRT widget, and therefore users cannot interact with it.
Remove all HTML and JavaScript that involves user interaction. For example, interaction with the options list, HTML form elements, data selection (such as JavaScript Service API functions), and refresh buttons.
Also remove content that includes video, animations, and so on.

You may also want to implement timers for operations that are specific to the widget on the home screen, such as network operations, parsing, and refreshing data.
Data updates may not be consistent due to network access being suspended during a phone call, low battery, and so on.
Display the time of last update to assist the mobile device user in determining if the data is current.
The home screen view of the widget uses only a small percentage of the display.
Limit the amount of data displayed. Placing too much content in the home screen view results in a less than optimal widget.
The size of the home screen view may vary depending on the state of the device, such as screen orientation (portrait/landscape), the number of widgets on the home screen, and so on.
Define content so that it scales according to the environment. For example, use relative values such as a percentage of the window width and height for defining styles and relative values such as font-size: large for defining font sizes.

Initializing the views

Implement code that determines whether to display the widget in either home screen view or full screen view. For more information, see Determining whether to display home screen or full screen. You can initialize the views any way you choose, but we recommend the following approach:

Create separate divisions (<div>) for the full screen and home screen content in the HTML file containing your content.
Create separate JavaScript files for the full screen and home screen views.

For an example, see Enabling STEW for the home screen.