I just put up a new GWT demo inspired by Jonathan Coulton’s appearance on the podcast last week. I was going to write something up on how to use the 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.

Over at developerlife, Nazmul Idris has posted a new tutorial titled, GWT Tutorial – Using History mechanism to create an RSS reader app.

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 , 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.

()

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.

()

$uploaddir = './';
$uploadfile = $uploaddir . basename($_FILES['uploadFormElement']['name']);
echo '
';
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

• Handling File Uploads