Mihoko asks a question about creating a custom Google Gadget for a mashup using the WSO2 Mashup Server, and displaying it in the Dashboard:
I have a question about Dashboard feature. Is it possible to display images on my own Dashboard as the Try-it Gadget? … For example, about digit2image Mashup, this gadget is able to get the URL information stored image, but not able to display the image. Is it possible to display the image on my own Dashboard?
I thought this would be a good opportunity to explain some of the widget/gadget features now available in the WSO2 Mashup Server and walk though building a super-simple Google Gadget.
What is a gadget or widget?
A widget or gadget is a little program, usually with a cute and compact UI, that runs inside a widget engine. The widget engine generally has the characteristic that a number of widgets can be viewed at once, allowing a user to construct their own digital dashboard of relevant information sources. There are a number of widget technologies under various names – gadgets, widgets, portlets. Some examples of widget engine include the Google Desktop, iGoogle, Windows Vista Sidebar, Windows Live widgets, Yahoo! Widgets, Apple’s Macintosh Dashboard, and lots more.
Most widgets or gadgets today seem to be simple user interfaces for online services – tracking weather, the stock market, movie times, quotes-of-the-day, etc. We heard from a number of users that the WSO2 Mashup Server was a powerful tool for building the on-line part of these applications, and in the 1.5 release we added features to make it easier to create, test, and even host widgets.
WSO2 Mashup Server widget support
Of course we had to start small, so we focused on one widget engine, Google Gadgets, which can be
used in the Google Desktop or iGoogle, and provided some great features:
- A Google Gadget version of the try-it for a mashup
- A source code template for building a custom Google Gadget for a mashup
- A link to the custom Google Gadget for a mashup
- Support in the Javascript stubs for cross-domain access to a mashup
- A customizable Dashboard for each user, which can host Google Gadgets from the Mashup Server or from other places.
Tyrell wrote a fairly definitive guide to these gadget features in Converting your WSO2 Mashup Server to a Personalize Dashboard, which I recommend. I’ll give a brief and rather simplistic summary here for those of us with short attention spans!
Adding a Google Gadget to the Dashboard
You can find your customized dashboard for a local installation of the Mashup Server at https://localhost:7443/dashboard/ or you can get a free account (just supply a valid email address) at http://mooshup.com and access your customizable dashboard at http://mooshup.com/dashboard. There are a few default 3rd party gadgets installed by default, but you can close any you dislike and replace them with your own. Just select “Add Gadgets” and either type in the url of the gadget (available from the gadget publisher), or select one of the local mashups for a “try-it” gadget for that service.
Note that not all services can fit into the limited size of the gadgets yet – try out the “version” gadget for one that fits pretty well. We have some work to do to enable gadgets to be resized, and to try to squeeze more into the limited size available for mashups with (e.g.) too much documentation (as if there were such a thing!)
For a mashup with a custom gadget, you can find the url of the gadget on the main page for that mashup. For instance, the built-in upgradeChecker service has a custom gadget which you can add to your dashboard by pasting the link http://localhost:7762/services/system/upgradeChecker/gadget.xml into the “Add Gadgets” page.
Creating a custom Google Gadget
Let’s create a sample custom gadget to show how easy it is to provide the cute and customized UI that is the hallmark of successful gadgets. You could take the gadget try-it code generated by the Mashup Server, save it as {mashupname}.resources/www/gadget.xml, and start to modify it, but it is usually easier to start from a smaller template.
I’m going to show you how to make a simple gadget for the built-in digit2image service, which when given a digit and a size, returns a URL to an appropriately licensed Flickr image of that digit.
Go to the mashup page https://localhost:7443/mashup.jsp?author=system&mashup=digit2image (if you’re logged on as an administrator, otherwise you’ll have to copy the digit2image mashup to your own user space and adjust the above url accordingly.) You’ll notice a “Source code template for building a Google Gadget for this service" link. You can download the template and edit it with a text editor, saving it as digit2image.resources/www/gadget.xml. But today I’ll demonstrate the built-in editor instead.
So, click on the “Edit this Mashup” link in the task pane, and select the tab for “Gadget UI code.” The editor will indicate that there isn’t a custom gadget yet, but by clicking the “Generate Template” button farther down the page, we can get the basic gadget definition written for us automatically.
The template even creates source code examples for an asynchronous invocation of each operation, so it’s easy to just tweak the code a bit and do new things: (some comments removed)
// Demonstrates calling an operation of the 'digit2image' Mashup function
init() {
// Set up a callback and an error handler for the digit2image operation.
digit2image.digit2image.callback = showPayload;
digit2image.digit2image.onError = handleError;
digit2image.digit2image(/* (string) digit */ "0", /* (string) size */ "small");
}
// Sample invocations (unused) for other operations.
function samples() {
}
// Handles and error by displaying the reason in a dialog
function showPayload(payload) {
log ("result-console", payload);
}
This automatically generated sample code asynchronously invokes the first operation in the service with some sample values, and includes a “samples” function to show how other operations can be invoked. The results are serialized into the “result-console” part of the gadget page. While some services won’t work out of the box because of additional constraints on the inputs of an operation (e.g. another operation must be invoked first, that although a parameter has a declared type such as string there are other constraints like that is must be a valid username, and so forth.) The first thing we usually do is clean up the operations we don’t want, order the ones we do, and provide meaningful input values.
In this case, let’s use the values “9” and “thumbnail”, and display the resulting url as an image tag. Replace the above code (all three functions), with this:
// Display an image for the digit "9"
function init() {
digit2image.digit2image.callback = function (payload) {
var output = document.getElementById("display");
output.innerHTML = "<img src=" + payload + ">'";
};
digit2image.digit2image.onError = handleError;
digit2image.digit2image("9", "thumbnail");
}
And let’s simplify the body of the mashup to just the image display and a place for errors to be displayed:
<div id="body">
<div id="display">
<!-- This div will contain the resulting image -->
</div>
<div id="error-console">
<!-- This div will contain a description of any errors encountered. -->
</div>
</div>
When you save the gadget and return to the mashup page, you will see a new link "View the custom Google Gadget for this service." Copy this link and use the “Add Gadget” link on the Dashboard as I described earlier, and you will see the simple custom gadget as something like this:
There are naturally many improvements that need to be made to the Dashboard, and to our ability to power gadgets, widgets and portlets. But I hope you find our experimental support intriguing and give us some feedback on the Mashup Server User Forum, just as Mihoko did!
Posts (RSS)