GWT, Gadgets and OpenSocial, Part 2

Dietrich Kappe, Monday, November 17, 2008 @ 6:15 pm

Note: It is assumed that you know your way around GWT and Eclipse for purposes of this tutorial.

While developing OpenSocial applications can be a bit tricky, getting set up to develop can be a real pain in the neck. For this installment of OpenSocial and GWT, I'm going to go through the basics of setting up a simple Hello World gadget with iGoogle. We'll get into the details of signing up for other OpenSocial containers, testing, and so on, later. Right now we're just going to do the basics.

So, what do you need to build a Google Gadget with GWT for iGoogle? You need the following:

1. The Google Web Toolkit
2. The GWT Google Gadget API
3. An account on iGoogle
4. Access to the iGoogle sandbox
5. Some public server space so you can serve up your gadget to iGoogle

Pretty much everything else is self explanatory, but the sandbox can be a little bit confusing. Let's talk a little bit about the iGoogle sandbox. It's an experimental space where you can test things out without polluting your regular iGoogle account. Eventually you'll want several accounts in order to test. But every journey starts with a single step.

First, you need to sign up for iGoogle. I'll assume this isn't your first rodeo and you've done this before. Once you've got your iGoogle access, you'll want to go over to this page to sign up for the developer sandbox and add the developer tools to your space.

When developing, make sure that there's a message towards the top left of the page that says "Welcome to the iGoogle Developer sandbox." If you don't see that message, you're not in the sandbox. If you have to, navigate to http://www.google.com/ig/sandbox. You may have to "sign up" again to drop into the sandbox.

Once there, you can add those developer tools. Just clicking this link will get you started.

The developer widgets are:

• My Gadgets: let's you set inlining and caching on the Gadgets on your page from a handy interface
• Sandbox Profile Editor: let's you modify your profile in the sandbox so you can test a few things out.
• Sadbox Friends: lets you view and edit who your friends are. Important for OpenSocial applications.
• Updates:shows activities posted to your friends while interacting with the gadget.

The Hello World Gadget

In this part we're not doing anything OpenSocial related. We're just setting up a Google Gadget. That's a necessary first step for the OpenSocial stuff.

Let's get started. In my example I'll be working in ~/src/HelloGadget. Create a lib directory and put the gwt-gadgets.jar library file from the GWT Gadgets API project in it. Next, we run the GWT projectCreator to create our ant and Eclipse files:

./projectCreator -ant HelloGadget -eclipse HelloGadget -out ~/src/HelloGadget/ -addToClassPath ~/src/HelloGadget/lib/gwt-gadgets.jar
Created directory /Users/dkappe/src/HelloGadget/src
Created directory /Users/dkappe/src/HelloGadget/test
Created file /Users/dkappe/src/HelloGadget/HelloGadget.ant.xml
Created file /Users/dkappe/src/HelloGadget/.project
Created file /Users/dkappe/src/HelloGadget/.classpath

Now we create a simple sample application using the applicationCreator tool:

./applicationCreator -eclipse HelloGadget -out ~/src/HelloGadget/ -addToClassPath ~/src/HelloGadget/lib/gwt-gadgets.jar com.pathf.demo.app.gwt.client.HelloGadget
Created directory /Users/dkappe/src/HelloGadget/src/com/pathf/demo/app/gwt
Created directory /Users/dkappe/src/HelloGadget/src/com/pathf/demo/app/gwt/client
Created directory /Users/dkappe/src/HelloGadget/src/com/pathf/demo/app/gwt/public
Created file /Users/dkappe/src/HelloGadget/src/com/pathf/demo/app/gwt/HelloGadget.gwt.xml
Created file /Users/dkappe/src/HelloGadget/src/com/pathf/demo/app/gwt/public/HelloGadget.html
Created file /Users/dkappe/src/HelloGadget/src/com/pathf/demo/app/gwt/public/HelloGadget.css
Created file /Users/dkappe/src/HelloGadget/src/com/pathf/demo/app/gwt/client/HelloGadget.java
Created file /Users/dkappe/src/HelloGadget/HelloGadget.launch
Created file /Users/dkappe/src/HelloGadget/HelloGadget-shell
Created file /Users/dkappe/src/HelloGadget/HelloGadget-compile

