Creating Google gadgets with GWT - tutorial part 1

Create a new GWT/AppEngine project






Modify SimpleGadget.gwt.xml file:


xml version="1.0" encoding="UTF-8"?>
DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='simplegadget'>


  <inherits name="com.google.gwt.user.User" />
  <inherits name="com.google.gwt.gadgets.Gadgets" />
  <inherits name="com.google.gwt.http.HTTP" /> 
  <stylesheet src="hello.css" /> 

  <entry-point class='com.taktico.simplegadget.client.SimpleGadget'/>
module>












Modify SimpleGadget.java


package com.taktico.simplegadget.client;

import com.google.gwt.gadgets.client.Gadget;
import com.google.gwt.gadgets.client.UserPreferences;
import com.google.gwt.gadgets.client.Gadget.ModulePrefs;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

@ModulePrefs(title = "SimpleGadget", author = "Uki D. Lucas", author_email = "UkiDLucas@mac.com")
public class SimpleGadget extends Gadget
{
    @Override
    protected void init(UserPreferences preferences)
    {
RootPanel.get().add(new Label("Hello World!"));
    }
}






Modify SimpleGadget.html


DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="SimpleGadget.css">
    <title>Web Application Starter Projecttitle>
    <script type="text/javascript" language="javascript" src="simplegadget/simplegadget.nocache.js">script>
  head>
  <body>
  body>
html>











Add gwt-gadgets.jar to your project









Compile the project









Post (deploy) the compiled directory on the Web (e.g. iDisk)





Open iGoogle -> Add Stuff -> Add feed or gadget -> paste your deployed gadget URL
http://homepage.mac.com/ukidlucas/google_gadgets/simplegadget/com.taktico.simplegadget.client.SimpleGadget.gadget.xml



Finished SimpleGadget in iGoogle



6 comments:

  1. Please leave a polite comment if you develop GWT gadgets!

    ReplyDelete
  2. hi how to get that gwt-gadget.jar from where do i get this jar file?

    ReplyDelete
  3. Hi Sanjeev, go to this download page:

    http://code.google.com/p/gwt-google-apis/wiki/Downloads?tm=2

    ReplyDelete
  4. Great tutorial. I can build and deploy my little test app. Only in iGoogle and shindig it seems the request method to the appengine server is OPTIONS and not POST. The result is an error ´com.google.gwt.user.client.rpc.StatusCodeException´

    The serverside code works fine when deployes as a ´normal´gwt application on appengine.

    It looks that the client side javascript for some reason decides it needs to do a request for OPTIONS.

    Request when hosted in iGoogle

    http://anachrongadget.appspot.com/anachrongadget/greet
    OPTIONS /anachrongadget/greet HTTP/1.1
    Host: anachrongadget.appspot.com

    Request when hosted (as normal app) on appengine

    http://anachrongadget.appspot.com/anachrongwt/greet
    POST /anachrongwt/greet HTTP/1.1
    Host: anachrongadget.appspot.com

    ReplyDelete
  5. For some reason I get:

    Compiling module com.taktico.simplegadget.SimpleGadget
    Computing all possible rebind results for 'com.taktico.simplegadget.client.SimpleGadget'
    Rebinding com.taktico.simplegadget.client.SimpleGadget
    Invoking com.google.gwt.dev.javac.StandardGeneratorContext@13fce4d
    [ERROR] Unable to find Gadget in type hierarchy


    Maybe it has to do with the fact I'm using GWT 2.0

    ReplyDelete
  6. What do you mean by deploying to the Web? I deployed my program using Google App Engine, how do I upload them to the Web?

    Thanks,
    Darshana

    ReplyDelete