In my last post I wrote about web widget formats: the ways we render widget content within another web site. Web widgets are dynamic, living, breathing pieces of content and often need new data from external services to stay fresh and topical. In this post I'll summarize popular methods of updating a widget's dynamic data using remote HTML framing, plain-text, JSON, XML, and web feeds. I will detail use cases of each format, provide example data to illustrate the data, and document the appropriate request and parsing libraries in major web widget platforms.
The simplest widget loads an existing web page as framed content. A widget developer simply needs to set the height and width of his gadget -- a portlet into the remote content in this case -- and specify the remote URL within the widget manifest.
The remote framing method is not the same as simply adding an iframe or a HTML object within your widget content. Widgets that specify a remote content URL within the manifest file receive extra parameters with each remote request such as user preferences for your widget and the location of JavaScript libraries on the parent platform. These extra assets help developers design web pages inside a fully-controlled environment with the parent platform's look and feel.
Remote frame content is a good way to add intranet content or other secure sources to a widget user's personalized homepage. All specified URLs are resolved from the user's browser and therefore can directly access content behind the firewall bound to the appropriate Active Directory, LDAP, or other local permission models. A project management application might add a remote framed gadget to allow its customers a quick view inside their upcoming tasks. Cookies and other stored session data passes through with the widget load, meaning your customers will not have to re-authenticate to your site's content.
Netvibes utilizes the remote framing method to syndicate its UWA widgets to third-party platforms. UWA widgets displayed in a Google Gadgets context request the full widget webpage from Netvibes' servers to render the Netvibes user interface and programmatic logic.
A day-care center might offer a view into the playroom for parents to check in on their children from the office. The playroom's streaming video camera is not available to the entire world for security reasons. The daycare center creates an account for each child, allowing a parent or other caregivers to submit payment online, view upcoming events, or check in on the live playroom webcam if they would like. The daycare center might also syndicate the webcam as a remotely framed Google Gadget for quick and easy access to any authenticated user's iGoogle. An interested parent can now glance inside the playroom as part of their personal dashboard.
- Google
- A
content type of url.
- Other
- Construct a HTML
object set to type text/html and load the appropriate data URL and standby text.
Text
Plain-text is the simplest data interchange format and useful for small or generic tasks. Each widget platform requests the remote resource in an asynchronous manner and returns a string object. You might use a text request to retrieve a small piece of data, HTML markup, or a comma-separated list of values for further processing.
Example
A small widget tracks the total outstanding public debt of the United States government. Your widget needs to retrieve the current debt number ($8,878,050,568,679) updated by the Treasury department once every 24 hours. You construct an asynchronous proxied request to a webpage outputting the current number in plain-text format and quickly serve the result inside your widget. The result is cached for 24 hours.
Appropriate libraries by platform
- Google
_IG_FetchContent- Netvibes
UWA.Data.getText- Adobe Flex
HTTPService with a text resultFormat.
The JavaScript Object Notation (JSON) data format is a lightweight way to structure and parse data in JavaScript or Flash. JSON is a subset of ECMAScript 262 edition 3 released in 1999 and corresponds to JavaScript 1.5. JSON is simply a set of JavaScript objects passed over-the-wire and evaluated by a remote system. JSON objects can be parsed much more quickly than the equivalent XML within a scripting environment. JSON can be loaded from the script element, bypassing the same-domain issues of Ajax and local proxies.
{'teamname':'Gunners',
'players':[
{'name':{'first':'Jane','last':'Doe'}, 'jersey':9, 'position':'striker'},
...
]}
The simplified example above defines information about a soccer team expressed in the JSON format. The team has multiple players with unique properties such as a name, jersey number, and position on the field.
- Windows Live
Web.Network.Type.Script with a generic proxy.- Netvibes
UWA.Data.getJson method. All data is scrubbed, evaluated, and ready for use.- Adobe Flex
HTTPService with a text resultFormat. Deserialize the result using corelib JSON decoder.- Other
- Request the remote JSON using an HTML
script element and eval. You might also pass data through a JSON parser if you don't control the source to prevent hostile code inclusions.
XML is a general-purpose data format describing structured data. An XML file combines elements, attributes, and text to completely describe a requested resource. Web widget platforms expose a local XML proxy for asynchronous retrieval (Ajax) and caching. Proxied XML results are typically returned as a scriptable DOM object for easy transformations inside developer scripts.
Many publishers already output XML data for interoperability, backup, or for data portability. A site might output KML files for Google Earth, PowerPoint files in Office Open XML, or the latest tracks played on an Internet radio station. XML data transports provide access to a common set of site data prepared for a variety of possible endpoints.
<?xml version="1.0" encoding="UTF-8" ?>
<todo user="niall" xml:lang="en">
<task>
<name>Tie shoelaces</name>
<priority scale="5">1</priority>
<duedate>2007-07-15</duedate>
<task>
...
</todo>
In the example above I describe a hypothetical to-do list expressed as XML. The to-do list belongs to user "niall" and has one displayed task, "Tie shoelaces," that needs to be accomplished by the end of the day. This data might already be exposed by a task management website as a lightweight API and we want to show the user's latest tasks within a personalized homepage environment.
- Netvibes
UWA.Data.getXml- Google
_IG_FetchXmlContent- Adboe Flex
HTTPService with a xml resultFormat.- Windows Live
Web.Network.Type.XML with a generic proxy.
Web feeds are a specialized form of XML utilizing Atom Syndication Format 1.0 and RSS 2.0.1 vocabularies. Web feeds are popular ways of syndicating content such as blogs, podcasts, or other lists of incremental content changes over time. All web widget platforms include one or more built-in web feed modules for direct transformation of data described in this format. Widget developers can take advantage of existing web feeds output by services across the web to consume and display regularly updated content inside a web widget context. Unlike some built-in feed modules, custom widgets can escape the personalized homepage and integrate with full syndicated widget experiences on social networks, blog sidebars, or any other website.
Web feeds expand upon a widget platform's support for XML content with specialized data handlers and validators and additional scripting libraries. A web widget platform may already have content from your web feed stored in its database, allowing archive retrieval and pagination beyond the current contents of your feed. Web widget platforms normalize data interfaces across multiple feed types and namespaces, delivering a single match for a single form of expressed content regardless of the data construction method.
This weblog outputs a web feed in the Atom Syndication Format. The feed contains the last 10 entries posted to my weblog described with markup elements such as the title of the entry, an entry summary, full content, a link to full entry page on my website, categories, and timestamps specifying the time this entry was originally published and the last significant update.
- ActionScript 3.0
- Adobe Labs ActionScript 3.0 library
- Google
_IG_FetchFeedAsJSON- Netvibes
UWA.Data.getFeed- Windows Live
Web.Network.Type.XML with a rss proxy.
Well-written widgets separate static content, styling, and processing scripts for easy caching and optimal performance. In this post I've outlined the major methods of dynamic content delivery across web widget platforms. Widget publishers hsould choose the data format that best suits their needs based on target platform support, existing data outputs, caching considerations, and user-facing performance. There are no magic bullets for web content delivery and rendering, but now you know your options to develop the best possible widget content.