You now have a nice little application that you can run using the hosted mode script HelloGadget-shell in the src/HelloGadget directory. Congratulations, you have a sample GWT application.

But we want a Google Gadget. In order to make it a gadget, we have to change the code a bit. First, import the project into Eclipse. Then open the HelloGadget.gwt.xml and add the following inherit statement.

<!-- Other module inherits                                      -->
	  <!-- Inherit Google Gadgets API -->

Now let's open up the HelloGadget.java file. We're going to change it around a bit so it can be a gadget. The critical part of the original looks like this.

public class HelloGadget implements EntryPoint {
 
  /**
   * This is the entry point method.
   */
  public void onModuleLoad() {

We change our class to extend Gadget and change the onModuleLoad method to init.

@ModulePrefs(title = "HelloGadget", author = "Dietrich Kappe", author_email = "dkappe@gmail.com", height = 300, description = "A simple gadget.")
public class HelloGadget extends Gadget {
 
	/**
	 * This is the entry point method.
	 */
	@Override
	protected void init(UserPreferences preferences) {

You have to also import the following three classes:

import com.google.gwt.gadgets.client.Gadget;
import com.google.gwt.gadgets.client.UserPreferences;
import com.google.gwt.gadgets.client.Gadget.ModulePrefs;

Running the Darned Thing

Done! Well, not quite. While changing the EntryPoint to a Gadget was pretty straightforward, we now need a container to run the thing. Mind you, it will still run in it's current form in hosted mode, but all of those things it's expecting from iGoogle are not going to happen. So it's time to inject it into iGoogle.

Go ahead and compile the code using the shell command HelloGadget-compile. The resulting compiled JavaScript and sundries is under the www directory in your projects home. If you take a look, you'll see a new file that you likely haven't seen before, namely com.pathf.demo.app.gwt.client.HelloGadget.gadget.xml. This is the gadget manifest. Essentially, this is what your gadget container needs to load to display the app. Many of the parameters are set by the parameters to the @ModulePrefs annotation.

Bundle this app up and upload it to your publicly available server. In my case, I've uploaded the app here. This is the link to the XML file. You can now go to the sandbox and, using the My Gadgets gadget, add it to your sandbox.

You can tweak some of the settings having to do with caching of he Gadget resources with the MyGadgets gadgets, but more on that later. Next time we'll set up our simple Gadget in various other containers and perform something a little bit more useful with it (but only a little).

As always, comments and questions are welcome.

agile ajax

Comments: 4 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Note that the dialog box might not look right if you follow this example. This is because the styling of the default application doesn’t work right in a gadget environment. The sample application “HelloGadgets” distributed with gwt-gadgets includes a pared down stylesheet.

   Comment by Eric Ayers, Tuesday, November 18, 2008 @ 9:09 pm

2. 

   @Eric

   You’re stealing my thunder for part 3.

   Comment by Dietrich Kappe, Wednesday, November 19, 2008 @ 1:13 am

3. 

   Great tutorial, Dietrich. I’ve tried several times but I cannot get the compile script to create the gadget manifest. As a matter of fact, when I compare my www folder contents against yours, my compile script still generates the nocache.js file where your folder contents do not.

   Where am I going wrong?

   Comment by Bill Girten, Saturday, November 29, 2008 @ 7:24 pm

4. 

   Uh, never mind, Dietrich. I found out where I went wrong. I compiled from ~/src/HelloGadget instead of the eclipse workspace folders post-import.

   Again, thanks for the great tutorial!

   Comment by Bill Girten, Saturday, November 29, 2008 @ 8:31 pm

Leave a comment