I just put up a new GWT demo inspired by Jonathan Coulton’s appearance on the TWiT 133 podcast last week. I was going to write something up on how to use the gwt-voices library, but it is actually so simple to use, that there is really nothing new for me to explain. The only thing that was missing which I wanted to add, was a way to pause the songs. Currently the only options right now are play and stop.

The widgets I used are from the GWT-Ext widget library. Sanjiv has really done a nice job with the new 2.0 release.

Update: Thanks to Sanjiv for helping me fix the issue I had with IE.

This tutorial is meant to show you how to write an application that uses history. The Managing History and Hyperlinks tutorial gives you the background information you need, and shows you how to “think” about History when building your GWT app. This tutorial takes the next step and shows you a sample application that uses history to load an RSS feed. There are other ways to pass parameters to GWT apps that don’t involve using the History mechanism. However, the application in this tutorial will take this approach.

There are a bunch of useful techniques in this article, so check it out.

Normally, when developing your GWT applications in hosted mode, the internal tomcat server will be used to serve up your application. However, if want to talk to a server-side php script running on your own local web server, you will soon run into issues with the Single Origin Policy, since hosted mode runs on one port and the php script is running on another. In this tutorial, I will show you how I got around by running my GWT application and the php script on the same local web server. To demonstrate this, I will use the GWT FileUpload widget with a php backend.

Getting started

This tutorial assumes you already have a local web server running that can handle php. I am personally using Apache via MAMP on OS X. XAMPP is also another easy to setup alternative for Windows.

To start, I created a project called FileUploader and imported it into my IDE (Eclipse). The code for the FileUploader module is directly taken from the example code in the FileUpload widget javadoc.

The only modification I made was to the setAction method of the FormPanel object.

(com.gwtsite.client.FileUploader.java)

final FormPanel form = new FormPanel();
form.setAction(GWT.getModuleBaseURL() + "upload.php");

Now when the user hits submit on the form, it will call the php script called upload.php to handle the file upload.

Using -noserver

To tell hosted mode not to use the internal tomcat server, we will pass the -noserver argument to the GWTShell. But first we have to perform the following steps:

First, notice that the url of my application is: http://localhost/com.gwtsite.FileUploader/Fileuploader.html

So I created a folder called com.gwtsite.FileUploader in my web server’s web documents folder. Next, I compiled my application and copied the following files to this new folder:

• FileUploader.html
• gwt.js
• hosted.html
• history.html
• com.gwtsite.FileUploader.nocache.js

Then for the program arguments, i set the -noserver parameter and since my web server is running on port 80 I also set the -port parameter to 80.

Finishing up

The upload.php script for handling the upload was taken from the online php manual. I placed it in the same com.gwtsite.FileUploader folder on my web server. All it does is move the uploaded file from the temp location to the specified directory. Notice that uploadFormElement matches the name set on the GWT FileUpload widget.

(upload.php)

