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. For recommendations on what type of data to display in the home screen, see Home screen widget content.

Following is a simplified illustration of how the STEW example widget defines two views using <div>s, JavaScript, and CSS.

Figure: One widget, two views (<divs>, JS, and CSS)

To initialize 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 (as illustrated in the above figure):

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

  • Create separate CSS files for the full screen and home screen views.

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