ShowTable of Contents
Previous |
Next
Google gadget overview
Google gadgets are small, lightweight applications very similar to the iWidgets found in IBM Connections. Gadgets consist of XML, HTML, and Javascript resources. Google publishes a public directory of gadgets at the following site:
http://www.google.com/ig/directory/
. To make gadgets available outside of the Google site, Google provides a web service to return the necessary HTML and Java script to display the gadget. By wrapping the output of this web service in a iWidget descriptor, gadgets can be used on the IBM Connections Home page. Note that some gadgets are not available as web services and some gadgets display on only sites in the Google domain.
Selecting a gadget
The first step in adding a Google gadget to the IBM Connections Home page is to generate the code that will be using in the iWidget wrapper. Using the Page Creator Tool from Google is the best way to create the necessary code. The steps are as follows:
1. Open the Google Gadget library from the following link:
http://www.google.com/ig/directory?synd=open
2. Find the desired gadget, then click the Add to your webpage button.
3. Configure the display settings including the Title, Width, Height, and Border.
4. Click the Get the Code button. The code is displayed below the button.
5. Copy the src attribute of the script tag. This URL is to be used in the iWidget wrapper.
The following is a sample URL for the Business Quote of the Day gadget:
Create the iWidget wrapper
To create the iWidget wrapper for the gadget, we wrap the gadget using an iWidget template and some server-side code. Because the Google gadget might contain some JavaScript that conflicts with other widgets on the Home page, an HTML iframe is used to isolate the gadget in the iWidget descriptor. The server-side code creates the HTML page to be hosted in the iframe. This HTML page contains the code necessary to call and render the Google gadget.
This example uses Java for the server-side code, but other languages can be used as well.
The following sample template is used as the iWidget descriptor:
<iw:iwidget name="gadget"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget">
<iw:content mode="view">
<![CDATA[
<iframe scrolling="auto" width="100%" height="300px" frameborder="0"
src="<gadget wrapper url>">
</iframe>
]]>
</iw:content>
</iw:iwidget>
The following code is used to create the HTML page for the iframe:
<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head></head>
<body>
<%
StringBuffer url = new StringBuffer();
url.append("http://www.gmodules.com/ig/ifr?");
url.append(request.getQueryString());
%>
<script src="<%= url.toString() %>"></script>
</body>
</html>
The following is the resulting iWidget descriptor file after inserting the Quote of the Day gadget URL:
<iw:iwidget name="googleQuote"
xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget">
<iw:content mode="view">
<![CDATA[
<iframe scrolling="auto" width="100%" height="300px" frameborder="0"
src="/gadgetWrapper/gadgetWrapper.jsp?url=http://googlegadgetworld.com/GreatQuotes/BusinessQuotes/
businessmoney.xml&synd=open&w=320&h=210&title=Business+Quote+of+the+Day">
</iframe>
]]>
</iw:content>
</iw:iwidget>
Deploy the iWidget
Now that the Google gadget is wrapped in an iWidget descriptor, the gadget can be deployed on an application server. Use the application URL when adding to the IBM Connections Home page. For more information about adding the new widget to the Home page, please see
3.3 Adding and removing widgets in the IBM Connections Home page.
Related Links
The following links provide more information about using Google Gadgets with IBM Connections:
Implementing and deploying Google Gadgets for the Lotus Connections Home page
Customizing IBM Lotus Connections 2.5 with Lotus Widget Factory and Google gadgets
Parent topic:
3.0 Customizing the Home page