This tutorial guides you in creating, deploying and using a gadget in the WSO2 Gadget Server. Whether you are a developer or a business user, this guide will help you to write a simple gadget and get it up and running in no time. This tutorial outlines three key points as follow:
- Explains the fundamentals in gadget authoring via a simple HelloWorld gadget.
- Explains more advanced features such as the usage of API via a gadget with the use of the Google Gadget API.
- Explains a gadget's extensibility factor via a simple URL gadget (a hint on limitless possibilities).
WSO2 Gadget Server's Role
WSO2 Gadget Server adheres to the Google Gadget Specification and supports the hosting and management of gadgets developed using this standard. This means that the gadgets written for Google gadget containers (and many other containers such as Hi5, Orkut, etc.) can be added to the WSO2 Gadget Server portal and vise versa.
WSO2 Gadget Server is a container built using open standards. Based on Apache Shindig (http://shindig.apache.org/), an Open Source implementation of the Google Gadget Specification, the Gadget Server provides a comprehensive portal solution where users can write, deploy and use enterprise or open-social gadgets with ease.
The HelloWorld Gadget
The hello world gadget is the simplest of its kind and contains only XML and HTML.
- The first line is the XML file declaration where it indicates that this files contains XML data.
- The <Module> tag declares that this is a Gadget XML. This tag is declared in the gadget specification, so that the container will then know that the processing XML is a gadget.
- <ModulePrefs /> contains metadata about the gadget (i.e : Title, Author name, etc). It can also have static rendering parameters for the gadget such as gadget height, width and scrollability.
The following screen shows how the HelloWorld gadget is rendered in the WSO2 Gadget Server.
Feed Reader Gadget (Use of the Google Gadgets API)
Blogs, magazines and newspapers allow their feeds to be read by third party software tools and they expose the content in RSS and Atom formats. With the use of the Google Gadgets API, we can write a simple feed reader gadget to retrieve these feeds and display inside your enterprise or personal portal.
The gadget which is demonstrated below, demonstrates more advanced features of gadget composition and the use of the Google Gadgets API. The gadget's task is to read an RSS or Atom feed from any given URL and display it in a nicely styled format.
As the default feed, let's take the SOA-Platform Blog (http://soa-platform.blogspot.com/feeds/posts/default), and keep it as the default URL in gadget preferences.
<UserPrefs> is the mechanism to provide additional gadget specific preferences (Gadget Settings). These properties can be persisted and read from the gadget to do necessary processing. (i.e. Default feed URL for this sample gadget)
What should be noted in the code snippet is the use of gadget.* API methods. This is called the Gadgets API originally developed by Google. Google Gadgets API provides many functionalities such as reading content from a given URL (in many formants), skins, tabs inside gadgets, flash content etc. The full reference for the Google Gadgets API can be found in Gadget API Reference in this URL: http://code.google.com/apis/gadgets/docs/reference
In the above code var prefs = new gadgets.Prefs(); creates a preferences object and let us handle user preferences for this particular gadget.
gadgets.io.makeRequest(feedUrl, readFeed, params);
The makeRequest API method retrieves the feed via HTTP from the given URL, and by providing a callback method (readFeed(feed)) we can do further processing on the retrieved feed.
You can also provide a method to display the feed content on demand as follows,
A noteworthy point here is the use of dynamic height feature. The imported feature of the container <Require feature="dynamic-height"/> can be used by invoking gadgets.window.adjustHeight() to adjust the gadget height according to the dynamically created content. With these simple steps, you can author your own feed reader gadget quite easily.
Bellow is how it looks like when deployed in the WSO2 Gadget Server,
The URL Gadget (Pull content from a URL instead of embedding in the gadget XML)
In order to demonstrate that gadgets can be used to load external content directly, this example shows you how to display content from a URL. The Gadget XML logic is quite simple where instead of <Content type="html"> it should be <Content type="url" href="......"/> and point to the URL which will render the content you want to display inside the gadget. The ability to render external content comes handy, when the gadget author wants to implement the application with other programing languages and still display it as a gadget in a portal. A good example for a URL gadget is the Moon Phase gadget which is available in the iGoogle gadget repository. http://www.calculatorcat.com/gmodules/current_moon.xml.
The gadget XML code looks like follows,
For more resources on gadget authoring, refer to the following URLs as well:
For detailed information on how to deploy and manage these gadgets in the WSO2 Gadget Server, refer to the WSO2 Gadget Repository section.