Page 1

The widgets shown in the preceding examples used JSON data. The JSON data can then be read into an HTML template using the syntax $widget.data.etc. Simple control structures like {section} and {if} can be used to loop through the data or conditionally display data based on user preferences.

However, many sources deliver data via XML. In this case, converting to the data to JSON and using the same template technology would be not beneficial, since a powerful language for manipulating XML already exists: XSLT.

MyTimes widgets that receive data in XML use XSLT templates.

Page 2

Let's step through the creation of a GMail widget. Here is a screenshot of sample data delivered from the GMail service:   Click on the image for page view.

Page 3

Here's the same data with first entry open to display:   Click on the image for page view.

Page 4

Here's the way we want the data to display in our widget. We want:

• Gmail for username
• Inbox(count)
• List of entries

  Click on the image for page view.

Page 5

We'll start building the XSLT stylesheet for this by creating a template element to match each of these.

Here's the XSL:template element for the title.

  Click on the image for page view.

Page 6

The subtitle:   Click on the image for page view.

Page 7

Next we'll work on creating a template element for an entry.

To display the entry element, we want to show 3 items:

1. author and time information
2. entry title
3. entry summary

  Click on the image for page view.

Page 8

Here's the top level of the template element for atom:entry:

  Click on the image for page view.

Page 9

The chunk for the author and time information is as shown in the screenshot. Note that we can use the same $widget.method syntax as with the HTML templates.

In the MyTimes framework, the output of the XSLT processor is run through the HTML template processor.

  Click on the image for page view.

Page 10

The chunk for the entry title is simple:   Click on the image for page view.

Page 11

The XSLT has access to not just the XML from the source, but also all of the properties and preferences of the widget. By specifying a prompt for displayPrefs in the prop.js file, we can then use that property to conditionally display the summary.   Click on the image for page view.

Page 12

All that is necessary to finish our XSLT template is to create a root template that will cause the individual element templates to be picked up by the XSLT processor.

Note the format for accessing the data returned by the widget source, e.g.:

<xsl:apply-templates select="widget/data/atom:feed/atom:title"/>

User preferences can be accessed via:

widget/prefs

  Click on the image for page view.

Page 13

The only other thing necessary to finish our GMail widget is to create a prop.js file. No code file is necessary.

A portion of the prop.js file is shown. As with the weather widget, we specify a name, a source, and a few prompts (for example, for the user password).

  Click on the image for page view.