<?php
$uploaddir = './';
$uploadfile = $uploaddir . basename($_FILES['uploadFormElement']['name']);
echo '<pre>';
if (move_uploaded_file($_FILES['uploadFormElement']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.\n";
} else {
    echo "Possible file upload attack!\n";
}
...
?>

Once this is all wired up, I can now start up hosted mode from within my IDE and successfully upload files from within my GWT application.

References

• How do I use my own server in hosted mode instead of GWT’s built-in Tomcat instance?
• What is the Single Origin Policy, and how does it affect GWT?
• Handling File Uploads

Today, we are going to take a look at adding drag-and-drop to our GWT applications. I’ve seen quite a few solutions for adding drag-and-drop, including a few tutorials that show how roll your own solution. But why reinvent the wheel when there is a perfectly good drag and drop library like gwt-dnd? This library by Fred Sauer provides a whole host of cool features. I took some time to play with it this past week and I will show you how to get started using the library by creating a simple shopping cart example.

To install, download the latest gwt-dnd jar file, add it to your build path and add the following line to your GWT application module file.

<inherits name='com.allen_sauer.gwt.dnd.gwt-dnd'/>

In this demo, we’re going to allow users to drop books into a shopping cart. You can take a sneak peak of what I’m going to build here. The first domain object I will create is the Book class.

(com.gwtsite.dnd.client.Book)

public class Book extends Composite implements SourcesMouseEvents {
  private String title;
  private String imgUrl;
  private BigDecimal price;
  private Image bookImage;
  private VerticalPanel mainPanel;
 
  public Book(String title, BigDecimal price, String imgUrl)  {
    this.title = title;
    this.price = price;
    this.imgUrl = imgUrl;
    this.mainPanel = new VerticalPanel();
    initWidget(mainPanel);
 
    bookImage = new Image(imgUrl);
    mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    mainPanel.add(bookImage);
    mainPanel.add(new Label(title));
    mainPanel.add(new Label("$"+price));
    mainPanel.addStyleName("book");
 
    public void addMouseListener(MouseListener listener) {
      bookImage.addMouseListener(listener);
   }
   ...
  }

Book is a GWT composite widget that will display the book’s title, image, and price. Notice that it implements the SourcesMouseEvents interface. This is required to make the book draggable. In my implementation, I attach a MouseListener to the image field because the GWT Image widget already implements this interface and it will allow users to use the image as a drag handle to move the book around.

Dragging is handled by implementing the DragController interface. In this demo I am extending PickupDragController, which allows me to move the books around a specified boundary panel. By default, the dragged widget will disappear when dropped on the drop target. I don’t want this behavior so I’ll use a drag proxy instead. This means I can drag a copy of the book’s image and leave the original book widget alone. To achieve this, I set setBehaviorDragProxy() to true and override PickupDragController’s newDragProxy() method.

(com.gwtsite.dnd.client.ShoppingCartDemo)

PickupDragController dragController = new PickupDragController(containingPanel, false) {
  protected Widget newDragProxy(DragContext context) {
    AbsolutePanel container = new AbsolutePanel();
    DOM.setStyleAttribute(container.getElement(), "overflow", "visible");
    for (Iterator iterator = context.selectedWidgets.iterator(); iterator.hasNext();) {
      Widget widget = (Widget) iterator.next();
      Book book = (Book)widget;
      container.add(new Image(book.getImageUrl()));
    }
    return container;
  }
};

Then I make Book widgets draggable by calling makeDraggable on the drag controller. Here, we pass to the method the book object (the draggable widget) and its image (the drag handle).

(com.gwtsite.dnd.client.ShoppingCartDemo)

FlowPanel flowPanel = new FlowPanel();
flowPanel.addStyleName("flowPanel");
for (int i = 0; i < books.length; i++) {
  Book book = books[i];
  dragController.makeDraggable(book, book.getImage());
  flowPanel.add(book);
}

For the drop part of the demo, I created a ShoppingCart object which serves as the drop target. Dropping is handled by a DropController object. The library comes with several implementations, and I chose to extend the SimpleDropController class.

(com.gwtsite.dnd.client.CartDropController)

public class CartDropController extends SimpleDropController {
  private ShoppingCart cart;
 
  public CartDropController(Widget dropTarget) {
    super(dropTarget);
    cart = (ShoppingCart)dropTarget;
  }
  public void onDrop(DragContext context) {
    super.onDrop(context);
    Book book = (Book)context.draggable;
    cart.add(book);
  }
  public void onEnter(DragContext context) {
    super.onEnter(context);
    cart.addStyleName("enterCart");
  }
  public void onLeave(DragContext context) {
    super.onLeave(context);
    cart.removeStyleName("enterCart");
  }

This controller accepts a GWT widget (the drop target) in its constructor and I had to implement the behavior for the following events: onDrop, onEnter, onLeave, and onPreviewDrop. The implementations of onEnter, and onLeave are simple. Here, I just add and remove a css class which can be used to give a visual indicator when the the book gets dragged over the cart. The onDrop method is used to add the dragged book object to the shopping cart and updating its display. I don’t use onPreviewDrop here, but it can be used to cancel a drop if some requirement isn’t met by throwing a VetoDragException.

Finally, to tie it all together, we need to register the drag controller with the drop controller like so:

(com.gwtsite.dnd.client.ShoppingCartDemo)

ShoppingCart cart = new ShoppingCart();
CartDropController dropController = new CartDropController(cart);
dragController.registerDropController(dropController);

This is the demo in action. Hopefully this will get you started with using the gwt-dnd library. The gwt-dnd project page has several demos to show what the library is capable of. I’ve only just touched the surface of what can be done, and there’s a lot of functionality out of the box that you can play with. So take a look around!

There are a lot of new and interesting web services popping up on the web these days, and you may want to make use them in your GWT applications. In this short guide, I will show you how to call these public apis from within your GWT app.

The main difficulty when trying to talk to some web service on another server is getting past your web browser’s Same-Origin Policy. This basically says that you may only make calls to the same domain as the page you are on. This is good for security reasons, but inconvenient for you as a developer as it eliminates the use of GWT’s HTTP library functions to achieve what we want to do. One way to get around this is to call a web service through a javascript tag which bypasses this problem. In his book, Google Web Toolkit Applications, Ryan Dewsbury actually explains this technique in more detail and provides a class called JSONRequest which handles all the hard work for us. JSON is one of the more popular data formats, so most web services support it. Lets leverage Ryan’s code and take a quick look at how it works.

public class JSONRequest {
  public static void get(String url, JSONRequestHandler handler) {
    String callbackName = "JSONCallback"+handler.hashCode();
    get( url+callbackName, callbackName, handler );
  }	
  public static void get(String url, String callbackName, JSONRequestHandler handler ) {
    createCallbackFunction( handler, callbackName );
    addScript(url);
  }
  public static native void addScript(String url) /*-{
    var scr = document.createElement("script");
    scr.setAttribute("language", "JavaScript");
    scr.setAttribute("src", url);
    document.getElementsByTagName("body")[0].appendChild(scr);
  }-*/;
  private native static void createCallbackFunction( JSONRequestHandler obj, String callbackName)/*-{
    tmpcallback = function(j) {
      obj.@com.gwtsite.client.util.JSONRequestHandler::onRequestComplete(Lcom/google/gwt/core/client/JavaScriptObject;)(j);
    };
    eval( "window." + callbackName + "=tmpcallback" );
  }-*/;
}

To make our request we call the get method with the web service url, and an implementation of the JSONRequestHandler interface. This interface has one method called onRequestComplete(String json). This is where you’ll handle the JSON formatted data once it comes back from the server. When calling a service from within a script tag, we need to specify the name of a callback function in the request. Most services let you specify the name yourself, so the first get method generates a callback name for you. The createCallback method is a JSNI method that simply calls your JSONRequestHandler implementation when the call returns via the callback name. Note, if you use this class, to make sure and change the package name for the JSONRequestHandler call to the correct location. Finally, the get method will call the addScript function which is responsible for embedding the <script> tag on your page and setting its src attribute to the web service url.

Now that I’ve described the technique to make the calls, you’ll need to find some APIs to use it with. When looking at an API specification, make sure it has a parameter to return results in JSON format, and that it supports a callback parameter. Here are some example web service APIs to start with.

Youtube GData API – Get a list of my uploaded videos.

JSONRequest.get(
  "http://gdata.youtube.com/feeds/api/users/bogleg/uploads?alt=json-in-script&callback=", 
  new JSONRequestHandler() { ... });

Google Social Graph API – Get the social graph of bradfitz.com.

JSONRequest.get(
  "http://socialgraph.apis.google.com/lookup?&q=bradfitz.com&pretty=1&fme=true&callback=", 
  new JSONRequestHandler() { ... });

Digg API – Get the top stories from Digg.

JSONRequest.get(
  "http://services.digg.com/stories/top?appkey=http%3A%2F%2Fgwtsite.com&type=javascript&callback=", 
    new JSONRequestHandler() { ... });

GeoNames webservice – Get a zip-code location.

JSONRequest.get(
  "http://www.geonames.org/postalCodeLookupJSON?postalcode=94566&country=US&callback=", 
  new JSONRequestHandler() { ... });

I hope you found this short tutorial useful. If you want to learn more about GWT, make sure to subscribe to my rss feed.